JavaScript 压缩指南

压缩 JS 文件可减少体积、提升加载速度，主要通过以下方式实现：

核心方法

移除冗余内容

删除注释、空白符、换行符

缩短变量/函数名（如 userData → a）

语法优化

简化代码结构（如 a = a * 2 → a*=2）

Tree Shaking

移除未使用的代码（通过打包工具实现）

混淆（Obfuscation）

增加反编译难度（可选，但可能影响调试）

常用工具推荐

类型

工具

特点

命令行工具

Terser

主流选择，支持 ES6+，可与 Webpack/Rollup 集成

构建插件

Webpack: terser-webpack-plugin Rollup: rollup-plugin-terser

自动集成到构建流程

在线工具

https://javascript-minifier.com/ https://skalman.github.io/UglifyJS-online/

适合单文件快速压缩

高性能工具

esbuild

极速压缩（Go语言编写，比传统工具快10-100倍）

混淆工具

javascript-obfuscator

增加反编译难度，但可能增大体积

操作示例

命令行（Terser）：

bash

复制代码

# 安装

npm install terser -g

# 压缩单个文件

terser input.js -o output.min.js -c -m

-c：启用压缩

-m：启用变量名缩短

Webpack 集成 （webpack.config.js）：

javascript

复制代码

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {

optimization: {

minimize: true,

minimizer: [new TerserPlugin()],

},

};

ESBuild 快速压缩：

bash

复制代码

npx esbuild input.js --minify --outfile=output.min.js

高级优化技巧

动态导入 (Dynamic Import) ：

使用 import() 分割代码，按需加载。

Gzip/Brotli 压缩 ：

服务器启用压缩（如 Nginx 配置 gzip on;）。

Source Maps ：

生产环境生成 .map 文件便于调试（但禁止公开访问）。

注意事项

测试压缩后代码：避免因变量混淆导致逻辑错误。

保留原始代码：始终保留未压缩版本用于开发和调试。

混淆的权衡：仅在需要反盗时使用，否则可能增加体积和性能开销。

📌 推荐方案：

项目开发 ：使用 Webpack/Rollup + Terser

库/工具开发 ：选择 esbuild 获得极致速度

临时需求：在线工具快速处理