Terser 是现代 JavaScript 压缩的默认选择,UglifyJS 因不支持可选链、空值合并等新语法且压缩率低而被淘汰;Webpack v5+ 已内置 Terser,无需安装 uglifyjs-webpack-plugin,应通过 terserOptions 自定义配置。

?.、??、async/await 或箭头函数,UglifyJS 很可能直接报错或压缩不全。
为什么 UglifyJS 在 2026 年还容易被误用?
很多老项目文档、过时教程或 CI 脚本仍硬编码 uglifyjs-webpack-plugin,尤其在 Webpack v3/v4 迁移未清理干净时。它对 ES5 稳定,但遇到 const foo = { bar: () => {} }; 这类结构,压缩后可能丢掉括号或破坏作用域。
- UglifyJS v3.19.3(最新版)仍不支持可选链和空值合并运算符,会抛出
Unexpected token: punc (?.) - 即使加
--ecma 2020参数,也无法正确处理带解构参数的箭头函数:([a, b]) => a + b - 压缩后体积通常比 Terser 大 15%–20%,尤其在含大量模板字符串和类字段的代码中
怎么在 Webpack 中正确启用 Terser?
Webpack v5+ 默认内置 Terser,但很多人没意识到:只要没显式覆盖 optimization.minimizer,就已在用它。真正要改的是配置细节,而不是“换插件”。
- 别再装
uglifyjs-webpack-plugin—— 它与 Webpack v5+ 不兼容,安装后反而导致构建失败 - 自定义压缩行为,直接配
terserOptions,比如移除调试语句:new TerserPlugin({ terserOptions: { compress: { drop_console: true, drop_debugger: true, pure_funcs: ['console.info'] } } }) - 混淆变量名(
mangle)默认开启,但若需保留某些全局函数名(如供外部调用的 API),加reserved: ['init', 'render']
本地 CLI 压缩时,Terser 和 UglifyJS 的命令差异
两者 CLI 接口相似,但行为天差地别。同一段代码,UglifyJS 可能静默跳过语法错误,而 Terser 会明确报错并指出位置——这是好事,但容易让人误以为“Terser 更难用”。
- UglifyJS CLI:
npx uglifyjs input.js -c -m -o output.js→ 对let x = y ?? 1;会输出未压缩原样,无提示 - Terser CLI:
npx terser input.js -c -m -o output.js→ 遇到??直接报错Unexpected token: operator (??),除非加--ecma 2020 - 真正安全的本地压缩命令是:
npx terser input.js --ecma 2020 -c passes=2 -m -o output.js,其中passes=2让压缩更激进(UglifyJS 没这选项)
/*! Copyright... */ 保留,不用额外配置;但 UglifyJS 需手动加 --comments /@license/i 才能做到。











