Webpack编译时导入指定动态模块子集的优化问题

根据你的需求，核心是要让Webpack在编译阶段就精准打包你需要的组件子集，而不是打包所有组件或者生成额外的异步chunk。这里有两个靠谱的解决方案：

方案一：使用require.context配合预筛选（推荐） #

这种方式利用Webpack提供的require.contextAPI，在编译时扫描指定目录，再结合你的JSON配置筛选出需要的组件，Webpack会自动分析并只打包被选中的模块。

假设你的组件配置文件components/config.json内容如下：

{
  "includedComponents": ["A", "B"]
}

在App.js中这样实现：

// 导入编译时已知的配置文件
const componentConfig = require('./components/config.json');

// 创建组件目录的上下文：参数分别是目录、是否递归子目录、匹配文件的正则
const componentContext = require.context('./components', false, /\.js$/);

// 筛选并导入需要的组件
const importedComponents = {};
componentConfig.includedComponents.forEach(componentName => {
  const targetPath = `./${componentName}.js`;
  // 检查上下文是否包含该路径，避免导入不存在的组件
  if (componentContext.keys().includes(targetPath)) {
    importedComponents[componentName] = componentContext(targetPath).default;
  }
});

// 之后就可以直接使用导入的组件，比如 importedComponents.A

这个方案的优势是灵活，不管你的配置里有多少组件，Webpack都会只打包你明确指定的那些，不会产生冗余的chunk或网络请求。

方案二：静态可分析的模板字符串导入（简单场景适用） #

如果你的组件子集可以在编译时被Webpack静态分析出来，也可以直接用模板字符串配合循环导入：

// 从JSON导入组件列表（Webpack编译时会读取这个JSON并分析内容）
const { includedComponents } = require('./components/config.json');
const components = {};

// 循环导入指定组件
for (const name of includedComponents) {
  // 这里的模板字符串必须是静态可推断的，Webpack会识别并打包对应的模块
  components[name] = require(`./components/${name}.js`).default;
}

这种方式更简洁，但要确保Webpack能静态解析出name的可能值——只要你的配置是本地JSON文件，Webpack就能在编译时读取并分析，从而只打包需要的组件。

为什么之前的方案会产生冗余？ #

你之前的方案大概率是使用了动态import()语法，或者没有做静态筛选的全量require.context，这会让Webpack无法在编译阶段确定你需要的模块范围，只能把所有匹配的组件都打包成独立的异步chunk，运行时再通过网络请求加载，自然就产生了冗余。而上面的两种方案都是在编译阶段就明确告知Webpack要导入的模块，所以它会把这些组件直接打包进主bundle，完全避免多余的chunk和请求。

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