uglifyjs报错 webpack_UglifyJs打包压缩问题引起的思考
问题背景
最近做了一个webapp项目,qa用手机测试功能时,在iphone6plus上表现是白屏,其他手机目测是ok的;因为之前在测试其他项目时也发现在这个iphone6上表现与其他手机不太一样。于是当时以为这个手机出了什么问题,或者其版本过低;就不放在心上。
然而这次白屏的影响还是要加以重视,于是在空闲的时候主动看了下,用VSCosole查看了日志信息,控制台报了一个警告信息:
unexception token const ...
然后看了加载的js源码,竟然发现一个大坑:
代码没有压缩
部分代码也没有编译成es5
这时心里顿生一阵阵的凉意,辛亏看了一下这个问题,否则发到线上会有重大问题。
uglifyjs为啥会报错
出现上面的问题,首先会想到的webpack的压缩代码插件出问题了,项目中使用uglifyjs-webpack-plugin来压缩代码。于是在本地执行发布上线的操作代码编译压缩,果不其然,压缩类似这样的错误:
ERROR in static/javascripts/test_0_30fbc92.js from UglifyJs
Unexpected token: name (instance) [static/javascripts/test_0_30fbc92.js:2854,6]
具体可以看下图:
然后定位到指定文件的报错的位置,发现都是es6的语法:
第一个文件2874行的内容:let instance
第二个文件78行的内容: function loadJS(url, {timeout = 5000, crossOrigin = false } = {}) {
可以看到,这两个位置都是文件第一次出现es6没有编译的位置,其实在此之后还有很多未编译的es6语法。
可能到这里有人会问,上面压缩报错为什么还能在非iphone6p的其他手机上可以正常访问到呢,可能原因如下:
uglifyjs-webpack-plugin虽然报错但是并不会阻止代码的产出,从上图也可以看出代码已经产出。只不过其内容没有压缩
另一个原因我猜是未出现问题的手机上打开浏览器已经支持这些es6语法
分析了这么多,为啥uglifyjs-webpack-plugin会报错呢,因为当前引用uglifyjs-webpack-plugin的版本为0.4.6,它依赖的是uglify-js; 它不支持压缩 es6,可以参考github的issueIt seems like uglify-js does not support es6?。
所以:
uglify-js在压缩代码时,遇到es6语法就不会压缩并且也会报错。
如果想压缩e6代码,可以使用uglify-es,其提供配置属性ecma来压缩不同类型的js。
es6为啥没有编译
上面分析我们得知,uglify-webpack-plugin之所以没有压缩,因为代码混合es6语法,那么es6语法为啥没有编译呢?推测:
在使用babel来编译es6时,由于webpack错误配置的原因导致某些文件不在指定的babel编译范围,babel从而会忽略这些js文件的编译
我们的项目目录结构如下:
这是个多个微系统共用的一个工程,这些微系统共用的组件大部分相同,他们共用一个webpack配置。
webpack的有关js的配置如下所示:
{
test: /\.js$/,
loader: 'babel-loader',
include: [
path.resolve('moudleA'),
path.resolve('moudleB')
]
}
但是与服务端交互的api目录、公共组件components目录以及公共的js方法目录common目录没有配置进上面babel-loader的include数组中,从而babel-loader会忽略这些目录下的js文件编译,导致这些目录下的js文件没有被babel-loader编译。从而导致上述问题。
所以,总结一下:
开发过程中遇到任何问题还是需要认真对待一下,保持一颗这就是bug的心态去发现并找出原因所在,才能降低线上出现重大问题的风险。
参考
uglifyjs报错 webpack_UglifyJs打包压缩问题引起的思考相关推荐
- Hbuilder无法完成应用程序云打包,一直报错需要打包校验
解决办法: 不要在上述链接中进行验证,因为会一直收不到手机验证短信. 在 https://dev.dcloud.net.cn/user/profile 中进行验证,亲测有用. 相关链接 1.MUI的简 ...
- 【Hbuilder】Hbuilder 原生App-云打包,报错需要打包校验
文章目录 一.前言 二.报错截图 三.解决: 一.前言 使用Hbuild uni-app开发完项目后,安装完App云打包,点击发行>原生App云打包,报错提示打包校验 二.报错截图 三.解决: ...
- uglifyjs报错 webpack_webpack3里使用uglifyjs压缩js时打包报错的解决
环境:webpac<4的下,安装uglifyjs.cnpm install uglifyjs-webpack-plugin -D 安装完毕后,去npm里查看uglifyjs的使用方法并添加到代码 ...
- uglifyjs报错 webpack_vue使用uglifyjs-webpack-plugin后打包报错
楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin 具体代码如下 npm install uglifyjs-we ...
- uglifyjs报错 webpack_vue 解决uglifyjs-webpack-plugin打包出现报错的问题
楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin 具体代码如下 npm install uglifyjs-we ...
- uglifyjs报错 webpack_基于vue2.X的webpack基本配置,教你手动撸一个webpack4的配置
webpack说复杂也不复杂.不复杂,核心概念不外乎是entry, output, loader, plugins.webpack4还新增了optimization选项,用于代码分割和打包优化.现在w ...
- python打包工具报错_Python打包发布神器—Pyinstaller
一前言 在windows平台学习python的过程中,你肯定会遇到需要把.py脚本打包成.exe的情形,如此,至少有两方面的好处:第一,你的代码保密性更好,其他人不能直接看到python代码:第二,打 ...
- python打包中文报错_cxfreeze打包python,飞一般的感觉
总所周知,python因库多,语法优雅,深受开发者的喜爱. 于我来说,写一些小型程序,在不需要考虑太多问题的时候,python无疑是我的第一选择.而有的时候,虽然是小型程序,但我还是需要他们通用,即使 ...
- python打包工具报错_Pyinstaller打包.py生成.exe的方法和报错总结
Pyinstaller 打包.py生成.exe的方法和报错总结 简介 有时候自己写了个python脚本觉得挺好用想要分享给小伙伴,但是每次都要帮他们的电脑装个python环境.虽然说装一下也快,但是相 ...
最新文章
- iOS 进阶之底层原理一OC对象原理alloc做了什么
- python3 性能提升_整理下Python性能语法,非常有效的提高性能的tips
- 谷歌聊天机器人api_如何编写针对Google地图等网络应用量身定制的聊天机器人
- 解决numpy报错UFuncTypeError: Cannot cast ufunc ‘add‘ output from dtype(‘x‘) to dtype(‘x‘)
- T-SQL基础--TOP
- CSE 5/7350 – Project Course Timeslot and Student Assignment Project
- 服务器的作用及用途,服务器的作用和用途是什么
- ajax请求sql数据库数据类型,ajax请求mysql文件数据库
- nvivo服务器项目,【NVivo教程】在Nvivo中设置案例路线图
- ibm主机安装服务器系统安装系统安装系统安装方法,IBM系列服务器安装操作系统安装方法.ppt...
- 超级终端中字符颜色设置
- Scrapy 爬取阳光热线问政平台存储为json 文件(使用 CrawlSpider)
- 最小采样频率计算公式_【白皮书】多路复用和采样理论
- JAVA基础---集合(一)--集合框架概述
- 多元函数泰勒级数展开_二元函数的泰勒展开二元函数的泰勒展开.pdf
- 黑鲨3能升级鸿蒙5g吗,红魔5g和黑鲨3哪个好-红魔5g和黑鲨3参数对比
- 至少12亿元收支差,分析运营商7大数据产品应用
- 计算机配件内存计入什么科目,机器配件应计入什么会计科目?
- FLOPS, FLOPs and MACs
- 基于Python文本内容/情感的对微博文本自动二元分类
热门文章
- 笔记_Maya绑定基础_创建一段骨骼
- 扩展卡尔曼滤波(EKF)理论讲解与实例(matlab、python和C++代码)
- Spring 官宣高危漏洞 springboot 2.6.6 已修复
- 【调剂】北京石油化工学院招收环境科学与工程、资源与环境硕士研究生
- 回波损耗与插入损耗等概念
- Springboot响应式代购商城APP毕业设计-附源码191654
- javascript数组降维_js Array数组实用操作大全(≈28条)不定期更新
- html5桌面通知自动关闭时间,H5 notification浏览器桌面通知
- 2019年阿里云营收破50亿美元!已成为全球第三大云计算公司
- Java日期和时间详解