一、測量構(gòu)建時間
優(yōu)化 webpack 構(gòu)建速度的第一步是知道將精力集中在哪里。我們可以通過 speed-measure-webpack-plugin 測量你的 webpack 構(gòu)建期間各個階段花費的時間：
步驟一：安裝 speed-measure-webpack-plugin
npm install speed-measure-webpack-plugin --save-dev
復(fù)制代碼
步驟二：配置
// 分析打包時間
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// ...
module.exports = smp.wrap(prodWebpackConfig)
復(fù)制代碼
它能夠：
- 分析整個打包總耗時；
- 每個插件和 loader 的耗時情況；
方便開發(fā)人員定位打包耗時瓶頸。
二、分析包內(nèi)容
webpack-bundle-analyzer 掃描 bundle 并構(gòu)建其內(nèi)部內(nèi)容的可視化。使用此可視化來查找大的或不必要的依賴項。
步驟一：安裝 webpack-bundle-analyzer
npm install webpack-bundle-analyzer --save-dev
復(fù)制代碼
步驟二：配置
// 分析包內(nèi)容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
// 開啟 BundleAnalyzerPlugin
new BundleAnalyzerPlugin(),
],
};
復(fù)制代碼
一般運行在生產(chǎn)版本中，該插件將在瀏覽器中打開統(tǒng)計信息結(jié)果頁面。
注意：webpack4 在 production 環(huán)境下默認啟動了 ModuleConcatenationPlugin （預(yù)編譯所有模塊到一個閉包中，提升代碼在瀏覽器中的執(zhí)行速度），它可能會合并webpack-bundle-analyzer 輸出中的模塊的一部分，從而使報告不太詳細。 如果你使用此插件，請在分析過程中將其禁用。設(shè)置如下：
module.exports = {
// ...
optimization: {
//
concatenateModules: false,
}
};
復(fù)制代碼
具體來說，使用 webpack-bundle-analyzer 能可視化的反映：
- 打包出的文件中都包含了什么；
- 每個文件的尺寸在總體中的占比，哪些文件尺寸大，思考一下，為什么那么大，是否有替換方案，是否使用了它包含的所有代碼；
- 模塊之間的包含關(guān)系；
- 是否有重復(fù)的依賴項，是否存在一個庫在多個文件中重復(fù)？ 或者捆綁包中是否具有同一庫的多個版本？
- 是否有相似的依賴庫， 嘗試使用一種依賴庫實現(xiàn)相似的功能。
- 每個文件的壓縮后的大小。
三、在線分析工具
如果你對在本地安裝插件進行測量分析包方式感覺不爽的話，這里將會推薦幾款在線測量工具，但都需要 webpack 統(tǒng)計文件。
1. 生成統(tǒng)計文件 stats.json
使用 webpack 編譯源代碼時，用戶可以生成一個包含有關(guān)模塊統(tǒng)計信息的 JSON 文件。 這些統(tǒng)計信息可用于分析應(yīng)用程序的依賴關(guān)系圖以及優(yōu)化編譯速度。 該文件通常是按以下方式生成的：
在 webpack 啟動時帶入?yún)?shù)：--profile --json > stats.json ，例如：
webpack --config webpack.config.prod.js --profile --json > stats.json
復(fù)制代碼
-
--profile：記錄下構(gòu)建過程中的耗時信息 -
--json：以 JSON 的格式輸出構(gòu)建結(jié)果，最后只輸出一個.json文件，這個文件（stats.json）中包括所有構(gòu)建相關(guān)的信息 -
> stats.json：是 UNIX/Linux 系統(tǒng)中的管道命令、含義是把webpack --profile --json輸出的內(nèi)容通過管道輸出到stats.json文件中
執(zhí)行命令后，會在項目中多出一個 stats.json 文件，接下來將 stats.json 文件上傳到以下在線工具上，以可視化分析包的組成。
常用的在線工具有：
- 官方可視化分析工具 Webapck Analyse：生成一個圖表，讓你可視化了解項目的依賴關(guān)系、模塊大小及耗時等；
- Webpack Visualizer：生成一個餅狀圖，可視化 bundle 內(nèi)容；
- webpack bundle optimize helper：此工具會分析你的 bundle，并為你提供可操作的改進措施建議，以減少 bundle 體積大小。
2. 官方可視化分析工具 Webapck Analyse
Webapck Analyse 是一個在線 Web 應(yīng)用，它為你提供了對包的更全面的分析，并且它繪制了項目中所有依賴模塊的圖形，這對于依賴關(guān)系較少的項目非常有用。
打開 Webapck Analyse ，上傳 stats.json：
Webpack Analyse 不會把你選擇的 stats.json 文件發(fā)達到服務(wù)器，而是在瀏覽器本地解析，你不用擔(dān)心自己的代碼為此而泄露。 選擇文件后，你馬上就能如下的效果圖：
Modules ：展示所有的模塊，每個模塊對應(yīng)一個文件。并且還包含所有模塊之間的依賴關(guān)系圖、模塊路徑、模塊ID、模塊所屬 Chunk、模塊大小；
Chunks ：展示所有的代碼塊，一個代碼塊中包含多個模塊。并且還包含代碼塊的ID、名稱、大小、每個代碼塊包含的模塊數(shù)量，以及代碼塊之間的依賴關(guān)系圖；
Assets ：展示所有輸出的文件資源，包括 .js、.css、圖片等。并且還包括文件名稱、大小、該文件來自哪個代碼塊；
Warnings ：展示構(gòu)建過程中出現(xiàn)的所有警告信息；
Errors ：展示構(gòu)建過程中出現(xiàn)的所有錯誤信息；
Hints ：展示處理每個模塊的過程中的耗時。
3. Webpack Visualizer 分析工具
可視化并分析您的Webpack捆綁包，以查看哪些模塊正在占用空間，哪些可能是重復(fù)的。
它既可作為插件使用，也可以在線使用，是一種較新的工具。
方式一：作為插件使用
npm install webpack-visualizer-plugin --dev-save
復(fù)制代碼
配置：
// 分析包內(nèi)容
const Visualizer = require('webpack-visualizer-plugin');
module.exports = {
plugins: [
// 開啟 Visualizer
// 默認輸出為 stats.html，這里為 statistics.html
new Visualizer({
filename: './statistics.html'
})
],
};
復(fù)制代碼
然后在瀏覽器中直接打開 statistics.html 就可以看到分析結(jié)果了：
方式二：在線使用
打開 chrisbateman.github.io/webpack-vis… ，上傳 stats.json 既可看到分析結(jié)果。
4. webpack bundle optimize helper 分析工具
打開 webpack.jakoblind.no/optimize/ ，上傳 stats.json 既可看到分析結(jié)果及優(yōu)化建議：
四、總結(jié)
我們總共介紹了以下 5 種測量工具，每種工具都提供了對包分析的不同視角，例如：
- 在開發(fā)過程中，當(dāng)向項目引入新包時，我個人經(jīng)常使用 Webpack Visualizer ，餅狀圖給出了關(guān)于大小的比例的即時反饋；
- 在分析每次構(gòu)建版本的耗時情況時，相對于其它
4中，speed-measure-webpack-plugin能夠獲取每個插件和 loader 的耗時情況，幫助你將注意力集中在需要優(yōu)化的插件上； -
webpack-bundle-analyzer能夠?qū)?bundle 內(nèi)容展示為便捷的、交互式、可縮放的樹狀圖形式； - Webapck Analyse 相對于其它
4種，能夠?qū)ΠM行全方位的分析； - 相對于其它
4種，webpack bundle optimize helper 能提供可操作的改進措施建議；
作者：前端瓶子君
鏈接：https://juejin.cn/post/6844904056985485320
