無意中看到webpack-bundle-analyzer這個工具，仔細學習后發(fā)現(xiàn)真是個神奇算途，一起來學習吧善榛。
一诊杆、安裝
npm install webpack-bundle-analyzer –save-dev
二瓜浸、配置
//在build/webpack.prod.config.js中的module.exports = webpackConfig這句話的上面增加
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
該插件的默認配置芍躏，一般無需修改
new BundleAnalyzerPlugin({
// 可以是`server`皆怕，`static`或`disabled`救欧。
// 在`server`模式下定庵，分析器將啟動HTTP服務器來顯示軟件包報告吏饿。
// 在“靜態(tài)”模式下，會生成帶有報告的單個HTML文件蔬浙。
// 在`disabled`模式下猪落，你可以使用這個插件來將`generateStatsFile`設置為`true`來生成Webpack Stats JSON文件。
analyzerMode: 'server',
// 將在“服務器”模式下使用的主機啟動HTTP服務器畴博。
analyzerHost: '127.0.0.1',
// 將在“服務器”模式下使用的端口啟動HTTP服務器笨忌。
analyzerPort: 8888,
// 路徑捆綁，將在`static`模式下生成的報告文件俱病。
// 相對于捆綁輸出目錄官疲。
reportFilename: 'report.html',
// 模塊大小默認顯示在報告中。
// 應該是`stat`亮隙，`parsed`或者`gzip`中的一個袁余。
// 有關更多信息，請參見“定義”一節(jié)咱揍。
defaultSizes: 'parsed',
// 在默認瀏覽器中自動打開報告
openAnalyzer: true,
// 如果為true颖榜，則Webpack Stats JSON文件將在bundle輸出目錄中生成
generateStatsFile: false,
// 如果`generateStatsFile`為`true`，將會生成Webpack Stats JSON文件的名字煤裙。
// 相對于捆綁輸出目錄掩完。
statsFilename: 'stats.json',
// stats.toJson（）方法的選項。
// 例如硼砰，您可以使用`source：false`選項排除統(tǒng)計文件中模塊的來源且蓬。
// 在這里查看更多選項：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info' // 日志級別√夂玻可以是'信息'恶阴，'警告'，'錯誤'或'沉默'豹障。
})
三冯事、啟動
npm run build --report
啟動后的命令窗口效果如下：
1.png
瀏覽器打開127.0.0.1:8888地址可以看到一下效果圖：
2.png
由上圖可知，每個文件的占用面積越大則該文件越大血公，所以找到相關文件優(yōu)化即可昵仅。
