antDPro打包优化

通过npm run analyze查看打包情况，发现chunks中包含大量的重复打包

通过提取公共chunk来实现减少打包体积以及提高打包速度

从原来的20M经过拆包之后  最终变成了4M   官方文档   https://umijs.org/zh-CN/config#chainwebpack

// 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,
  },
  braft: {
    name: 'chunk-braft-js',
    test: /[\\/]node_modules[\\/]_?(braft(.*))[\\/]/,
    priority: 55,
    enforce: true,
  },
  draft: {
    name: 'chunk-draft-js',
    test: /[\\/]node_modules[\\/]_?(draft(.*))[\\/]/,
    priority: 55,
    enforce: true,
  },
  immutable: {
    name: 'chunk-immutable-js',
    test: /[\\/]node_modules[\\/]_?(immutable)[\\/]/,
    priority: 55,
    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,
        },
      },
    });
  },
});