Vue+Vite+Rollup项目中manual chunks为空的原因及正确方案

为什么group-data chunk为空？ #

你配置的manualChunks指定了要将alternatives.json打包到单独chunk，但最终chunk为空，核心原因是Rollup的静态分析无法识别你代码中的动态导入路径：

• 你的loadData函数使用了变量拼接的导入路径import(./data/${filename}.json)，这种模糊的动态导入在构建时无法让Rollup确定具体要导入哪个文件，因此它不会把alternatives.json关联到你指定的group-data chunk中。
• 手动指定的manualChunks数组仅对静态可分析的模块依赖生效，而模糊动态导入的文件不在这个依赖树里，导致该chunk没有内容。

正确的实现方式 #

方式1：将动态导入改为静态可识别的分支 #

如果你的filename取值是有限的固定值，可以把动态导入改成条件分支，让Rollup能静态分析到具体的JSON文件：

function loadData(filename) {
  switch(filename) {
    case 'alternatives':
      return () => import('./data/alternatives.json');
    case 'default':
      return () => import('./data/default.json');
    case 'extensions':
      return () => import('./data/extensions.json');
    default:
      throw new Error(`Unsupported data file: ${filename}`);
  }
}

此时你原来的manualChunks配置就能生效，Rollup会把alternatives.json打包到group-data chunk中。

方式2：使用Vite的glob导入+函数式manualChunks #

如果需要保留动态的文件名传入，可以用Vite支持的import.meta.glob来批量导入JSON文件，同时用函数式的manualChunks来指定分组规则：

1. 修改导入逻辑：

// 预加载src/data下所有JSON文件（构建时静态分析）
const dataModules = import.meta.glob('./data/*.json');

function loadData(filename) {
  const modulePath = `./data/${filename}.json`;
  if (dataModules[modulePath]) {
    return dataModules[modulePath];
  }
  throw new Error(`Data file ${filename}.json not found`);
}

2. 调整vite.config.js的配置：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 将指定的JSON文件分到group-data chunk
          if (id.includes('src/data/alternatives.json')) {
            return 'group-data';
          }
          // 可以继续添加其他需要分组的文件
          if (id.includes('src/data/xxx.json')) {
            return 'group-data';
          }
          // 其他模块保持默认打包逻辑
        },
      },
    },
  },
});

额外说明 #

• 如果你只是想让单个JSON文件通过动态导入生成单独chunk，其实不需要配置manualChunks：直接使用明确的动态导入import('./data/alternatives.json')，Rollup会自动为它生成独立的chunk。
• 模糊路径的动态导入（如import(./data/${filename}.json)）默认会把所有匹配的JSON文件打包到同一个chunk中，若要拆分则必须用函数式manualChunks来匹配路径。

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