webpack-bundle-analyzer插件快速入門

前言

首先，這是一個webpack的插件，須要配合webpack和webpack-cli一塊兒使用。這個插件的功能是生成代碼分析報告，幫助提高代碼質量和網站性能。

安裝

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

使用方法一

一、配置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
    // })
  ]
}
複製代碼

二、配置package.json 文件

{
 "scripts": {
    "dev": "webpack --config webpack.dev.js --progress"
  }
}
複製代碼

三、在命令行工具中輸入npm run dev，按回車。

此時會打開瀏覽器，你將看到項目的分析圖，大概長這樣。

優勢： 簡單!
缺點： 每次運行打包命令時，都在本地起一個端口號爲8888的本地服務器，並自動在瀏覽器中展現項目的分析結果。不夠靈活，並非每次構建都想看代碼分析！

使用方法二

一、配置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文件
    }),
  ]
}
複製代碼

二、配置package.json 文件

{
 "scripts": {
    "generateAnalyzFile": "webpack --profile --json > stats.json", // 生成分析文件
    "analyz": "webpack-bundle-analyzer --port 8888 ./dist/stats.json" // 啓動展現打包報告的http服務器
  }
}
複製代碼

三、在命令行工具中，運行先npm run generateAnalyzFile命令，而後運行npm run analyz命令。 此時就能夠看到分析結果了。

優勢： 稍微複雜，可是靈活啊!
缺點： 每次運行命令時，都會在dist目錄下生成一個stats.json文件。這個問題，能夠將generateStatsFile屬性設置爲false，可是這樣就沒法生成stats.json文件了。解決辦法：須要查看分析報告的時候設置爲true，其他時候設置爲false。

總結

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

官方文檔連接：www.npmjs.com/package/web…