前言：
前端开发过程中，一般我们会使用 webpack 来做资源的打包压缩等处理，在资源压缩的过程中，一般我们会用到 uglifyjs-webpack-plugin 这个插件，这次我们就来讲一下我在使用这个插件时遇到的一些问题
异常：
这个 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
}
这个 bug 是 iPhone 的 Safari 上偶现发生的，同一行代码，同样的设备，偶现
解决方法也很简单：
// Changing this:
this.array.forEach(...)
// To this:
this.array && this.array.forEach(...)
根本原因是：
uglify-es 是什么时候用到的？压缩的时候，uglifyjs-webpack-plugin 依赖它，所以这个问题要解决，只需要把 uglify-es 从 3.3.2 降级到 3.2.2 就可以了 。
这个 issue 从 2017年12月26日 提出，到了 2018年3月12日 才被关闭，算很快了
这个 bug 是在低版本的 Android 设备上必现的问题，页面直接 crash，只留下这个报错
这个 issue 非常有趣，它是 2015年4月9日 被提出来的，社区讨论了很多解决方案，很遗憾都无法让我 work
到了 16 年的时候也没有解决，社区已经疯狂了
2016年3月17日：
2016年8月4日：
2018年1月20日：
这个问题至今也没有一个明确的答案，虽然 issue 被关闭了，但还是有开发者不断的来追问
然而我知道问题出在哪。
- 因为它只在生产环境触发，因此极有可能是代码压缩的问题
- 我也忘了我是怎么搜索这个问题的，只记得得出的结论是 uglify-es 的 bug
- 我看了一下 UglifyJS2 的 commit 和 release log，发现什么也看不懂
- 最后只记得是要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 中我们也找到了解决方法：
然而在 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 了
-
其实 uglifyjs-webpack-plugin 也有另一个 bug，它在和 AggressiveSplittingPlugin 搭配使用的时候，会报：Uncaught SyntaxError: Unexpected token 这类错
解决这个 bug 也很简单，换成 babel-minify-webpack-plugin 就完了
最后：
为了节约研发成本，还是推荐使用 cli 工具：vue-cli
