webpack實踐——webpack-bundle-analyzer 的使用

先看webpack-bundle-analyzer的效果圖(官方效果圖):
93f72404-b338-11e6-92d4-9a365550a701.gifhtml

經過使用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優化

相關文章
相關標籤/搜索