什么是JS代码压缩工具？
JS 压缩工具使用 Terser 引擎通过去除空白字符、注释并缩短变量名来压缩 JavaScript 代码。这可减小文件体积，加快页面加载速度，降低带宽成本，同时保留代码的完整功能。
压缩器在本地用 Terser 处理你的代码:去掉空白和注释,开启 mangle 后把局部变量改成单字母,开启 compress 后做安全的 AST 变换,还可以删除 console.log。工具会显示原始大小、压缩后大小以及节省的百分比,方便你在上线前确认效果。
使用方法
- 将 JavaScript 代码粘贴到输入编辑器中，或直接上传 .js 文件。
- 选择压缩选项：开启变量名混淆（缩短变量名）、压缩级别，以及是否移除 console.log 语句。
- 点击"压缩"处理代码。查看体积缩减比例，然后下载压缩后的文件或复制到剪贴板。
何时使用
- 把 JS 包压缩好再丢到没有构建步骤的 CDN 上。
- 在把第三方库贴进 CMS 主题前,先去掉注释和 console 语句。
- 为客服小部件、广告像素或外部脚本片段一次性产出压缩后的版本。
结果
您有一个 45KB 的工具库，包含大量注释和冗长的变量名。将其粘贴进来，启用变量名混淆和压缩，即可得到 12KB 的输出——压缩率达 73%，可直接用于生产环境部署。
常见问题
- 压缩会不会把代码弄坏?
- Terser 默认采取保守策略,会尽量保留语义。mangle 只重命名未导出的变量,compress 不会做无法证明安全的变换。如果代码依赖 Function.name 或对源码做 eval,就在该文件上关闭 mangle。
- 通常能压缩多少?
- JavaScript 一般会缩小 40% 到 70%。注释多、变量名长、有大量无用分支的代码缩得多;本身就紧凑、或大段是字符串字面量的代码缩得少。再加上 gzip 之后,差距会进一步缩小。
- minify、compress、mangle 三者有什么区别?
- minify 是统称。compress 在语法层做常量折叠、删除死分支等变换;mangle 把标识符改成短名。你可以单独开任意一项,但三个一起打开通常输出最小。
- 服务器会用 gzip 或 brotli 压缩,我还需要先 minify 吗?
- 需要。gzip 能压缩文本的冗余,但不会改长变量名,也不会删掉死分支。压缩过的代码 gzip 之后更小,加载后解析得也更快。两步是叠加效果,不是重复劳动。
- 支持 TypeScript 或 ES2022 这类新语法吗?
- 纯 TypeScript 要先编译成 JS,因为 Terser 只处理 JavaScript。直到 ES2022 的现代语法(私有字段、顶层 await、可选链)都能直接解析,无需 Babel 转换。