UglifyJS深度使用指南与性能优化实战经验分享

又双叒叕踩坑了，这次是UglifyJS的锅

前几天上线一个项目的时候，发现打包后的代码运行报错，折腾了半天才发现问题出在UglifyJS上。这里记录一下整个排查过程和解决方案，希望能帮到遇到类似问题的朋友。

先说结论：最终问题是因为UglifyJS默认不支持ES6+语法压缩，需要额外配置插件才能正确处理现代JavaScript代码。核心解决方法我放在后面详细讲。

从发现问题到怀疑人生的两个小时

事情是这样的，当时项目已经开发完成，测试环境一切正常。但在生产环境部署后，控制台直接报了一堆语法错误，页面功能完全不可用。一开始我还以为是Webpack配置的问题，因为之前也遇到过类似情况。

这里我踩了个坑：第一时间去检查了Webpack配置，看了mode设置、loader规则这些常规项，但都没发现问题。折腾了一个小时后才反应过来，可能是压缩工具出了问题。

后来试了下发现，把UglifyJS去掉后，代码虽然没压缩，但至少能正常运行。这就基本锁定是UglifyJS的锅了。

核心代码就这几行

找到问题根源后，解决方案其实很简单。对于使用Webpack4及以上版本的项目，可以直接用Terser插件替代UglifyJS。下面是完整的配置代码：

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

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除console
            dead_code: true,   // 移除无用代码
          },
          output: {
            comments: false,   // 移除注释
          },
        },
      }),
    ],
  },
};

如果你确实需要用UglifyJS，可以这样配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          ecma: 8, // 支持ES8语法
          compress: {
            warnings: false,
            drop_console: true,
          },
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
};

为什么UglifyJS会出问题？

说到这里，简单聊聊背后的原因。UglifyJS确实是个老牌的JavaScript压缩工具，在ES5时代几乎是标配。但它有个致命缺陷：原生不支持ES6+语法。

现代前端项目基本都在用ES6+写法，像箭头函数、let/const声明、解构赋值这些特性早就普及了。而UglifyJS默认只认var和function关键字，遇到新语法就会报错。

这个问题其实社区早就讨论过了，官方也有解决方案，就是通过babel预转译代码。但说实话，这种做法太麻烦了，还不如直接换Terser来的简单。

几个重要的踩坑提醒

在解决问题的过程中，有几个点特别容易踩坑，这里给大家提个醒：

• 不要盲目升级Node.js版本：我一开始就怀疑是Node版本问题，结果升级到最新版还是报错，浪费了不少时间。
• 记得清理缓存：修改压缩配置后，最好执行一下npm run clean或者删除dist目录，避免缓存导致问题。
• 关注第三方库的兼容性：有些老库可能依赖特定的压缩方式，切换工具时要注意测试。

一个小瑕疵

虽然换成Terser后大部分问题都解决了，但还是遇到了一个小问题：极少数情况下，压缩后的代码体积反而比原来大。具体原因还没完全搞明白，猜测可能和Tree Shaking的实现有关。

不过这个影响不大，毕竟性能提升和错误修复才是关键。后续有空再研究这个问题。

总结一下

以上就是我踩坑UglifyJS后的完整记录。主要教训就是：别迷信老工具，该升级就升级。现在前端发展这么快，抱着过时的工具不放只会给自己找麻烦。

最后还是要感谢开源社区，正是有了Terser这样的优秀工具，我们才能更轻松地解决这些问题。如果你有更好的解决方案，欢迎在评论区交流！