记react ant-design-pro 打包优化

基于react+ant-design-pro(4.5.0)+umi项目打包需要时间十几分钟，每次打包发布都非常的慢，等待的时间很长。

通过 npm run analyze 可以很清楚看到打包的情况，发现很大的包里引入的插件占比非常大，可以把这些插件提取出来，减少包的体积和打包速度。

// https://umijs.org/config/
import { defineConfig } from 'umi';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';
const { REACT_APP_ENV } = process.env;

const chunkCacheGroups = {
  umijs: {
    name: 'chunk-umi-js',
    test: /[\\/]node_modules[\\/]_?(@umijs)[\\/]/,
    priority: 60,
  },
  rcform: {
    name: 'chunk-rcform',
    test: /[\\/]node_modules[\\/]_?((rmc-.*)|(rc-.*))(.*)/,
    priority: 50,
    enforce: true,
  },
  antd: {
    name: 'chunk-antd',
    test: /[\\/]node_modules[\\/]_?(antd)(.*)/,
    priority: 50,
    enforce: true,
  },
  antpro: {
    name: 'chunk-ant-design',
    test: /[\\/]node_modules[\\/](@ant-design)[\\/]pro(.*)/,
    priority: 50,
    enforce: true,
  },
  antproicon: {
    name: 'chunk-ant-design-icon',
    test: /[\\/]node_modules[\\/](@ant-design)[\\/]icons(.*)/,
    priority: 50,
    enforce: true,
  },
  react: {
    name: 'chunk-react',
    test: /[\\/]node_modules[\\/](react|react-dom|(react(.*))|react-color|react-copy-to-clipboard|react-helmet-async)[\\/]/,
    priority: 55,
    enforce: true,
  },
  utils: {
    name: 'chunk-utils',
    test: /[\\/]node_modules[\\/]_?(use-merge-value|shortid|qs|moment|lodash(.*)|lodash|use-media-antd-query|use-media-antd-query|material-color|intersection-observer)[\\/]/,
    priority: 55,
    enforce: true,
  },
  libs: {
    name: 'chunk-libs',
    test: /[\\/]node_modules[\\/](component-classes|t-non-react-statics|shallowequal|raf|classnames|fbjs|array-tree-filter|dom-align|add-dom-event-listener|css-animation|tinycolor2|swr|ua-parser-js|viewerjs)[\\/]/,
    priority: 50,
    enforce: true,
  },
  utilsVendor: {
    name: 'chunk-utils-vendor',
    test: /[\\/]utils[\\/]/,
    priority: 50,
    enforce: true,
  },
};

// chunk-name
const getSplitChunks = () => {
  const chunks = Object.values(chunkCacheGroups);
  const chunkBundles = [];
  chunks.map((chunk, key) => {
    chunkBundles[key] = chunk.name;
  });
  return chunkBundles;
};


export default defineConfig({
  ...,
  chunks: REACT_APP_ENV !== 'dev' ? [...getSplitChunks(), 'umi'] : undefined,
  chainWebpack(config, { webpack }) {
    if (REACT_APP_ENV === 'dev') return;
    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all', // async 不会打包静态引用的文件
          minSize: 30000, // 30000 大于这个值的文件会被提取成单独文件
          minChunks: 3,
          automaticNameDelimiter: '.',
          cacheGroups: chunkCacheGroups,
        },
      },
    });
  },
});