webpack2和 UglifyJs 死亡组合的背后

项目背景

接到一个需求:优化一个15年老项目的webpack打包体积(die,老实程序汪接盘的日常)

打开package.json一看:窒息。。webpack2。。跑起来一看:40多兆……还飙红……所以线上泥踏马的是强上的吗。。抓秃。。

冷冷静下来耶耶加油我是坠胖的!加了几个压缩插件升级旧依赖去掉无用依赖……一顿骚操作……打包体积终于降到15兆。。然鹅还是飙红中断,抛出如下:

Unexpected token name «i», expected punc «;» [./~/pinyin/lib/pinyin.js:34,0]

哦,拼音库有问题是吧,去掉就是了,反正也没用到发出偷懒的嘿嘿嘿。。

1234再来一次。。

ERROR in renderer.js from UglifyJs
Unexpected token punc «(», expected punc «:» [renderer.js:26813,14]

What's the f**k!!!! UglifyJs你有完没完你不要太嚣张你等着我这就去叫人!然后跑进某hub查了一圈,听各路大佬科普到:

1、UglifyJs在webpack2时其实是跟webpack合体的,所以用new UglifyJs()插件,还是用new webpack.optimize.UglifyJsPlugin()是没有区别的。
2、造成这个错误的原因不是库的原因,也不是依赖版本的原因,而是UglifyJs在当时还不支持es6语法,所以报的错都是说你es6语法错误。。然鹅查了一下UglifyJs有出一个es6版本的但已经停更了,UglifyJs自己都停更了,官方建议用terser-webpack-plugin呢亲亲。。

查了一下terser貌似更适用于webpack3以上。。而我这里由于种种不可言状的原因不能动webpack版本不能动babel。所以……你要我怎样要怎样………像去掉拼音库那样一个个的把不适应UglifyJs的库去掉?不可能掀桌.JPG。。那我为什么不干脆把UglifyJs去掉!再找一个干干净净的小压缩嘿嘿嘿银铃笑,我可真是个小机灵鬼~~

然鹅sometimes还是太naive了,,去掉了UglifyJs,jenkins编译通过。。跑起来一看妈耶!白屏!我特么差点布到线上!颤抖的打开控制台:

Uncaught TypeError: Cannot create property 'createCredentials' on string '0'

  // 还有
 Uncaught TypeError from UglifyJs Unexpected token: name (Mime) [./~/ali-oss/shims/mime.js:8,0]

“……………………”。。createCredentials ?node你为什么要害我?node:我冤枉。。

又是一阵瞎折腾。。问题定位到阿里的一个上传依赖上:ali-oss。。

详情见这里: https://github.com/ali-sdk/ali-oss/issues/473

赶脚他们官方回答的挺敷衍的。。

总结一下各方吃瓜的回答:就是ali-oss没有es5版的可能跟某个编译不兼容(你看它那个沙雕crypto文件里写得),且import引入有问题,需要用var oss = require('ali-oss/dist/aliyun-oss-sdk.js')。。

好吧好吧这就改吃人嘴短。。然鹅我用了require方式引入,倒是不报错了,也不白屏了。。上传的功能却用不鸟了。。。oss是个空对象。

“精神病人都出院了。。那挺好啊。。大夫疯了!!”

挠下头顶最后几根头发,再次翻看ali-oss的issue:“ali-oss在后续版本会出一个解决方案”。。“我的5好像可以。”。。

update [email protected] 。。通过。。内牛满面。。。
.
.
.
.
.
老实程序猿整理不易求个关注。

你可能感兴趣的:(webpack2和 UglifyJs 死亡组合的背后)