一、webpack-bundle-analyzer 是什么？

webpack-bundle-analyzer 是 webpack 的插件，需要配合 webpack 和 webpack-cli 一起使用。這個(gè)插件可以讀取輸出文件夾（通常是 dist）中的 stats.json 文件，把該文件可視化展現(xiàn)，生成代碼分析報(bào)告，可以直觀地分析打包出的文件有哪些，及它們的大小、占比情況、各文件 Gzipped 后的大小、模塊包含關(guān)系、依賴項(xiàng)等，對(duì)應(yīng)做出優(yōu)化，從而幫助提升代碼質(zhì)量和網(wǎng)站性能。

二、安裝

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer

三、使用方法

1. 作為插件使用

1. 配置 webpack.config.js 文件：

// webpack.config.js 文件
 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()  // 使用默認(rèn)配置
    // 默認(rèn)配置的具體配置項(xiàng)
    // new BundleAnalyzerPlugin({
    //   analyzerMode: 'server',
    //   analyzerHost: '127.0.0.1',
    //   analyzerPort: '8888',
    //   reportFilename: 'report.html',
    //   defaultSizes: 'parsed',
    //   openAnalyzer: true,
    //   generateStatsFile: false,
    //   statsFilename: 'stats.json',
    //   statsOptions: null,
    //   excludeAssets: null,
    //   logLevel: info
    // })
  ]
}

2. 配置 package.json 文件

{
 "scripts": {
    "dev": "webpack --config webpack.dev.js --progress"
  }
}

3. 在命令行工具中輸入

npm run dev

按回車。此時(shí)會(huì)打開瀏覽器，你將看到項(xiàng)目資源包的交互式可視化樹形分析圖。

圖中占面積越大的文件，其文件的大小越大，部署到服務(wù)器之后，在瀏覽器中加載的時(shí)間越長，點(diǎn)擊左上角的像箭頭一樣的符號(hào)可以直接查看各個(gè)文件的大小。

該分析圖可以幫助我們：

• 了解 bundle 包中的真正內(nèi)容
• 找出哪些模塊尺寸最大
• 查找誤引入的模塊
• 優(yōu)化項(xiàng)目

最棒的是它支持縮小的 bundle 文件，它解析它們以獲得 bundle 文件模塊的實(shí)際大小，還顯示了它們的壓縮大小。

得到可視化的分析結(jié)果之后，接下來就對(duì)占比比較大或者依賴程度比較高的文件進(jìn)行優(yōu)化了。

4. 參數(shù)配置

new BundleAnalyzerPlugin(options?: object)

優(yōu)點(diǎn)：簡單
缺點(diǎn)：每次運(yùn)行打包命令時(shí)，都在本地起一個(gè)端口號(hào)為8888的本地服務(wù)器，并自動(dòng)在瀏覽器中展示項(xiàng)目的分析結(jié)果。不夠靈活，并不是每次構(gòu)建都想看代碼分析！

2. 作為CLI的一個(gè)工具

如果你有一個(gè) webpack stats JSON 文件，你可以分析一個(gè)現(xiàn)有的包。

1、配置 webpack.config.js 文件：

可以使用 BundleAnalyzerPlugin 將 generateStatsFile 選項(xiàng)設(shè)置為 true

// webpack.config.js 文件
 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled', // 不啟動(dòng)展示打包報(bào)告的http服務(wù)器
      generateStatsFile: true, // 是否生成stats.json文件
    }),
  ]
}

2、配置 package.json 文件

{
 "scripts": {
    "generateAnalyzFile": "webpack --profile --json > stats.json", // 生成分析文件
    "analyz": "webpack-bundle-analyzer --port 8888 ./dist/stats.json" // 啟動(dòng)展示打包報(bào)告的http服務(wù)器
  }
}

 3、在命令行工具中，先運(yùn)行 npm run generateAnalyzFile 命令，然后運(yùn)行 npm run analyz 命令。此時(shí)就可以看到分析結(jié)果了。

優(yōu)點(diǎn)：稍微復(fù)雜，但是靈活
缺點(diǎn)：每次運(yùn)行命令時(shí)，都會(huì)在 dist 目錄下生成一個(gè) stats.json 文件。這個(gè)問題，可以將 generateStatsFile 屬性設(shè)置為 false，但是這樣就無法生成 stats.json 文件了。解決辦法：需要查看分析報(bào)告的時(shí)候設(shè)置為 true，其余時(shí)候設(shè)置為 false。

參考文章：

webpack-bundle-analyzer - npm (npmjs.com)

webpack-bundle-analyzer插件快速入門 - 簡書 (jianshu.com)

到此這篇關(guān)于webpack-bundle-analyzer 插件配置的文章就介紹到這了,更多相關(guān)webpack-bundle-analyzer 插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論