webpack uglify

前言：

前端开发过程中，一般我们会使用 webpack 来做资源的打包压缩等处理，在资源压缩的过程中，一般我们会用到 uglifyjs-webpack-plugin 这个插件，这次我们就来讲一下我在使用这个插件时遇到的一些问题

异常：

1. SyntaxError: Cannot declare a let variable twice

这个 bug 是在 iPhone 10.3.x 的 Safari 浏览器上触发的，当时是使用了 swiper 这个库的页面都崩溃了

解决方法也很简单，修改配置如下：

new UglifyJsPlugin({
  sourceMap: true,
  uglifyOptions: {
    ecma: 8,
    // safari10: true,
    mangle: { safari10: true }
  }

坑的地方在是根据 uglifyjs的文档 配置成这样是无效的：

new UglifyJsPlugin({
  sourceMap: true,
  uglifyOptions: {
    ecma: 8,
    safari10: true
  }

2. TypeError: undefined is not an object (evaluating

这个 bug 是 iPhone 的 Safari 上偶现发生的，同一行代码，同样的设备，偶现

解决方法也很简单：

// Changing this:
this.array.forEach(...)
// To this:
this.array && this.array.forEach(...)

根本原因是：

uglify-es

uglify-es 是什么时候用到的？压缩的时候，uglifyjs-webpack-plugin 依赖它，所以这个问题要解决，只需要把 uglify-es 从 3.3.2 降级到 3.2.2 就可以了 。

这个 issue 从 2017年12月26日 提出，到了 2018年3月12日 才被关闭，算很快了

3. Cannot read property 'call' of undefined

这个 bug 是在低版本的 Android 设备上必现的问题，页面直接 crash，只留下这个报错

这个 issue 非常有趣，它是 2015年4月9日 被提出来的，社区讨论了很多解决方案，很遗憾都无法让我 work

到了 16 年的时候也没有解决，社区已经疯狂了

2016年3月17日：

Please fix the issue~

2016年8月4日：

仍然推测是 DedupePlugin 的问题

2018年1月20日：

issue被关闭了，但是问题并没有解决

这个问题至今也没有一个明确的答案，虽然 issue 被关闭了，但还是有开发者不断的来追问

然而我知道问题出在哪。

1. 因为它只在生产环境触发，因此极有可能是代码压缩的问题
2. 我也忘了我是怎么搜索这个问题的，只记得得出的结论是 uglify-es 的 bug
3. 我看了一下 UglifyJS2 的 commit 和 release log，发现什么也看不懂
4. 最后只记得是要upgrade uglify-es的版本来解决这个问题

然而这篇文章的第二个 bug，是需要downgrade uglify-es的版本，所以 uglifyjs-webpack-plugin 的这个 bug 是解决不了了，至少现在解决不了。

但我们的代码必须压缩才能上线，并且要保证低版本设备的兼容，怎么办？

换一个压缩插件：babel-minify-webpack-plugin
它的默认配置也更合理一点，使用很简单：

new MinifyPlugin(
  {}
)

完。

然而事情并没有那么简单，babel-minify-webpack-plugin 也有它自己的 bug，它对 sourceMap 的支持不友好：issue

在 issue 中我们也找到了解决方法：

只支持 cheap-*开头的 sourceMap

然而在 SSR 的时候，cheap-*开头的 sourceMap 也是不支持的，解决方法也很简单：

// webpack.client.config.js
new MinifyPlugin(
  {},
  {
    sourceMap: "cheap-module-source-map"
  }
)
// webpack.server.config.js
new MinifyPlugin(
  {},
  {
    sourceMap: false
  }
)

这样问题就解决了，server 端本来就不需要 sourceMap，client 端生成的 sourceMap 将就一下也能用，虽然对找 bug 不友好，但是起码用户可以 work 了

4. 其实 uglifyjs-webpack-plugin 也有另一个 bug，它在和 AggressiveSplittingPlugin 搭配使用的时候，会报：Uncaught SyntaxError: Unexpected token 这类错

解决这个 bug 也很简单，换成 babel-minify-webpack-plugin 就完了

最后：

为了节约研发成本，还是推荐使用 cli 工具：vue-cli