代碼均放在 git倉庫
Webpack 4給我們帶來了一些改變。包括更快的打包速度，引入了SplitChunksPlugin插件來取代（之前版本里的）CommonsChunksPlugin插件。在這篇文章中，你將學習如何分割你的輸出代碼，從而提升我們應用的性能。
SplitChunks插件( webpack 4.x以前使用CommonsChunkPlugin )允許我們將公共依賴項提取到現有的 entry chunk 或全新的代碼塊中。
代碼分割的理念
首先搞明白： webpack里的代碼分割是個什么鬼？ 它允許你將一個文件分割成多個文件。如果使用的好，它能大幅提升你的應用的性能。其原因是基于瀏覽器會緩存你的代碼這一事實。每當你對某一文件做點改變，訪問你站點的人們就要重新下載它。然而依賴卻很少變動。如果你將（這些依賴）分離成單獨的文件，訪問者就無需多次重復下載它們了。
使用webpack生成一個或多個包含你源代碼最終版本的“打包好的文件”（bundles），（概念上我們當作）它們由（一個一個的）chunks組成。
首先 webpack 總共提供了三種辦法來實現 Code Splitting，如下：
這里我們姑且只討論使用 SplitChunks 抽取公有代碼。
splitChunks配置
在src目錄下創建三個文件pageA.js、pageB.js和pageC.js。代碼詳情見文章開頭git倉庫。
// src/pageA.jsvar react = require('react');var reactDom = require('react-dom');var utility1 = require('../utils/utility1');var utility2 = require('../utils/utility2');new Vue();module.exports = "pageA";// src/pageB.jsvar react = require('react');var reactDom = require('react-dom');var utility2 = require('../utils/utility2');var utility3 = require('../utils/utility3');module.exports = "pageB";// src/pageC.jsvar react = require('react');var reactDom = require('react-dom');var utility2 = require('../utils/utility2');var utility3 = require('../utils/utility3');module.exports = "pageC";入口文件 && 出口文件
entry: { pageA: "./src/pageA", // 引用utility1.js utility2.js pageB: "./src/pageB", // 引用utility2.js utility3.js pageC: "./src/pageC", // 引用utility2.js utility3.js},output: { path: path.join(__dirname, "dist"), filename: "[name].[hash:8].bundle.js"},配置optimization
首先我們配置optimization如下：
optimization: { splitChunks: { chunks: "all", },執行npm run build打包命令之后，查看dist目錄
可以發現，打包出來的除了三個page文件，還存在一個vendors~pageA~pageB~pageC.[hash].bundle.js文件（ 此文件中保存了pageA、pageB、pageC和node_modules中共有的size大于30KB的文件 ）。事實上這全靠了配置中本身默認固有一個cacheGroups的配置項：
splitChunks: { chunks: "all", cacheGroups: { vendors: { test: /[///]node_modules[///]/, // 匹配node_modules目錄下的文件 priority: -10 // 優先級配置項 }, default: { minChunks: 2, priority: -20, // 優先級配置項 reuseExistingChunk: true } } }在默認設置中，會將 node_mudules 文件夾中的模塊打包進一個叫 vendors的bundle中，所有引用超過兩次的模塊分配到 default bundle 中。更可以通過 priority 來設置優先級。
參數說明如下：
值得注意的是，如果沒有修改minSize屬性的話，而且被公用的代碼（假設是utilities.js）size小于30KB的話，它就不會分割成一個單獨的文件。在真實情形下，這是合理的，因為（如分割）并不能帶來性能確實的提升，反而使得瀏覽器多了一次對utilities.js的請求，而這個utilities.js又是如此之?。ú粍澦悖?/p>
緩存組會繼承splitChunks的配置，但是 test、priorty和reuseExistingChunk只能用于配置緩存組 。cacheGroups是一個對象，按上述介紹的鍵值對方式來配置即可，值代表對應的選項。除此之外，所有上面列出的選擇都是可以用在緩存組里的：chunks, minSize, minChunks, maxAsyncRequests, maxInitialRequests, name?？梢酝ㄟ^optimization.splitChunks.cacheGroups.default: false禁用default緩存組。 默認緩存組的優先級(priotity)是負數，因此所有自定義緩存組都可以有比它更高優先級（譯注：更高優先級的緩存組可以優先打包所選擇的模塊）（默認自定義緩存組優先級為0）
現在我們再重新來看一下pageA、pageB、pageC三個js文件，這三個文件中都引入了utility2.js文件，但是此文件size很明顯小于30KB，所以這部分公用代碼并沒有分割出來。如果想要分割出來很簡單，只需要：
optimization: { splitChunks: { chunks: "all", minSize: 0 },執行npm run build打包命令之后，查看dist目錄
顯然多了一個pageA~pageB~pageC.[hash].bundle.js文件。查看文件可得知此文件中存儲了utility2.js中的代碼。如下圖所示（借助于webpack-bundle-analyzer插件，詳情文章末尾附錄）。
上圖可以看出，React相關代碼均放在了vendors~pageA~pageB~pageC.[hash].bundle.js文件中，如果我們想要抽離出React代碼，應該怎么做吶？
splitChunks: { chunks: "all", cacheGroups: { commons: { chunks: "initial", minChunks: 2, name: "commons", maxInitialRequests: 5, minSize: 0, // 默認是30kb，minSize設置為0之后 // 多次引用的utility1.js和utility2.js會被壓縮到commons中 }, reactBase: { test: (module) => { return /react|redux|prop-types/.test(module.context); }, // 直接使用 test 來做路徑匹配，抽離react相關代碼 chunks: "initial", name: "reactBase", priority: 10, } } },run build之后如下圖所示。
看似非常完美，但是reactBase文件中竟然包含了node_modules，神奇的問題？室友都睡覺了，這鍵盤聲影響不好，明天接著看。
附錄
我們再安裝一個 webpack-bundle-analyzer，這個插件會清晰的展示出打包后的各個bundle所依賴的模塊：
npm i webpack-bundle-analyzer -D
引入：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin使用，在plugins數組中添加即可：
new BundleAnalyzerPlugin()
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
