前沿:

一个陌生而又成熟的项目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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐