全文 1500 字，閱讀時(shí)長(zhǎng)約 15 分鐘。如果覺(jué)得文章有用，歡迎點(diǎn)贊關(guān)注，但寫(xiě)作實(shí)屬不易，未經(jīng)作者同意，禁止任何形式轉(zhuǎn)載！！！?

設(shè)想一個(gè)場(chǎng)景，假如需要提升 webpack 編譯速度，或者優(yōu)化編譯產(chǎn)物大小，應(yīng)該從何下手？別急，在采用具體手段前，可以先花點(diǎn)時(shí)間了解當(dāng)前的編譯執(zhí)行情況，確定性能瓶頸，有的放矢！今天就給大家分享一些 webpack 構(gòu)建過(guò)程的分析診斷方法和工具，基于這些工具，你可以：

了解編譯產(chǎn)物由那些模塊資源組成
了解模塊之間的依賴(lài)關(guān)系
了解不同模塊的編譯構(gòu)建速度
了解模塊在最終產(chǎn)物的資源占比
等等

收集統(tǒng)計(jì)信息

Webpack 運(yùn)行過(guò)程會(huì)收集各種統(tǒng)計(jì)信息，只需要在啟動(dòng)時(shí)附加 --json 參數(shù)即可獲得：

npx?webpack?--json?>?stats.json

上述命令運(yùn)行后，會(huì)在文件夾下輸出 stats.json 文件，文件內(nèi)容主要包含：

{
??"hash":?"2c0b66247db00e494ab8",
??"version":?"5.36.1",
??"time":?81,
??"builtAt":?1620401092814,
??"publicPath":?"",
??"outputPath":?"/Users/tecvan/learn-webpack/hello-world/dist",
??"assetsByChunkName":?{?"main":?["index.js"]?},
??"assets":?[
????//?...
??],
??"chunks":?[
????//?...
??],
??"modules":?[
????//?...
??],
??"entrypoints":?{
????//?...
??},
??"namedChunkGroups":?{
????//?...
??},
??"errors":?[
????//?...
??],
??"errorsCount":?0,
??"warnings":?[
????//?...
??],
??"warningsCount":?0,
??"children":?[
????//?...
??]
}

通常，分析構(gòu)建性能時(shí)主要關(guān)注如下屬性：

「assets」 ：編譯最終輸出的產(chǎn)物列表
「chunks」 ：構(gòu)建過(guò)程生成的 chunks 列表，數(shù)組內(nèi)容包含 chunk 名稱(chēng)、大小、依賴(lài)關(guān)系圖
「modules」 ：本次運(yùn)行觸達(dá)的所有模塊，數(shù)組內(nèi)容包含模塊的大小、所屬chunk、分析耗時(shí)、構(gòu)建原因等
「entrypoints」 ：entry 列表，包括動(dòng)態(tài)引入所生產(chǎn)的 entry 項(xiàng)也會(huì)包含在這里面
「namedChunkGroups」 ：chunks 的命名版本，內(nèi)容相比于 chunks 會(huì)更精簡(jiǎn)
「errors」 ：構(gòu)建過(guò)程發(fā)生的所有錯(cuò)誤信息
「warnings」 ：構(gòu)建過(guò)程發(fā)生的所有警告信息

基于這些屬性，我們可以分析出模塊的依賴(lài)關(guān)系、模塊占比、編譯耗時(shí)等信息，不過(guò)這里大致了解原理就行了，社區(qū)已經(jīng)為我們提供了非常多事半功倍的分析工具。

可視化分析工具

Webpack Analysis

Webpack Analysis 是 webpack 官方提供的可視化分析工具，相比于其它工具，它提供的視圖更全，功能更強(qiáng)大，使用上只需要將上一節(jié) webpack --json > stats.json 命令生成的 stats.json 文件拖入頁(yè)面，就可以獲得一系列分析視圖：

點(diǎn)擊 「modules/chunks/assets」 按鈕，頁(yè)面會(huì)渲染出對(duì)應(yīng)依賴(lài)關(guān)系圖，例如點(diǎn)擊 「modules」：

除 「modules/chunks/assets」 外，右上方菜單欄 「Hints」 還可以查看構(gòu)建過(guò)程各階段、各模塊的處理耗時(shí)，可以用于分析構(gòu)建的性能瓶頸：

?
不過(guò)，實(shí)測(cè)發(fā)現(xiàn) 「Hints」 還不支持 webpack 5 版本的產(chǎn)出，等待官方更新吧。
?

Webpack Analysis 提供了非常齊全的分析視角，信息幾乎不失真，但這也意味著上手難度更高，信息噪音也更多，所以社區(qū)還提供了一個(gè)簡(jiǎn)化版 webpack-deps-tree，用法相似但用法更簡(jiǎn)單、信息更清晰，讀者可以根據(jù)實(shí)際場(chǎng)景對(duì)比交叉使用。

Webpack Visualizer

Webpack Visualizer 是一個(gè)在線分析工具，同樣只需要將 stats.json 文件拖入頁(yè)面，就可以從文件夾到模塊逐層看到 bundle 的組成：

?
除了在線版本外，Webpack Visualizer 還提供了插件版本的 webpack-visualizer-plugin 工具，但是這個(gè)插件年久失修，只兼容 webpack 1.x ，所以現(xiàn)在幾乎沒(méi)有使用價(jià)值了。
?

此外，在線工具 Webpack Chart 也提供了類(lèi)似的功能，功能重合度很高，這里就不展開(kāi)講了。

Webpack Bundle Analyzer

webpack-bundle-analyzer 是一個(gè) webpack 插件，只需要簡(jiǎn)單的配置就可以在 webpack 運(yùn)行結(jié)束后獲得 treemap 形態(tài)的模塊分布統(tǒng)計(jì)圖，用戶(hù)可以仔細(xì)對(duì)比 treemap 內(nèi)容推斷是否包含重復(fù)模塊、不必要的模塊等場(chǎng)景，例如：

const?BundleAnalyzerPlugin?=?require("webpack-bundle-analyzer")
??.BundleAnalyzerPlugin;

module.exports?=?{
??...
??plugins:?[new?BundleAnalyzerPlugin()],
};

編譯結(jié)束后，默認(rèn)自動(dòng)打開(kāi)本地視圖頁(yè)面：

此外，webpack-bundle-size-analyzer 也提供了類(lèi)似，但是基于命令行視圖的分析功能，可以基于 webpack-bundle-size-analyzer 做一些自動(dòng)分析、自動(dòng)預(yù)警功能。

Webpack Dashboard

webpack-dashboard 是一個(gè)命令行可視化工具，能夠在編譯過(guò)程中實(shí)時(shí)展示編譯進(jìn)度、模塊分布、產(chǎn)物信息等，與 webpack-bundle-size-analyzer 類(lèi)似，它也只需要一些簡(jiǎn)單的改造就能運(yùn)行，首先需要注冊(cè)插件：

const?DashboardPlugin?=?require("webpack-dashboard/plugin");

module.exports?=?{
??//?...
??plugins:?[new?DashboardPlugin()],
};

其次，修改 webpack 的啟動(dòng)方式，例如原來(lái)的啟動(dòng)命令可能是：

"scripts":?{
????"dev":?"node?index.js",?#?OR
????"dev":?"webpack-dev-server",?#?OR
????"dev":?"webpack",
}

需要修改為：

"scripts":?{
????"dev":?"webpack-dashboard?--?node?index.js",?#?OR
????"dev":?"webpack-dashboard?--?webpack-dev-server",?#?OR
????"dev":?"webpack-dashboard?--?webpack",
}

之后，就可以在命令行看到一個(gè)漂亮的可視化界面：

UnusedWebpackPlugin

最后分享 UnusedWebpackPlugin 插件，它能夠根據(jù) webpack 統(tǒng)計(jì)信息，反向查找出工程項(xiàng)目里那些文件沒(méi)有被用到，我日常在各種項(xiàng)目重構(gòu)工作中都會(huì)用到，非常實(shí)用。用法也比較簡(jiǎn)單：

const?UnusedWebpackPlugin?=?require("unused-webpack-plugin");

module.exports?=?{
??//?...
??plugins:?[
????new?UnusedWebpackPlugin({
??????directories:?[path.join(__dirname,?"src")],
??????root:?path.join(__dirname,?"../"),
????}),
??],
};