【记录一次React优化过程】

记录一次React，umi项目代码从30M+优化到4M的过程

1. 首先打开配置中 的analyze，分析哪个页面的代码占比比较大
   pagckage.json 中配置 “analyzeDev”: “ANALYZE=1 umi dev”,并运行
2. 初始状态 33.56M

3. 去掉不必要的引入 ，最重要的是 去掉了 import { transpileModule } from ‘typescript’;一下子减少了10M，到 21M。

4. 分割代码，从21M减到了5.2M

 chunks: ['echarts', 'vendors', 'antd', 'umi'],
  chainWebpack(memo) {
    memo.optimization.splitChunks({
      chunks: 'all', //async异步代码分割 initial同步代码分割 all同步异步分割都开启
      automaticNameDelimiter: '.',
      name: true,
      minSize: 30000, // 引入的文件大于30kb才进行分割
      //maxSize: 50000, // 50kb，尝试将大于50kb的文件拆分成n个50kb的文件
      minChunks: 1, // 模块至少使用次数
      // maxAsyncRequests: 5,    // 同时加载的模块数量最多是5个，只分割出同时引入的前5个文件
      // maxInitialRequests: 3,  // 首页加载的时候引入的文件最多3个
      // name: true,             // 缓存组里面的filename生效，覆盖默认命名
      cacheGroups: {
        echarts: {
          name: 'echarts',
          test: /[\\/]node_modules[\\/](echarts)[\\/]/,
          priority: -9,
          enforce: true,
        },
        antd: {
          name: 'antd',
          test: /[\\/]node_modules[\\/](@ant-design|antd|antd-mobile)[\\/]/,
          priority: -10,
          enforce: true,
        },
        vendors: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -11,
          enforce: true,
        },
      },
    });
  },

5. 三四个模块按需引入 echarts，从5.2M减到了4.7M