這里我們先介紹一個工具,或者說一個插件,webpack-bundle-analyzer可視化資源分析工具
這個工具可以指導我們優化那些大體積的組件,去除那些引但未使用的組件,等
1 、安裝
npm install --save-dev webpack-bundle-analyzer
2 、配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
這個工具可以指導我們優化那些大體積的組件,去除那些引但未使用的組件,等
1 、安裝
npm install --save-dev webpack-bundle-analyzer
2 、配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
命令:cross-env NODE_ENV=production npm_config_report=true npm run build (cross-env 跨平台,按需使用)
執行完成后系統會默認在瀏覽器中打開127.0.0.1:8888
4 、 效果

5 、 擴展
new BundleAnalyzerPlugin({
// 可以是`server`,`static`或`disabled`。
// 在`server`模式下,分析器將啟動HTTP 服務器來顯示軟件包報告。
// 在“靜態”模式下,會生成帶有報告的單個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`中的一個。
// 有關更多信息,請參見“定義”一節。
defaultSizes: 'parsed', // 在默認瀏覽器中自動打開報告
openAnalyzer: true, // 如果為true,則Webpack Stats JSON文件將在bundle輸出目錄中生成
generateStatsFile: false, // 如果`generateStatsFile`為`true`,將會生成Webpack Stats JSON文件的名字。 // 相對於捆綁輸出目錄。
statsFilename: 'stats.json', // stats.toJson()方法的選項。
// 例如,您可以使用`source:false`選項排除統計文件中模塊的來源。
// 在這里查看更多選項:https: //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info' //日志級別。可以是'信息','警告','錯誤'或'沉默'。
})