JS代码压缩工具 | 在线JavaScript精简混淆，前端js压缩体积优化工具

压缩参数配置

混淆变量名称开启代码压缩优化清除无效死代码删除全部console调试语句移除debugger断点保留原始函数名称保留类名称不混淆生成SourceMap源码映射

原始字节大小

压缩后字节

空间节省比例

Gzip预估大小

原始JavaScript源码

// 示例JavaScript代码 - 图片资源懒加载类
class LazyImageLoader {
    constructor(options = {}) {
        this.options = {
            rootMargin: "120px 0px",
            threshold: 0.01,
            dataAttr: "data-src",
            errorImage: "/static/img/image-error.png",
            onLoadCallback: null,
            ...options
        };
        this.imageList = [];
        this.observer = null;
    }

    // 初始化监听器
    init() {
        if (!window.IntersectionObserver) {
            this.loadAllImages();
            return;
        }
        this.observer = new IntersectionObserver((entries) => {
            entries.forEach(item => {
                if(item.isIntersecting){
                    this.loadImage(item.target);
                    this.observer.unobserve(item.target);
                }
            })
        },{
            rootMargin: this.options.rootMargin,
            threshold: this.options.threshold
        });

        const imgNodes = document.querySelectorAll(`[${this.options.dataAttr}]`);
        imgNodes.forEach(img => {
            this.observer.observe(img);
            this.imageList.push(img);
        })
    }

    loadImage(imgDom) {
        const realSrc = imgDom.getAttribute(this.options.dataAttr);
        imgDom.src = realSrc;
        imgDom.onload = () => {
            imgDom.classList.add("lazy-loaded");
            if(typeof this.options.onLoadCallback === "function"){
                this.options.onLoadCallback(imgDom);
            }
        }
        imgDom.onerror = () => {
            imgDom.src = this.options.errorImage;
            imgDom.classList.add("lazy-fail");
        }
    }

    loadAllImages() {
        this.imageList.forEach(img=>this.loadImage(img));
    }

    destroyObserver() {
        if(this.observer){
            this.observer.disconnect();
            this.observer = null;
        }
        this.imageList = [];
    }
}

// 防抖工具函数
function debounce(fn, delay = 200) {
    let timerId = null;
    return function(...args) {
        clearTimeout(timerId);
        timerId = setTimeout(()=>{
            fn.apply(this, args);
        }, delay)
    }
}

// 节流工具函数
function throttle(fn, interval = 300) {
    let lastRunTime = 0;
    return function(...args) {
        const now = Date.now();
        if(now - lastRunTime >= interval){
            lastRunTime = now;
            fn.apply(this, args);
        }
    }
}

// 页面滚动监听示例
window.addEventListener('scroll', throttle(()=>{
    console.log("页面滚动位置", window.scrollY);
}));

// DOM加载完成启动懒加载
document.addEventListener('DOMContentLoaded',()=>{
    const lazyLoader = new LazyImageLoader({
        rootMargin:"200px 0",
        onLoadCallback: (imgEl) => {
            console.log("图片加载成功",imgEl);
        }
    });
    lazyLoader.init();
    debugger;
})

// 简单本地存储封装
const LocalStorageHelper = {
    setItem(key, value){
        const saveStr = JSON.stringify(value);
        window.localStorage.setItem(key, saveStr);
    },
    getItem(key){
        const raw = window.localStorage.getItem(key);
        try{
            return JSON.parse(raw);
        }catch(e){
            return null;
        }
    },
    removeItem(key){
        window.localStorage.removeItem(key);
    },
    clearAll(){
        window.localStorage.clear();
    }
}

行数:0 | 函数/类:0 | 变量:0

压缩完成后的JS代码

行数:0

压缩选项说明

混淆变量名称：变量、函数标识符替换为简短字符，缩减代码体积，增加基础源码混淆效果
开启代码压缩优化：执行表达式简化、内联函数、移除多余空格注释等优化处理
清除无效死代码：删除永远无法执行到的冗余代码片段，减少js文件体积
删除全部console调试语句：批量移除console.log、warn、error等调试输出代码，用于生产环境打包
移除debugger断点：自动清除代码内debugger断点，避免上线后触发调试中断
保留原始函数名称：混淆阶段不修改函数名，部分框架代码压缩需要开启此项
保留类名称不混淆：保持class类名不变，适配依赖类名判断逻辑的前端项目
生成SourceMap源码映射：产出sourcemap，压缩后代码依然可以定位原始源码，方便线上调试排查错误

工具使用说明 | JS压缩工具介绍

JS代码压缩工具可以对JavaScript前端脚本进行本地精简混淆，所有运算在浏览器本地执行，JS源码不会上传到服务器，保障代码隐私安全。适合前端开发人员做静态页面打包、网站js瘦身、H5页面脚本优化，压缩后的js文件体积更小，有效降低网页资源加载耗时，优化页面首屏速度。

支持批量清除console日志、移除debugger断点、剔除死代码，也可以按需保留函数、类名，支持生成sourcemap，满足Vue、原生JS网页、小程序脚本等多种前端场景调试打包需求。

使用方法：粘贴JS源码，勾选需要的压缩配置，点击一键压缩，完成后可以直接复制压缩结果，或者下载为min.js文件保存本地。可先用语法校验功能检测源码语法错误，再执行压缩操作。