JavaScript代码压缩通过删除无用字符、缩短变量名、简化语法结构减小体积且保持功能不变,主流工具包括Terser(现代首选)、UglifyJS(已停更)和SWC(Rust编写、极速),推荐Terser集成于Webpack 5+,并需配合Gzip、按需引入等进一步优化。

JavaScript代码压缩主要是通过删除无用字符、缩短变量名、简化语法结构等方式减小文件体积,同时保持功能不变。关键不是单纯删空格,而是安全地进行语法级优化。
主流压缩工具推荐
目前最常用且维护活跃的工具有三个:
- Terser:现代首选,支持ES6+语法,可配置程度高,Webpack 5+默认集成,适合生产构建
- UglifyJS:老牌工具,对旧版ES5兼容性好,但已停止更新,不建议新项目使用
- SWC:Rust编写,速度极快,内置压缩能力,适合需要极速构建的场景(如Vite、Next.js底层使用)
基础压缩操作示例
以Terser为例,命令行快速压缩:
npx terser input.js -o output.min.js --compress --mangle其中:
立即学习“Java免费学习笔记(深入)”;
- --compress 启用代码逻辑优化(如移除死代码、简化条件判断)
- --mangle 混淆变量和函数名(a、b、c代替长名称)
- 加 --format beautify 可生成格式化后的压缩结果,便于调试
构建流程中集成压缩
实际项目中不建议手动执行压缩,应交由构建工具自动处理:
- Webpack:配置
optimization.minimize: true即可启用TerserPlugin - Vite:默认开启压缩,可通过
build.minify选项切换为'terser'或'esbuild' - Rollup:安装
@rollup/plugin-terser插件并添加到plugins数组
压缩之外的体积优化技巧
单靠压缩效果有限,需配合其他手段:
- 启用Gzip或Brotli服务器压缩(通常能再减少60%–70%传输体积)
- 按需引入模块,避免打包整个Lodash等大型库
- 用
/*#__PURE__*/标记无副作用调用,帮助Terser识别并移除未使用的函数 - 检查 source map 是否误打包进生产文件(应单独生成并部署)










