[[408514]]

本文轉(zhuǎn)載自微信公眾號(hào)「微醫(yī)大前端技術(shù)」，作者焦傳鍇。轉(zhuǎn)載本文請(qǐng)聯(lián)系微醫(yī)大前端技術(shù)公眾號(hào)。

一、前言

在默認(rèn)的配置情況下，我們知道，webpack 會(huì)把所有代碼打包到一個(gè) chunk 中，舉個(gè)例子當(dāng)你的一個(gè)單頁面應(yīng)用很大的時(shí)候，你可能就需要將每個(gè)路由拆分到一個(gè) chunk 中，這樣才方便我們實(shí)現(xiàn)按需加載。

代碼分離是 webpack 中最引人注目的特性之一。此特性能夠把代碼分離到不同的 bundle 中，然后可以按需加載或并行加載這些文件。代碼分離可以用于獲取更小的 bundle，以及控制資源加載優(yōu)先級(jí)，如果使用合理，會(huì)極大影響加載時(shí)間。

二、關(guān)于代碼分割

接下來我們會(huì)分別分析不同的代碼分隔方式帶來的打包差異，首先我們的項(xiàng)目假設(shè)有這兩個(gè)簡單的文件??

index.js

import { mul } from './test' 
import $ from 'jquery' 
 
console.log($) 
console.log(mul(2, 3)) 

test.js

import $ from 'jquery' 
 
console.log($) 
 
function mul(a, b) { 
    return a * b 
} 
 
export { mul } 

可以看到現(xiàn)在他們二者都依賴于 jquery 這個(gè)庫，并且相互之間也會(huì)有依賴。

當(dāng)我們?cè)谀J(rèn)配置的情況下進(jìn)行打包，結(jié)果是這樣的??，會(huì)把所有內(nèi)容打包進(jìn)一個(gè) main bundle 內(nèi)(324kb)

那么我們?nèi)绾斡米钪苯拥姆绞綇倪@個(gè) bundle 中分離出其他模塊呢?

1. 多入口

webpack 配置中的 entry ，可以設(shè)置為多個(gè)，也就是說我們可以分別將 index 和 test 文件分別作為入口：

// entry: './src/index.js', 原來的單入口 
/** 現(xiàn)在分別將它們作為入口 */ 
entry:{ 
  index:'./src/index.js', 
  test:'./src/test.js' 
}, 
output: { 
  filename: '[name].[hash:8].js', 
  path: path.resolve(__dirname, './dist'), 
}, 

這樣讓我們看一下這樣打包后的結(jié)果：

確實(shí)打包出了兩個(gè)文件!但是為什么兩個(gè)文件都有 320+kb 呢?不是說好拆分獲取更小的 bundle ?這是因?yàn)橛捎诙叨家肓?jquery 而 webpack 從兩次入口進(jìn)行打包分析的時(shí)候會(huì)每次都將依賴的模塊分別打包進(jìn)去

沒錯(cuò)，這種配置的方式確實(shí)會(huì)帶來一些隱患以及不便：

• 如果入口 chunk 之間包含一些重復(fù)的模塊，那些重復(fù)模塊都會(huì)被引入到各個(gè) bundle 中。
• 這種方法不夠靈活，并且不能動(dòng)態(tài)地將核心應(yīng)用程序邏輯中的代碼拆分出來。

那么有沒有方式可以既可以將共同依賴的模塊進(jìn)行打包分離，又不用進(jìn)行繁瑣的手動(dòng)配置入口的方式呢?那必然是有的。

2. SplitChunksPlugin

SplitChunks 是 webpack5 自帶的開箱即用的一個(gè)插件，他可以將滿足規(guī)則的 chunk 進(jìn)行分離，也可以自定義配置。在 webpack5 中用它取代了 webpack4 中的用來解決重復(fù)依賴的 CommonsChunkPlugin 。

讓我們?cè)谖覀兊?webpack 配置中加上一些配置：

entry: './src/index.js', // 這里我們改回單入口 
/** 加上如下設(shè)置 */ 
optimization: { 
  splitChunks: { 
    chunks: 'all', 
  }, 
}, 

打包后的結(jié)果如圖：

可以看到很明顯除了根據(jù)入口打包出的 main bundle 之外，還多出了一個(gè)名為 vendors-node_modules_jquery_dist_jquery_js.xxxxx.js ，顯然這樣我們將公用的 jquery 模塊就提取出來了。

接下來我們來探究一下 SplitChunksPlugin 。首先看下配置的默認(rèn)值：

splitChunks: { 
    // 表示選擇哪些 chunks 進(jìn)行分割，可選值有：async，initial 和 all 
    chunks: "async", 
    // 表示新分離出的 chunk 必須大于等于 minSize，20000，約 20kb。 
    minSize: 20000, 
    // 通過確保拆分后剩余的最小 chunk 體積超過限制來避免大小為零的模塊,僅在剩余單個(gè) chunk 時(shí)生效 
    minRemainingSize: 0, 
    // 表示一個(gè)模塊至少應(yīng)被 minChunks 個(gè) chunk 所包含才能分割。默認(rèn)為 1。 
    minChunks: 1, 
    // 表示按需加載文件時(shí)，并行請(qǐng)求的最大數(shù)目。 
    maxAsyncRequests: 30, 
    // 表示加載入口文件時(shí)，并行請(qǐng)求的最大數(shù)目。 
    maxInitialRequests: 30, 
    // 強(qiáng)制執(zhí)行拆分的體積閾值和其他限制（minRemainingSize，maxAsyncRequests，maxInitialRequests）將被忽略 
    enforceSizeThreshold: 50000, 
    // cacheGroups 下可以可以配置多個(gè)組，每個(gè)組根據(jù) test 設(shè)置條件，符合 test 條件的模塊，就分配到該組。模塊可以被多個(gè)組引用，但最終會(huì)根據(jù) priority 來決定打包到哪個(gè)組中。默認(rèn)將所有來自 node_modules 目錄的模塊打包至 vendors 組，將兩個(gè)以上的 chunk 所共享的模塊打包至 default 組。 
    cacheGroups: { 
        defaultVendors: { 
            test: /[\\/]node_modules[\\/]/, 
            // 一個(gè)模塊可以屬于多個(gè)緩存組。優(yōu)化將優(yōu)先考慮具有更高 priority（優(yōu)先級(jí)）的緩存組。 
            priority: -10, 
            // 如果當(dāng)前 chunk 包含已從主 bundle 中拆分出的模塊，則它將被重用 
            reuseExistingChunk: true, 
        }, 
       default: { 
            minChunks: 2, 
            priority: -20, 
            reuseExistingChunk: true 
        } 
    } 
} 

默認(rèn)情況下，SplitChunks 只會(huì)對(duì)異步調(diào)用的模塊進(jìn)行分割(chunks: "async")，并且默認(rèn)情況下處理的 chunk 至少要有 20kb ，過小的模塊不會(huì)被包含進(jìn)去。

補(bǔ)充一下，默認(rèn)值會(huì)根據(jù) mode 的配置不同有所變化，具體參見源碼：

const { splitChunks } = optimization; 
if (splitChunks) { 
  A(splitChunks, "defaultSizeTypes", () => ["javascript", "unknown"]); 
  D(splitChunks, "hidePathInfo", production); 
  D(splitChunks, "chunks", "async"); 
  D(splitChunks, "usedExports", optimization.usedExports === true); 
  D(splitChunks, "minChunks", 1); 
  F(splitChunks, "minSize", () => (production ? 20000 : 10000)); 
  F(splitChunks, "minRemainingSize", () => (development ? 0 : undefined)); 
  F(splitChunks, "enforceSizeThreshold", () => (production ? 50000 : 30000)); 
  F(splitChunks, "maxAsyncRequests", () => (production ? 30 : Infinity)); 
  F(splitChunks, "maxInitialRequests", () => (production ? 30 : Infinity)); 
  D(splitChunks, "automaticNameDelimiter", "-"); 
  const { cacheGroups } = splitChunks; 
  F(cacheGroups, "default", () => ({ 
    idHint: "", 
    reuseExistingChunk: true, 
    minChunks: 2, 
    priority: -20 
  })); 
  F(cacheGroups, "defaultVendors", () => ({ 
    idHint: "vendors", 
    reuseExistingChunk: true, 
    test: NODE_MODULES_REGEXP, 
    priority: -10 
  })); 
} 

cacheGroups 緩存組是施行分割的重中之重，他可以使用來自 splitChunks.* 的任何選項(xiàng)，但是 test、priority 和 reuseExistingChunk 只能在緩存組級(jí)別上進(jìn)行配置。默認(rèn)配置中已經(jīng)給我們提供了 Vendors 組和一個(gè) defalut 組，**Vendors **組中使用 test: /[\\/]node_modules[\\/]/ 匹配了 node_modules 中的所有符合規(guī)則的模塊。

Tip：當(dāng) webpack 處理文件路徑時(shí)，它們始終包含 Unix 系統(tǒng)中的 / 和 Windows 系統(tǒng)中的 \。這就是為什么在 {cacheGroup}.test 字段中使用 [\/] 來表示路徑分隔符的原因。{cacheGroup}.test 中的 / 或 \ 會(huì)在跨平臺(tái)使用時(shí)產(chǎn)生問題。

綜上的配置，我們便可以理解為什么我們?cè)诖虬袝?huì)產(chǎn)生出名為 vendors-node_modules_jquery_dist_jquery_js.db47cc72.js 的文件了。如果你想要對(duì)名稱進(jìn)行自定義的話，也可以使用 splitChunks.name 屬性(每個(gè) cacheGroup 中都可以使用)，這個(gè)屬性支持使用三種形式：

• boolean = false 設(shè)為 false 將保持 chunk 的相同名稱，因此不會(huì)不必要地更改名稱。這是生產(chǎn)環(huán)境下構(gòu)建的建議值。
• function (module, chunks, cacheGroupKey) => string 返回值要求是 string 類型，并且在 chunks 數(shù)組中每一個(gè) chunk 都有 chunk.name 和 chunk.hash 屬性，舉個(gè)例子 

name(module, chunks, cacheGroupKey) { 
  const moduleFileName = module 
  .identifier() 
  .split('/') 
  .reduceRight((item) => item); 
  const allChunksNames = chunks.map((item) => item.name).join('~'); 
  return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`; 
}, 

• string 指定字符串或始終返回相同字符串的函數(shù)會(huì)將所有常見模塊和 vendor 合并為一個(gè) chunk。這可能會(huì)導(dǎo)致更大的初始下載量并減慢頁面加載速度。

另外注意一下 splitChunks.maxAsyncRequests 和 splitChunks.maxInitialRequests 分別指的是按需加載時(shí)最大的并行請(qǐng)求數(shù)和頁面初始渲染時(shí)候需要的最大并行請(qǐng)求數(shù)

在我們的項(xiàng)目較大時(shí)，如果需要對(duì)某個(gè)依賴單獨(dú)拆包的話，可以進(jìn)行這樣的配置：

cacheGroups: { 
  react: { 
    name: 'react', 
      test: /[\\/]node_modules[\\/](react)/, 
      chunks: 'all', 
      priority: -5, 
  }, 
 }, 

這樣打包后就可以拆分指定的包：

更多配置詳見官網(wǎng)配置文檔

3. 動(dòng)態(tài) import

使用 import()語法 來實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入也是我們非常推薦的一種代碼分割的方式，我們先來簡單修改一下我們的 index.js ，再來看一下使用后打包的效果：

// import { mul } from './test' 
import $ from 'jquery' 
 
import('./test').then(({ mul }) => { 
    console.log(mul(2,3)) 
}) 
 
console.log($) 
// console.log(mul(2, 3)) 

可以看到，通過 import() 語法導(dǎo)入的模塊在打包時(shí)會(huì)自動(dòng)單獨(dú)進(jìn)行打包

值得注意的是，這種語法還有一種很方便的“動(dòng)態(tài)引用”的方式，他可以加入一些適當(dāng)?shù)谋磉_(dá)式，舉個(gè)例子，假設(shè)我們需要加載適當(dāng)?shù)闹黝}：

const themeType = getUserTheme(); 
import(`./themes/${themeType}`).then((module) => { 
  // do sth aboout theme 
}); 

這樣我們就可以“動(dòng)態(tài)”加載我們需要的異步模塊，實(shí)現(xiàn)的原理主要在于兩點(diǎn)：

至少需要包含模塊相關(guān)的路徑信息，打包可以限定于一個(gè)特定的目錄或文件集。

根據(jù)路徑信息 webpack 在打包時(shí)會(huì)把 ./themes 中的所有文件打包進(jìn)新的 chunk 中，以便需要時(shí)使用到。

4. 魔術(shù)注釋

在上述的 import() 語法中，我們會(huì)發(fā)現(xiàn)打包自動(dòng)生成的文件名并不是我們想要的，我們?nèi)绾尾拍茏约嚎刂拼虬拿Q呢?這里就要引入我們的魔術(shù)注釋(Magic Comments)：

import(/* webpackChunkName: "my-chunk-name" */'./test') 

通過這樣打包出來的文件：

魔術(shù)注釋不僅僅可以幫我們修改 chunk 名這么簡單，他還可以實(shí)現(xiàn)譬如預(yù)加載等功能，這里舉個(gè)例子：

我們通過希望在點(diǎn)擊按鈕時(shí)才加載我們需要的模塊功能，代碼可以這樣：

// index.js 
document.querySelector('#btn').onclick = function () { 
  import('./test').then(({ mul }) => { 
    console.log(mul(2, 3)); 
  }); 
}; 
//test.js 
function mul(a, b) { 
  return a * b; 
} 
console.log('test 被加載了'); 
export { mul }; 

可以看到，在我們點(diǎn)擊按鈕的同時(shí)確實(shí)加載了 test.js 的文件資源。但是如果這個(gè)模塊是一個(gè)很大的模塊，在點(diǎn)擊時(shí)進(jìn)行加載可能會(huì)造成長時(shí)間 loading 等用戶體驗(yàn)不是很好的效果，這個(gè)時(shí)候我們可以使用我們的 /* webpackPrefetch: true */ 方式進(jìn)行預(yù)獲取，來看下效果：

// index,js 
 
document.querySelector('#btn').onclick = function () { 
  import(/* webpackPrefetch: true */'./test').then(({ mul }) => { 
    console.log(mul(2, 3)); 
  }); 
}; 

可以看到整個(gè)過程中，在畫面初始加載的時(shí)候，test.js 的資源就已經(jīng)被預(yù)先加載了，而在我們點(diǎn)擊按鈕時(shí)，會(huì)從 (prefetch cache) 中讀取內(nèi)容。這就是模塊預(yù)獲取的過程。另外我們還有 /* webpackPreload: true */ 的方式進(jìn)行預(yù)加載。

但是 prefetch 和 preload 聽起來感覺差不多，實(shí)際上他們的加載時(shí)機(jī)等是完全不同的：

• preload chunk 會(huì)在父 chunk 加載時(shí)，以并行方式開始加載。prefetch chunk 會(huì)在父 chunk 加載結(jié)束后開始加載。
• preload chunk 具有中等優(yōu)先級(jí)，并立即下載。prefetch chunk 在瀏覽器閑置時(shí)下載。
• preload chunk 會(huì)在父 chunk 中立即請(qǐng)求，用于當(dāng)下時(shí)刻。prefetch chunk 會(huì)用于未來的某個(gè)時(shí)刻。

三、結(jié)尾

在最初有工程化打包思想時(shí)，我們會(huì)考慮將多文件打包到一個(gè)文件內(nèi)減少多次的資源請(qǐng)求，隨著項(xiàng)目的越來越復(fù)雜，做項(xiàng)目優(yōu)化時(shí)，我們發(fā)現(xiàn)項(xiàng)目加載越久用戶體驗(yàn)就越不好，于是又可以通過代碼分割的方式去減少頁面初加載時(shí)的請(qǐng)求過大的資源體積。

本文中僅簡單介紹了常用的 webpack 代碼分割方式，但是在實(shí)際的項(xiàng)目中進(jìn)行性能優(yōu)化時(shí)，往往會(huì)有更加嚴(yán)苛的要求，希望可以通過本文的介紹讓大家快速了解上手代碼分割的技巧與優(yōu)勢。

參考

如何使用 splitChunks 精細(xì)控制代碼分割

Code Splitting - Webpack