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
  }
  1. 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日 才被关闭,算很快了

  1. 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 了

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

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

最后:

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,733评论 0 16
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,498评论 1 32
  • 非常感谢胖哥的博客和掘金小册的技术分享,希望大家去下面的链接去查看原文,他们写的非常好,都是多个项目经验的总结!!...
    示十阅读 2,293评论 0 2
  • 对学校厌烦至极曾经拒绝接受系统美术教育的我,于夏天电脑文件丢失无聊画的。 画的很慢,大约两小时……
    cIndybAebii阅读 218评论 0 0
  • 这几年,相亲大队日渐扩大,单身女性越来越多。近日,多则女方择偶标准挤进热搜,除了要求有房有车,还要长得帅还顾家。...
    大萌666阅读 334评论 0 1