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
复制代码

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