webpack实践——webpack-bundle-analyzer 的使用

2019年9月14日 254次阅读 来源: T_one

先看webpack-bundle-analyzer的效果图（官方效果图）：
《webpack实践——webpack-bundle-analyzer 的使用》

通过使用webpack-bundle-analyzer可以看到项目各模块的大小，可以按需优化

1、先安装

npm install --save-dev webpack-bundle-analyzer

2、在webpack.config.js中配置：

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'
                }
       ),
]

3、在package.json的scripts里加入下面这句话，就可以npm run build之后看到webpack-bundle-analyzer的效果：

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

参考资料：​​webpack-bundle-analyzer

    原文作者：T_one
    原文地址: https://segmentfault.com/a/1190000012220132
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞