自從webpack升級(jí)到4以來，號(hào)稱零配置。代碼會(huì)自動(dòng)分割、壓縮、優(yōu)化，同時(shí) webpack 也會(huì)自動(dòng)幫你 Scope hoisting 和 Tree-shaking。
說到這里webpack4取消了UglifyjsWebpackPlugin，使用minimize進(jìn)行壓縮，取消了CommonsChunkPlugin，使用splitChunks進(jìn)行分包。

在沒配置任何東西的情況下，webpack 4 就智能的幫你做了代碼分包。入口文件依賴的文件都被打包進(jìn)了main.js，那些大于 30kb 的第三方包，如：echarts、xlsx、dropzone等都被單獨(dú)打包成了一個(gè)個(gè)獨(dú)立 bundle。
其它被我們?cè)O(shè)置了異步加載的頁面或者組件變成了一個(gè)個(gè)chunk，也就是被打包成獨(dú)立的bundle，比如我們的workbook頁面，是以運(yùn)用了懶加載路優(yōu)酷加載的。
它內(nèi)置的代碼分割策略是這樣的：
新的 chunk 是否被共享或者是來自 node_modules 的模塊
新的 chunk 體積在壓縮之前是否大于 30kb
按需加載 chunk 的并發(fā)請(qǐng)求數(shù)量小于等于 5 個(gè)
頁面初始加載時(shí)的并發(fā)請(qǐng)求數(shù)量小于等于 3 個(gè)

屏幕快照 2019-03-01 上午9.27.10.png

這是我們項(xiàng)目沒有做任何配置的分包圖，全是webpack做的默認(rèn)配置。觀察這個(gè)分析圖，發(fā)現(xiàn)main.js里面既有node_modules的包，還有src下的業(yè)務(wù)代碼，并且除了main，幾乎每個(gè)bundle都是這樣包含node_modules和src下的代碼，這樣有什么不好的地方呢，每次業(yè)務(wù)代碼的變動(dòng)會(huì)導(dǎo)致bundle的hash變化，JS文件緩存失效，要重新下載，但是node_modules下的文件根本沒有變動(dòng)，也會(huì)一起重新打包。
因?yàn)閣ebpack只做了入口文件的依賴代碼打包，也就是main.js，并且只做了入口文件的公共代碼分析，只有入口文件引用過的代碼，并且其他chunk頁面也引入了的話，webpack會(huì)依據(jù)自身默認(rèn)分包規(guī)則將其分包，如下圖

image.png

但是如果入口文件沒有引入，那么其它c(diǎn)hunk頁面里面的公共代碼并沒有抽出，導(dǎo)致每個(gè)bundle都有重復(fù)打包代碼的情況，導(dǎo)致整個(gè)項(xiàng)目文件較大，Gzip壓縮后仍然有2.07Mb，如下圖，很明顯antd的table組件都被重復(fù)打包了，因?yàn)槿肟谖募]有引入，也就沒有被webpack分包

image.png

但凡配置了緩存組，這項(xiàng)目代碼會(huì)按照webpack默認(rèn)配置提取，這個(gè)配置提取了項(xiàng)目所有公共引用在2次以上的大于30KB公共代碼塊，不僅是node_modules中的也包括src中的業(yè)務(wù)代碼

cacheGroups{
    common: {
        name: "common",
        chunks: "all",
        minChunks: 2,
        priority: 10,
     }
}

image.png

會(huì)用到如 echarts、xlsx、dropzone等各種第三方插件，同時(shí)又由于是管理后臺(tái)，所以本身自己也會(huì)寫很多共用組件，比如各種封裝好的搜索查詢組件，共用的業(yè)務(wù)模塊等等，如果按照默認(rèn)的拆包規(guī)則，結(jié)果就不怎么完美了。
在知道了以上這些規(guī)則的現(xiàn)象后我對(duì)項(xiàng)目進(jìn)行了一個(gè)分包，基于的策略是：

1. 基礎(chǔ)類庫：react，react-redux，react-router
2. UI庫：antd，antd-icons
3. 公共組件庫：自定義的公共組件
4. 低頻組件：echart
5. 業(yè)務(wù)代碼

基于以上規(guī)則做出來的拆包結(jié)果如下

image.png

拆分后的包變?yōu)?.24MB，有了較大的縮小

image.png

image.png

因?yàn)椴鸪隽薱ommon公共庫，這個(gè)庫主要是node_modules中的公共庫，更新頻率低，其它頁面chunk都可以公用這塊庫，因此其它頁面都只包含自己業(yè)務(wù)代碼，例如process縮小了75%，modal縮小了87%，workbook縮小了80%，
另外webpack機(jī)制下，把入口文件和其它c(diǎn)hunk文件的公共代碼進(jìn)行抽取，并且在首頁進(jìn)行下載，這樣導(dǎo)致首頁的下載文件過多，阻塞了網(wǎng)絡(luò)

image.png