通过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, }, }, }); }, });