本篇文章為大家展示了怎么在webpack4中利用SplitChunks實現(xiàn)代碼分隔，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

公司主營業(yè)務：網(wǎng)站建設、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出上海免費做網(wǎng)站回饋大家。

代碼分割的理念

首先搞明白： webpack里的代碼分割是個什么鬼？ 它允許你將一個文件分割成多個文件。如果使用的好，它能大幅提升你的應用的性能。其原因是基于瀏覽器會緩存你的代碼這一事實。每當你對某一文件做點改變，訪問你站點的人們就要重新下載它。然而依賴卻很少變動。如果你將（這些依賴）分離成單獨的文件，訪問者就無需多次重復下載它們了。

使用webpack生成一個或多個包含你源代碼最終版本的“打包好的文件”（bundles），（概念上我們當作）它們由（一個一個的）chunks組成。

首先 webpack 總共提供了三種辦法來實現(xiàn) Code Splitting，如下：

• 入口配置：entry 入口使用多個入口文件；

• 抽取公有代碼：使用 SplitChunks 抽取公有代碼；

• 動態(tài)加載 ：動態(tài)加載一些代碼。

這里我們姑且只討論使用 SplitChunks 抽取公有代碼。

splitChunks配置

在src目錄下創(chuàng)建三個文件pageA.js、pageB.js和pageC.js。代碼詳情見文章開頭git倉庫。

// src/pageA.js
var 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.js
var react = require('react');
var reactDom = require('react-dom');
var utility2 = require('../utils/utility2');
var utility3 = require('../utils/utility3');

module.exports = "pageB";

// src/pageC.js
var 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",
 },

執(zhí)行npm run build打包命令之后，查看dist目錄

可以發(fā)現(xiàn)，打包出來的除了三個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 // 優(yōu)先級配置項
  },
  default: {
  minChunks: 2,
  priority: -20, // 優(yōu)先級配置項
  reuseExistingChunk: true
  }
 }
 }

在默認設置中，會將 node_mudules 文件夾中的模塊打包進一個叫 vendors的bundle中，所有引用超過兩次的模塊分配到 default bundle 中。更可以通過 priority 來設置優(yōu)先級。

參數(shù)說明如下：

• chunks：表示從哪些chunks里面抽取代碼，除了三個可選字符串值 initial、async、all 之外，還可以通過函數(shù)來過濾所需的 chunks；

• minSize：表示抽取出來的文件在壓縮前的最小大小，默認為 30000；

• maxSize：表示抽取出來的文件在壓縮前的大大小，默認為 0，表示不限制大大?。?/p>

• minChunks：表示被引用次數(shù)，默認為1；上述配置commons中minChunks為2，表示將被多次引用的代碼抽離成commons。

值得注意的是，如果沒有修改minSize屬性的話，而且被公用的代碼（假設是utilities.js）size小于30KB的話，它就不會分割成一個單獨的文件。在真實情形下，這是合理的，因為（如分割）并不能帶來性能確實的提升，反而使得瀏覽器多了一次對utilities.js的請求，而這個utilities.js又是如此之?。ú粍澦悖?。

• maxAsyncRequests：大的按需(異步)加載次數(shù)，默認為 5；

• maxInitialRequests：大的初始化加載次數(shù)，默認為 3；

• automaticNameDelimiter：抽取出來的文件的自動生成名字的分割符，默認為 ~；

• name：抽取出來文件的名字，默認為 true，表示自動生成文件名；

• cacheGroups: 緩存組。（這才是配置的關鍵）

緩存組會繼承splitChunks的配置，但是 test、priorty和reuseExistingChunk只能用于配置緩存組 。cacheGroups是一個對象，按上述介紹的鍵值對方式來配置即可，值代表對應的選項。除此之外，所有上面列出的選擇都是可以用在緩存組里的：chunks, minSize, minChunks, maxAsyncRequests, maxInitialRequests, name?？梢酝ㄟ^optimization.splitChunks.cacheGroups.default: false禁用default緩存組。 默認緩存組的優(yōu)先級(priotity)是負數(shù)，因此所有自定義緩存組都可以有比它更高優(yōu)先級（譯注：更高優(yōu)先級的緩存組可以優(yōu)先打包所選擇的模塊）（默認自定義緩存組優(yōu)先級為0）

現(xiàn)在我們再重新來看一下pageA、pageB、pageC三個js文件，這三個文件中都引入了utility2.js文件，但是此文件size很明顯小于30KB，所以這部分公用代碼并沒有分割出來。如果想要分割出來很簡單，只需要：

optimization: {
 splitChunks: {
  chunks: "all",
  minSize: 0
 },

執(zhí)行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數(shù)組中添加即可：

new BundleAnalyzerPlugin()

上述內(nèi)容就是怎么在webpack4中利用SplitChunks實現(xiàn)代碼分隔，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前題目：怎么在webpack4中利用SplitChunks實現(xiàn)代碼分隔-創(chuàng)新互聯(lián)
轉載源于：http://jinyejixie.com/article18/dijidp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、虛擬主機、面包屑導航、微信小程序、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)