自從webpack升級到4以來蚌父，號稱零配置哮兰。代碼會自動分割毛萌、壓縮苟弛、優(yōu)化，同時 webpack 也會自動幫你 Scope hoisting 和 Tree-shaking阁将。
說到這里webpack4取消了UglifyjsWebpackPlugin膏秫，使用minimize進行壓縮，取消了CommonsChunkPlugin做盅，使用splitChunks進行分包缤削。
在沒配置任何東西的情況下，webpack 4 就智能的幫你做了代碼分包吹榴。入口文件依賴的文件都被打包進了main.js亭敢，那些大于 30kb 的第三方包，如：echarts图筹、xlsx帅刀、dropzone等都被單獨打包成了一個個獨立 bundle让腹。
其它被我們設(shè)置了異步加載的頁面或者組件變成了一個個chunk，也就是被打包成獨立的bundle扣溺，比如我們的workbook頁面骇窍，是以運用了懶加載路優(yōu)酷加載的。
它內(nèi)置的代碼分割策略是這樣的：
新的 chunk 是否被共享或者是來自 node_modules 的模塊
新的 chunk 體積在壓縮之前是否大于 30kb
按需加載 chunk 的并發(fā)請求數(shù)量小于等于 5 個
頁面初始加載時的并發(fā)請求數(shù)量小于等于 3 個
這是我們項目沒有做任何配置的分包圖锥余，全是webpack做的默認(rèn)配置腹纳。觀察這個分析圖，發(fā)現(xiàn)main.js里面既有node_modules的包驱犹，還有src下的業(yè)務(wù)代碼嘲恍，并且除了main，幾乎每個bundle都是這樣包含node_modules和src下的代碼雄驹，這樣有什么不好的地方呢蛔钙，每次業(yè)務(wù)代碼的變動會導(dǎo)致bundle的hash變化，JS文件緩存失效荠医，要重新下載吁脱，但是node_modules下的文件根本沒有變動，也會一起重新打包彬向。
因為webpack只做了入口文件的依賴代碼打包兼贡，也就是main.js，并且只做了入口文件的公共代碼分析娃胆，只有入口文件引用過的代碼遍希，并且其他chunk頁面也引入了的話，webpack會依據(jù)自身默認(rèn)分包規(guī)則將其分包里烦，如下圖
但是如果入口文件沒有引入凿蒜，那么其它chunk頁面里面的公共代碼并沒有抽出，導(dǎo)致每個bundle都有重復(fù)打包代碼的情況胁黑，導(dǎo)致整個項目文件較大废封，Gzip壓縮后仍然有2.07Mb，如下圖丧蘸，很明顯antd的table組件都被重復(fù)打包了漂洋，因為入口文件沒有引入，也就沒有被webpack分包
但凡配置了緩存組力喷，這項目代碼會按照webpack默認(rèn)配置提取刽漂，這個配置提取了項目所有公共引用在2次以上的大于30KB公共代碼塊，不僅是node_modules中的也包括src中的業(yè)務(wù)代碼
cacheGroups{
common: {
name: "common",
chunks: "all",
minChunks: 2,
priority: 10,
}
}
會用到如 echarts弟孟、xlsx贝咙、dropzone等各種第三方插件，同時又由于是管理后臺拂募，所以本身自己也會寫很多共用組件庭猩，比如各種封裝好的搜索查詢組件乌奇，共用的業(yè)務(wù)模塊等等，如果按照默認(rèn)的拆包規(guī)則眯娱，結(jié)果就不怎么完美了礁苗。
在知道了以上這些規(guī)則的現(xiàn)象后我對項目進行了一個分包，基于的策略是：
- 基礎(chǔ)類庫：react徙缴，react-redux试伙，react-router
- UI庫：antd，antd-icons
- 公共組件庫：自定義的公共組件
- 低頻組件：echart
- 業(yè)務(wù)代碼
基于以上規(guī)則做出來的拆包結(jié)果如下
拆分后的包變?yōu)?.24MB于样，有了較大的縮小
與未拆分的包對比：
因為拆出了common公共庫疏叨，這個庫主要是node_modules中的公共庫，更新頻率低穿剖，其它頁面chunk都可以公用這塊庫蚤蔓，因此其它頁面都只包含自己業(yè)務(wù)代碼，例如process縮小了75%糊余，modal縮小了87%秀又，workbook縮小了80%，
另外webpack機制下贬芥，把入口文件和其它chunk文件的公共代碼進行抽取吐辙，并且在首頁進行下載，這樣導(dǎo)致首頁的下載文件過多蘸劈，阻塞了網(wǎng)絡(luò)
抽取common包之后這個問題得到了解決昏苏，因為把一些公共包都打進了common
