前沿:

一个陌生而又成熟的项目webpack打包往往很慢,这时候我用到了webpack-bundle-analyzer这个webpack的分析工具
在这里插入图片描述
配置非常简单:

  • 1.安装npm/cnpm install --save-dev webpack-bundle-analyzer
  • 2.配置config/index.js
module.exports = {
  build: {
  ...
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
  ...
}
  • 3.build/webpack.prod.conf.js文件中,webpackConfig就是上面的config/index
...
if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
...
  • 打包是输入npm run build --report

在这里插入图片描述
可以看到打包出来的所有文件所占的大小,比较直观

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐