前言：
前端開發(fā)過程中，一般我們會使用 webpack 來做資源的打包壓縮等處理，在資源壓縮的過程中，一般我們會用到 uglifyjs-webpack-plugin 這個插件，這次我們就來講一下我在使用這個插件時遇到的一些問題
異常：
這個 bug 是在 iPhone 10.3.x 的 Safari 瀏覽器上觸發(fā)的，當(dāng)時是使用了 swiper 這個庫的頁面都崩潰了
解決方法也很簡單，修改配置如下：
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
ecma: 8,
// safari10: true,
mangle: { safari10: true }
}
坑的地方在是根據(jù) uglifyjs的文檔 配置成這樣是無效的：
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
ecma: 8,
safari10: true
}
這個 bug 是 iPhone 的 Safari 上偶現(xiàn)發(fā)生的，同一行代碼，同樣的設(shè)備，偶現(xiàn)
解決方法也很簡單：
// 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日 才被關(guān)閉，算很快了
這個 bug 是在低版本的 Android 設(shè)備上必現(xiàn)的問題，頁面直接 crash，只留下這個報錯
這個 issue 非常有趣，它是 2015年4月9日 被提出來的，社區(qū)討論了很多解決方案，很遺憾都無法讓我 work
到了 16 年的時候也沒有解決，社區(qū)已經(jīng)瘋狂了
2016年3月17日：
2016年8月4日：
2018年1月20日：
這個問題至今也沒有一個明確的答案，雖然 issue 被關(guān)閉了，但還是有開發(fā)者不斷的來追問
然而我知道問題出在哪。
- 因?yàn)樗辉谏a(chǎn)環(huán)境觸發(fā)，因此極有可能是代碼壓縮的問題
- 我也忘了我是怎么搜索這個問題的，只記得得出的結(jié)論是 uglify-es 的 bug
- 我看了一下 UglifyJS2 的 commit 和 release log，發(fā)現(xiàn)什么也看不懂
- 最后只記得是要upgrade uglify-es的版本來解決這個問題
然而這篇文章的第二個 bug，是需要downgrade uglify-es的版本，所以 uglifyjs-webpack-plugin 的這個 bug 是解決不了了，至少現(xiàn)在解決不了。
但我們的代碼必須壓縮才能上線，并且要保證低版本設(shè)備的兼容，怎么辦？
換一個壓縮插件：babel-minify-webpack-plugin
它的默認(rèn)配置也更合理一點(diǎn)，使用很簡單：
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 了
-
其實(shí) uglifyjs-webpack-plugin 也有另一個 bug，它在和 AggressiveSplittingPlugin 搭配使用的時候，會報：Uncaught SyntaxError: Unexpected token 這類錯
解決這個 bug 也很簡單，換成 babel-minify-webpack-plugin 就完了
最后：
為了節(jié)約研發(fā)成本，還是推薦使用 cli 工具：vue-cli
