webpack-bundle-analyzer的使用

安装：

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

代码：（在umi项目中config.ts的配置)

import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
const chainWebpack = (config: any) => {
  config.plugin(BundleAnalyzerPlugin).use(BundleAnalyzerPlugin);
};

使用：

npm run build

运行打包命令（运行dev或者start也可以），webpack会自动在浏览器中打开一个可视化分析工具。可以在这个工具中查看模块及其大小，识别哪些模块占用了较多的空间。

可视化工具栏详解

1. Treemap sizes：

是指webpack-bundle-analyzer生成的包大小分析图中，用于展示不同模块、chunk或者资源在打包后的大小占比情况的矩形图（treemap）。在这个图中，每个矩形的大小代表了对应模块、chunk或者资源的大小，而颜色则表示该模块、chunk或者资源的类型。

其中，Stat代表源代码的大小，即未压缩的大小；Parsed代表解析后的代码大小，即应用了webpack的优化后的大小，也就是我们常说的“打包后的大小”；Gzipped则代表经过gzip压缩后的大小，也就是实际传输到客户端的大小。

因此，通常情况下，我们更关注Parsed和Gzipped的大小，因为它们直接影响了实际使用的流量和加载时间。而Stat的大小则可以用来衡量源代码的复杂程度和可维护性等因素。

2. Filter to initial chunks

它的作用是将分析图中的模块、chunk或者资源，筛选出与初始页面加载有关的模块和chunk，并将其他模块和chunk过滤掉。这样可以让你更加清晰地了解初始页面加载所需的代码和资源，以帮助你进行性能优化。

需要注意的是，"Filter to initial chunks"选项可能会过滤掉一些与初始页面加载无直接关系的代码，比如异步加载的代码或者按需加载的组件等。如果你需要查看全部的代码和资源，可以将这个选项禁用。

3. Search modules

它的作用是在分析图中快速查找模块或者资源，并高亮显示匹配的矩形。

使用"Search modules"功能进行查找时，你需要在搜索框中输入要查找的模块或者资源的名称，然后点击搜索按钮。如果搜索框中的关键字匹配了分析图中的某个模块或者资源的名称，那么匹配的矩形将被高亮显示出来。如果搜索框中的关键字没有匹配到任何模块或者资源，分析图不会发生变化。

需要注意的是，"Search modules"功能只能查找模块或者资源的名称，无法查找模块或者资源的其他属性，如大小、依赖关系等。此外，在大型的分析图中，"Search modules"功能可能会比较慢，因为需要遍历所有的模块或者资源名称进行匹配。因此，建议在使用"Search modules"功能时，尽量输入准确的关键字，以提高搜索速度和准确性。