umi4版本中如何配置optimize-split-chunks

在Umi 4.x版本中，使用Webpack进行资源优化时，`optimize-split-chunks`选项已经整合到了UMI提供的Webpack配置文件中。如果你想要配置代码分割，主要是通过`umi-plugin-webpack`插件来进行设置。以下是基本的配置示例：

首先，在`umi.config.js`或其他指定的Webpack配置文件里，添加或更新`webpack.common.config.js`部分，找到`chainWebpack`函数：

import { defineConfig } from 'umi';

export default defineConfig({
  chainWebpack(config) {
    config.optimization.splitChunks({
      chunks: 'all', // 分割所有类型的块，包括entry和lazy
      cacheGroups: {
        vendors: { // 根据名称识别并优化第三方库
          test: /[\\/]node_modules[\\/]/,
          priority: -10, // 设置较低优先级，放在最后提取
          name: 'vendors', // 生成的文件名
        },
        common: { // 提取公共代码
          minChunks: 2, // 至少被两个模块共享才会被打包
          priority: -20, // 比`vendors`更低
          reuseExistingChunk: true, // 如果存在相同的公共代码，就复用
        },
      },
    });
  },
});

上述配置中，`cacheGroups`里定义了两个缓存组：`vendors`用于提取项目中的依赖包，而`common`用于找出共同的代码模块。可以根据实际情况调整这些设置。

运行`umi dev`或`umi build`之后，Webpack会根据此配置生成优化过的JavaScript文件和CSS。