如何控制Module Federation构建生成的产物文件数量

你遇到的碎文件过多是Module Federation（MF）的默认行为导致的：每个exposes声明的组件、组件各自的私有依赖都会被单独拆为独立chunk，且默认情况下optimization.splitChunks不会处理MF生成的远程chunk，所以你调整minSize不生效。可以通过以下配置解决：

1. 调整splitChunks覆盖MF生成的chunk #

将splitChunks的chunks属性设为all，同时调整minSize、minChunks阈值，确保小体积chunk会被合并：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 关键配置，会处理包括MF在内的所有类型chunk
      minSize: 10 * 1024, // 可自定义，比如设置最小10KB才拆分，小于该值的chunk会被合并
      minChunks: 1,
      cacheGroups: {
        // 把所有MF组件的公共第三方依赖打到同一个公共chunk
        mfCommon: {
          test: /[\\/]node_modules[\\/]/,
          name: 'mf-common',
          priority: 10,
        }
      }
    }
  }
}

2. 声明shared共享依赖，避免重复打包 #

在Module Federation配置里添加shared字段，把项目用到的公共框架、工具库声明为共享，不用每个组件都单独打包一份依赖：

new ModuleFederation({
  name: 'component1',
  filename: 'remote-entry.js',
  exposes: {
    './Test1': './src/test1',
    './Test2': './src/test2',
    './Test3': './src/test3',
  },
  // 新增shared配置，以React技术栈为例，可按自己的技术栈调整
  shared: {
    react: { singleton: true, requiredVersion: '^18.0.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
    // 其他公共依赖比如lodash、组件库等都可以加在这里
  }
})

3. 合并多个expose组件到同一个chunk #

如果三个组件通用性很高，可以通过webpack魔法注释把它们打到同一个chunk里，避免生成三个独立的组件chunk：

exposes: {
  './Test1': /* webpackChunkName: "mf-components" */ './src/test1',
  './Test2': /* webpackChunkName: "mf-components" */ './src/test2',
  './Test3': /* webpackChunkName: "mf-components" */ './src/test3',
}

如果使用的是webpack 5.70以下的旧版本，可能存在MF chunk拆分的已知bug，可以先升级webpack到最新稳定版再尝试以上配置。

内容的提问来源于stack exchange，提问作者duocai