前段時間，項(xiàng)目基本上做完了需要上線，我build了一下，發(fā)現(xiàn)打包后的有些文件后面提示big，文件很大。做完了，就要去優(yōu)化，用了幾天，效果很不錯，一些方法如下：

1.將一些第三方工具和包不再用npm模塊引入，改用cdn引入

圖1

這里講要用cdn引入的模塊名放在externals里面，防止將某些 包(package)打包到 bundle 中，然后像：import vue from 'vue'這些引入可以去掉。

圖2

這里講要用cdn引入的資源放在html里用script標(biāo)簽引入，上面的例子就可以引用了element,vue-router,moment,echarts的靜態(tài)資源。這一步應(yīng)該就能將生成的第三方模塊打包成的vendor.js減小很多

2 特別突出的echarts

圖3

項(xiàng)目中引用了echarts，結(jié)果圖3打包后的vendor-async竟然達(dá)到了將近800k,好怕怕啊。

圖4

用webpack分析工具webpack-bundle-analyzer，發(fā)現(xiàn)echarts特別大之后，將echarts用靜態(tài)資源引入。但是，有出現(xiàn)問題，因?yàn)轫?xiàng)目中使用了中國地圖，所以china.js引入不了，之后經(jīng)這個文件也用靜態(tài)進(jìn)入，參考圖2，這才能夠出現(xiàn)地圖。

圖5

結(jié)果，發(fā)現(xiàn)這個文件由170多k直接到6k,^_^。

3? 將js,css壓縮成zip文件

圖6

這里我將vue-cli中設(shè)置的productionGzip設(shè)置為true,打包的js，css文件可以同時生成的壓縮zip文件。如果瀏覽器支持，就會直接下載zip文件

圖7? 未壓縮打包后的大小

圖8 打包后的zip文件

這少了三分之一的樣子，我本地瀏覽器用的就是zip文件

圖9

4?將vender.js切割

圖10

如果最后第三方模塊打包生成的vendor.js過大，可以將其切割成多個文件。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?作者的react小項(xiàng)目，歡迎star