（二十二）webpack-bundle-analyzer的使用

这里介绍一些常用的webpack打包优化解决方案

1. 使用插件查看项目所有包及体积大小

   查看项目打包

webpack有个插件，可以查看项目打包，每个包的体积，每个包里面的包一些情况。
首先下载插件

$ npm intall webpack-bundle-analyzer --save-dev

其次项目中配置（webpack.prod.conf.js文件中配置）

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

再次运行命令

npm run build-report

就可以查看项目的打包情况