先看webpack-bundle-analyzer的效果圖(官方效果圖):html
經過使用webpack-bundle-analyzer能夠看到項目各模塊的大小,能夠按需優化 webpack
一、先安裝web
npm install --save-dev webpack-bundle-analyzer
二、在webpack.config.js中配置:npm
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; plugins: [ new BundleAnalyzerPlugin( { analyzerMode: 'server', analyzerHost: '127.0.0.1', analyzerPort: 8889, reportFilename: 'report.html', defaultSizes: 'parsed', openAnalyzer: true, generateStatsFile: false, statsFilename: 'stats.json', statsOptions: null, logLevel: 'info' } ), ]
三、在package.json的scripts里加入下面這句話,就能夠npm run build以後看到webpack-bundle-analyzer的效果:json
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
參考資料:webpack-bundle-analyzer優化