[[425963]]

不知不覺，Webpack 原理系列已經(jīng)陸續(xù)出了十篇文章，以構(gòu)建主流程為綱逐步遞進(jìn)到插件、Loader、模塊、運(yùn)行時、Chunk、依賴對象、模塊依賴圖等關(guān)鍵概念的含義與運(yùn)行原理，再到 HMR、Tree-Shaking 等特性的功能介紹和原理解析，滿滿當(dāng)當(dāng)十篇文章，合計(jì)超過 5W 字，基本上已經(jīng)貫徹 Webpack 整個核心流程。

接下來我會繼續(xù)沿著 Webpack 這個少人問津的方向，推出兩個實(shí)用性更強(qiáng)的系列：基礎(chǔ)應(yīng)用、性能優(yōu)化。性能優(yōu)化系列主要介紹在 Webpack 場景下如何通過配置、插件等手段，優(yōu)化構(gòu)建與運(yùn)行性能，以及這些性能優(yōu)化背后的核心原理，例如本文即將介紹的 Webpack5 全新的 cache 功能。

使用持久化緩存

經(jīng)過這么多年發(fā)展，Webpack 生態(tài)在前端工程化能力方面已經(jīng)發(fā)展的非常全面且強(qiáng)大，但大而全的背后其運(yùn)行性能卻逐漸為行業(yè)詬病，后進(jìn)如 Vite、SnowPack 等以性能著稱的同類框架更是在業(yè)內(nèi)掀起不小波瀾。為此，Webpack 終于在第 5 個大版本引入持久化緩存，提升運(yùn)行性能。

持久化緩存算得上是 Webpack 5 最令人振奮的特性之一，它能夠?qū)⑹状螛?gòu)建結(jié)果持久化到本地文件系統(tǒng)，在下次執(zhí)行構(gòu)建時跳過一系列解析、鏈接、編譯等非常消耗性能的操作，直接復(fù)用 module、chunk 的構(gòu)建結(jié)果。

使用持久化緩存后，構(gòu)建性能有巨大提升!以 Three.js 為例，該項(xiàng)目包含 362 份 JS 文件，合計(jì)約 3w 行代碼，算得上中大型項(xiàng)目：

配置 babel-loader、eslint-loader 后，在我機(jī)器上測試，未使用 cache 特性時構(gòu)建耗時大約在 11000ms 到 18000ms 之間;啟動 cache 功能后第二次構(gòu)建耗時降低到 500ms 到 800ms 之間，兩者相差接近 「50」 倍!

而這接近 50 倍的性能提升，僅僅需要在 Webpack5 場景下設(shè)置 cache.type = 'filesystem' 即可開啟：

module.exports = { 
    //... 
    cache: { 
        type: 'filesystem' 
    }, 
    //... 
}; 

原理

那么，為什么開啟持久化緩存之后構(gòu)建性能會有如此巨大的提升呢?一言蔽之，Webpack5 會將首次構(gòu)建出的 Module、Chunk、ModuleGraph 等對象序列化后保存到硬盤中，后面再運(yùn)行的時候就可以跳過一些耗時的編譯動作，直接復(fù)用緩存信息。

構(gòu)建流程

在《Webpack 原理系列》中，我們已經(jīng)深入聊了很多關(guān)于 Webpack 構(gòu)建功能的運(yùn)行流程與實(shí)現(xiàn)細(xì)節(jié)的內(nèi)容，為了加深對緩存的理解，這里有必要從構(gòu)建性能角度簡單回顧一下。

Webpack 的構(gòu)建過程大致上可劃分為三個階段：

初始化，主要是根據(jù)配置信息設(shè)置內(nèi)置的各類插件

Make - 構(gòu)建階段，從 entry 模塊開始，執(zhí)行：

• 讀入文件內(nèi)容
• 調(diào)用 Loader 轉(zhuǎn)譯文件內(nèi)容
• 調(diào)用 acorn 生成 AST 結(jié)構(gòu)
• 分析 AST，確定模塊依賴列表
• 遍歷模塊依賴列表，對每一個依賴模塊重新執(zhí)行上述流程，直到生成完整的模塊依賴圖 —— ModuleGraph 對象

Seal - 生成階段，過程：

• 代碼轉(zhuǎn)譯，如 import 轉(zhuǎn)換為 require 調(diào)用
• 分析運(yùn)行時依賴
• 遍歷模塊依賴圖，對每一個模塊執(zhí)行：
• 合并模塊代碼與運(yùn)行時代碼，生成 chunk
• 執(zhí)行產(chǎn)物優(yōu)化操作，如 Tree-shaking
• 將最終結(jié)果寫出到產(chǎn)物文件

過程中存在許多 CPU 密集型操作，例如調(diào)用 Loader 鏈加載文件時，遇到 babel-loader、eslint-loader、ts-loader 等工具時可能需要重復(fù)生成 AST;分析模塊依賴信息時則需要遍歷 AST，執(zhí)行大量運(yùn)算;Seal 階段也同樣存在大量 AST 遍歷，以及代碼轉(zhuǎn)換、優(yōu)化操作，等等。

實(shí)現(xiàn)緩存

在引入持久化緩存之前，Webpack 在每次運(yùn)行時都需要對所有模塊完整執(zhí)行上述構(gòu)建流程，假設(shè)業(yè)務(wù)項(xiàng)目中有 1000 個文件，則每次執(zhí)行 npx webpack 命令時都需要從 0 開始執(zhí)行 1000 次構(gòu)建、生成邏輯。

而 Webpack5 的持久化緩存功能則嘗試將構(gòu)建結(jié)果保存到文件系統(tǒng)中，在下次編譯時對比每一個文件的內(nèi)容哈希或時間戳，未發(fā)生變化的文件跳過編譯操作，直接使用緩存副本，減少重復(fù)計(jì)算;發(fā)生變更的模塊則重新執(zhí)行編譯流程。緩存執(zhí)行時機(jī)如下圖：

如圖，Webpack 在首次構(gòu)建完畢后將 Module、Chunk、ModuleGraph 三類對象的狀態(tài)序列化并記錄到緩存文件中;在下次構(gòu)建開始時，嘗試讀入并恢復(fù)這些對象的狀態(tài)，從而跳過執(zhí)行 Loader 鏈、解析 AST、解析依賴等耗時操作，提升編譯性能。

用法詳解

理解緩存的核心原理后，我們再回過頭來看看 cache 提供的配置項(xiàng)列表，下面摘錄幾個比較常用的配置項(xiàng)：

官方文檔：https://webpack.js.org/configuration/cache

• cache.type：緩存類型，支持 'memory' | 'filesystem'，需要設(shè)置 filesystem 才能開啟持久緩存
• cache.cacheDirectory：緩存文件存放的路徑，默認(rèn)為 node_modules/.cache/webpack
• cache.buildDependencies：額外的依賴文件，當(dāng)這些文件內(nèi)容發(fā)生變化時，緩存會完全失效而執(zhí)行完整的編譯構(gòu)建，通?？稍O(shè)置為項(xiàng)目配置文件，如：

module.exports = { 
  cache: { 
    buildDependencies: { 
      config: [path.join(__dirname, 'webpack.dll_config.js')], 
    }, 
  }, 
}; 

• cache.managedPaths：受控目錄，Webpack 構(gòu)建時會跳過新舊代碼哈希值與時間戳的對比，直接使用緩存副本，默認(rèn)值為 ['./node_modules']
• cache.profile：是否輸出緩存處理過程的詳細(xì)日志，默認(rèn)為 false
• cache.maxAge：緩存失效時間，默認(rèn)值為 5184000000

使用時通常關(guān)注上述配置項(xiàng)即可，其它如 idleTimeout、idleTimeoutAfterLargeChanges 等項(xiàng)均與 Webpack 內(nèi)部實(shí)現(xiàn)算法有關(guān)，與緩存效果關(guān)系不大，無需關(guān)注。

Webpack 4 中的緩存

實(shí)際上，Webpack 4 已經(jīng)內(nèi)置使用內(nèi)存實(shí)現(xiàn)的臨時緩存功能，但必須在 watch 模式下使用，進(jìn)程退出后立即失效，實(shí)用性不高。不過，在 Webpack 4 及之前版本中可以使用一些 loader 自帶的緩存功能提升構(gòu)建性能，例如 babel-loader、eslint-loader、cache-loader 。

開啟babel-loader緩存

只需設(shè)置 cacheDirectory = true 即可開啟 babel-loader 持久化緩存功能，例如：

module.exports = { 
    // ... 
    module: { 
        rules: [{ 
            test: /\.m?js$/, 
            loader: 'babel-loader', 
            options: { 
                cacheDirectory: true, 
            }, 
        }] 
    }, 
    // ... 
}; 

配置項(xiàng)說明：https://github.com/babel/babel-loader#options

以 Three.js 為例，開啟緩存后生產(chǎn)環(huán)境構(gòu)建耗時從 3500ms 降低到 1600ms;開發(fā)環(huán)境構(gòu)建從 6400ms 降低到 4500ms，性能提升約 30% ~ 50% 。

默認(rèn)情況下，babel-loader 會將緩存內(nèi)容保存到 node_modules/.cache/babel-loader 目錄，用戶也可以通過 cacheDirectory = 'dir' 方式設(shè)置緩存路徑。

開啟eslint-loader緩存

eslint-loader 同樣支持緩存功能，只需設(shè)置 cache = true 即可開啟，如：

module.exports = { 
    // ... 
    module: { 
        rules: [{ 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: 'eslint-loader', 
            options: { 
                cache: true, 
            }, 
        }, ] 
    }, 
    // ... 
}; 

配置項(xiàng)說明：https://github.com/webpack-contrib/eslint-loader#cache

依然以 Three.js 為例，開啟緩存后生產(chǎn)環(huán)境構(gòu)建耗時從 6400ms 降低到 1400ms;開發(fā)環(huán)境構(gòu)建從 7000ms 降低到 2100ms，性能提升達(dá)到 70% ~ 80%。

默認(rèn)情況下，babel-loader 會將緩存內(nèi)容保存到 ./node_modules/.cache/eslint-loader 目錄，用戶也可以通過 cache = 'dir' 方式設(shè)置緩存路徑。

使用cache-loader

除 babel-loader、eslint-loader 這類特化 loader 自身攜帶的緩存功能外，Webpack 4 中還可以使用 cache-loader 實(shí)現(xiàn)與 Webpack 5 相似的通用持久化緩存功能，使用上只需將 cache-loader 配置在 loader 數(shù)組首位，例如：

const path = require("path"); 
const webpack = require("webpack"); 
 
module.exports = { 
    // ... 
    module: { 
        rules: [{ 
            test: /\.js$/, 
            use: ['cache-loader', 'babel-loader', 'eslint-loader'] 
        }] 
    }, 
    // ... 
}; 

cache-loader 文檔：https://www.npmjs.com/package/cache-loader

使用 cache-loader 后，生產(chǎn)環(huán)境構(gòu)建耗時從 10602ms 降低到 1540ms;開發(fā)環(huán)境構(gòu)建從 11130ms 降低到 4247ms，性能提升約 「60% ~ 80%」。

與 Webpack 5 自帶的持久化緩存不同，cache-loader 僅 Loader 執(zhí)行結(jié)果有效，緩存范圍與深度不如內(nèi)置的緩存功能，所以性能收益相對較低，但在 Webpack 4 版本下已經(jīng)不失為一種簡單而有效的性能優(yōu)化手段。

總結(jié)

網(wǎng)絡(luò)上關(guān)于 Webpack 持久化緩存的討論特別少，但這確實(shí)是 Webpack 5 引入的一個特別讓人振奮的功能，甚至在某些情況下能夠讓構(gòu)建性能達(dá)到 Unbundle 方案的量級，相信隨著 Webpack 5 的推廣覆蓋，持久化緩存會成為 Webpack 性能優(yōu)化的一大利器。

本文轉(zhuǎn)載自微信公眾號「Tecvan」