使用桶文件时Webpack无法拆分超大Vendor Bundle的问题求助

我参考Stack Overflow方案，通过桶文件（如/hooks/index.ts）统一导出多个模块，再在组件中批量导入。但当前项目中出现以下问题：

• 这些模块引入的大型库均被打包进Vendor Bundle
• 首次导入桶文件的位置（如App.tsx）会加载全部库，即便组件通过React Suspense动态加载也是如此
• 移除桶文件的导出，改为直接导入模块后，Vendor Bundle拆分恢复正常

现求助两点：

1. 该问题产生的原因是什么？
2. 有无更便捷的模块暴露方式（无需逐个添加导入语句）？

附Webpack Split Chunks配置：

splitChunks: {
  chunks: 'all',
  name: true,
}

1. 问题产生的原因 #

桶文件的核心问题是静态导入的聚合特性：Webpack在编译时会完整解析桶文件里的所有导出语句，把每个导出模块的依赖（包括它们引入的大型第三方库）都绑定到桶文件本身。当你在App.tsx这类首屏/入口文件里导入这个桶文件时，Webpack会判定所有这些依赖都是首屏必须加载的资源，直接打包进Vendor Bundle，并且在页面初始化时全部加载——哪怕你后续用Suspense动态加载组件，Webpack也不会再拆分这些依赖，因为它已经把桶文件和所有关联依赖标记成了一个不可拆分的整体。

换成直接导入模块时，每个组件的依赖都是独立的，Webpack能准确追踪到哪些依赖是动态加载的，从而正常拆分Vendor Bundle。

2. 便捷的模块暴露方案 #

方案一：动态导入式桶函数 #

不要在桶文件里直接导出模块，而是写一个返回动态导入的函数，让组件按需调用：

// /hooks/index.ts
export const getUseA = () => import('./useA');
export const getUseB = () => import('./useB');

// 组件中使用（配合Suspense或async/await）
const { default: useA } = await getUseA();

这种方式既保留了统一的入口，又让Webpack能正确识别动态导入，不会把所有依赖提前打包。

方案二：自动生成动态导入映射 #

如果模块数量多，用require.context批量生成导出，无需手动维护每个模块：

// /hooks/index.ts
// 自动扫描当前目录下所有以use开头的ts文件
const hookContext = require.context('./', false, /^use.*\.ts$/);

// 生成动态导入映射
const hooks = {};
hookContext.keys().forEach(key => {
  const hookName = key.replace('./', '').replace('.ts', '');
  hooks[`get${hookName.charAt(0).toUpperCase()}${hookName.slice(1)}`] = () => hookContext(key);
});

export default hooks;

// 组件中使用
const { getUseA } = hooks;
const { default: useA } = await getUseA();

这个方案会自动扫描符合命名规则的模块，生成对应的动态导入函数，既省了手动写导出的麻烦，又保证了依赖按需加载。

方案三：优化Webpack拆分规则（兜底方案） #

如果不想改代码，可以调整Webpack配置，强制拆分异步加载的第三方库：

splitChunks: {
  chunks: 'all',
  name: true,
  cacheGroups: {
    asyncVendor: {
      test: /[\\/]node_modules[\\/]/,
      chunks: 'async', // 仅拆分异步加载的第三方库
      minSize: 30000, // 只拆分大于30KB的库，避免生成过多小文件
      priority: 10, // 优先级高于默认的vendor组
    },
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      chunks: 'initial', // 首屏需要的库打包到这个组
      priority: -10,
    }
  }
}

不过这个方案是兜底用的，因为桶文件的静态聚合问题依然存在，只是通过配置强制拆分了部分异步依赖，效果不如前两个方案彻底。

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