前端打包体积分析和产物优化（webpack-bundle-analyzer)

问题背景

React或Vue项目打包后，有时产物体积非常大。为了优化项目，我们一般从以下几个方面考虑。

1. 每个chunk的大小是多少？
2. 哪个chunk体积最大？
3. 应该如何优化体积大的chunk？

安装插件

 npm install --save-dev webpack-bundle-analyzer

配置插件

1.找到webpack配置文件

找到你的项目中的webpack配置文件，文件名一般为webpack.config.js

2.引入插件

在webpack.config.js文件最上面，引入刚刚下载的插件：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

3.修改plugin对象

找到plugins数组（在module.exports对象中），并在其中添加一个新的BundleAnalyzerPlugin实例。

下面的示例，将该插件添加到生产环境配置中：

// ...
plug