webpack-bundle-analyzer外掛快速入門

linif002發表於2019-04-17
Web

前言

首先，這是一個webpack的外掛，需要配合webpack和webpack-cli一起使用。這個外掛的功能是生成程式碼分析報告，幫助提升程式碼質量和網站效能。

安裝

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer
複製程式碼

使用方法一

1、配置webpack.config.js檔案：

// webpack.config.js 檔案

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()  // 使用預設配置
    // 預設配置的具體配置項
    // 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，按回車。

此時會開啟瀏覽器，你將看到專案的分析圖，大概長這樣。

image.png

優點： 簡單!
缺點： 每次執行打包命令時，都在本地起一個埠號為8888的本地伺服器，並自動在瀏覽器中展示專案的分析結果。不夠靈活，並不是每次構建都想看程式碼分析！

使用方法二

1、配置webpack.config.js檔案：

// webpack.config.js 檔案

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled', // 不啟動展示打包報告的http伺服器
      generateStatsFile: true, // 是否生成stats.json檔案
    }),
  ]
}
複製程式碼

2、配置package.json 檔案

{
 "scripts": {
    "generateAnalyzFile": "webpack --profile --json > stats.json", // 生成分析檔案
    "analyz": "webpack-bundle-analyzer --port 8888 ./dist/stats.json" // 啟動展示打包報告的http伺服器
  }
}
複製程式碼

3、在命令列工具中，執行先npm run generateAnalyzFile命令，然後執行npm run analyz命令。 此時就可以看到分析結果了。

優點： 稍微複雜，但是靈活啊!
缺點： 每次執行命令時，都會在dist目錄下生成一個stats.json檔案。這個問題，可以將generateStatsFile屬性設定為false，但是這樣就無法生成stats.json檔案了。解決辦法：需要檢視分析報告的時候設定為true，其餘時候設定為false。

總結

本文僅僅做個最簡單的演示，方便小白快速入門。關於這個外掛的更多配置，請檢視官方的文件。如有紕漏或疑問，歡迎在評論區或者私信我，我看到就會回覆的。

官方文件連結：www.npmjs.com/package/web…

相關文章