webpack打包分析工具 webpack-bundle-analyzer

前沿：

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

可以看到打包出来的所有文件所占的大小，比较直观