webpack 性能優化分析篇

webpack 性能優化分析篇

分析工具

webpack 提供了 stats.json 文件幫助分析打包結果， 使用下面的命令生成 stats.json 文件夾

# 配合 npx 使用
webpack --profile --json > stats.json
複製代碼

上面的命令首先使用 webpack 對文件進行打包， 而後將打包後的文件模塊進分析，並將分析後的結果以 json 的形式輸出到 stats.json 文件。

生成的文件在經過官網的 說明 能夠對打包結果的性能進行分析， 除此外 webpack 官網提供了在線分析的 分析工具, 經過上傳生成的 stats.json 文件，能夠更直觀的分析打包模塊.

webpack-bundle-analyzer

除了上述的方式外，使用第三方工具 webpack-bundle-analyzer 能夠更方便的查看模塊打包的狀況.

使用方法

1. 安裝

yarn add webpack-bundle-analyzer -D
複製代碼

2. 使用 狀況一： 分析已經存在的 stats.json 文件。

webpack-bundle-analyzer stats.json
複製代碼

狀況二： 打包後進行分析。這種狀況須要在 webpack 的配置文件中添加配置。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 module.exports = { plugins: [ new BundleAnalyzerPlugin({/** 配置 **/}) ] } 複製代碼

這樣的話當每次打包文件後都會自動打開一個基於打包模塊分析的交互式的頁面。

3. 配置選項。 默認狀況下， webpack-bundle-analyzer 會自動打開一個端口爲 8888 的本地網頁。 當使用 webpack-dev-server 進行開發時，咱們每每但願運行 webpack-dev-server 打開的是項目網站而不是分析頁面，這就須要對 webpack-bundle-analyzer 添加更多的配置。

屬性	類型	描述
analyzerMode	{String} server, static, json, disabled 中的一個	server: 以 http 服務的形式展現打包分析報告(默認); static: 將打包分析以 html 輸出爲靜態文件; json: 將分析結構以 json 形式輸出; disabled: 不作任何動做行爲
analyzerHost	{String}	當 analyzerMode 爲 server 時, 打開的服務路徑， 默認 127.0.0.1
analyzerPort	{Number} 或者 auto	當 analyzerMode 爲 server 時打開的服務端口, 默認爲 8888
reportFilename	{String}	當 analyzerMode 爲 static/json 時輸出的文件路路徑, 能夠是一個絕對路徑或者相對路徑, 當爲相對路徑時以打包輸出路徑爲七起點路徑， 默認 report.html
defaultSizes	{String} stats、 parsed、 gzip	定義在報告中的模塊大小是什麼意思， 默認爲 parsed 的大小
openAnalyzer	{Boolean}	analyzerMode 爲 server 時是否自動打開瀏覽器。默認爲 true。 開發階段，建議設置爲 false
generateStatsFile	{Boolean}	若是爲 true 將會在打包輸入目錄生成 webpack 打包的 stats.json 文件。默認爲 false
statsFilename	{String}	當 generateStatsFile 爲 true 時， 設置 stats.json 的路徑， 能夠是絕對路徑或相對路徑， 爲相對路徑時以輸出目錄爲起點路徑。 默認爲 stats.json
statsOptions	null 或者 {Object}	配置更多的 stats options。 默認 null
excludeAssets	null、pattern、 pattern數組, pattern能夠是字符串、RegExp、函數	設置不包含在分析報告中的資源， 默認爲 null
logLevel	{String} info, warn, error, silent中的一個	設置報告中展現的細節等級, 默認爲 info

speed-measure-webpack-plugin 分析打包速度

除了能夠對打包後的模塊大小進行分析， 還能夠在打包過程當中對使用的 loader 和 plugin 進行打包速度分析。

使用方法

1. 安裝

yarn add speed-measure-webpack-plugin -D
複製代碼

2. 配置 speed-measure-webpack-plugin 插件同其餘的 webpack 插件使用方式不一樣， 它須要生成一個插件實例，並經過實例的 wrap 方法包裹 webpack 的配置。

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp =new SpeedMeasurePlugin({/**options**/})
 module.exports = smp.wrap({ module: { // ... }, plugins: [ // ... ] }) 複製代碼

執行打包命令後，輸出結果中添加了對 loader 和 plugin 打包速度的分析。