react配置webpack-bundle-analyzer项目优化踩坑记录

react配置webpack-bundle-analyzer项目优化踩坑

webpack-bundle-analyzer是一款神奇。能分析项目中依赖包的大小，从而让开发者能有针对性的进行优化的webpack插件

步骤：

（1）安装 cnpm i webpack-bundle-analyzer --save-dev

  (2) 在config文件夹中找到webpack.config.js，进行如下操作

特别注意这里new BundleAnalyzerPlugin的时候要找准位置；和module参数同级的plugins;[]才是配置plugin的地方

这样我们在npm run build的时候浏览器会自动打开9090端口的一个页面显示当前依赖包的各种大小拼图

ps：

vue中配置改插件步骤：（以vuecli3为例。）

（1） 安装 cnpm install webpack-bundle-analyzer -D

（2）在vue.config.js文件配置选项：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
    chainWebpack:config=>{
        if (process.env.use_analyzer) {     // 分析
            config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin)
        }
    },
    pluginOptions:{
    }
}

（3） 安装npm安装cross-env，（windows不支持xxx=xxx写法）

（4）配置package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "cross-env use_analyzer=true vue-cli-service build",
    "lint": "vue-cli-service lint",
    "analyzer": "cross-env use_analyzer=true npm run build"
  },

如果希望在打包的时候显示。则在build命令里配置cross-env use_analyzer=true即可。

如果希望单独设置一个命令用来显示模块大小，可以重新配置，如上  "analyzer": "cross-env use_analyzer=true npm run build"。

key值可以随便取。

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"功能时，尽量输入准确的关键字，以提高搜索速度和准确性。 

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。