如何将Rollup拆分的工具chunk合并回入口文件？

问题场景 #

你有一个包含多个chunk（A、B、C、D）的模块，所有子chunk均依赖一个被Rollup单独拆分的小型共享工具文件，希望将该工具文件合并回主入口，避免生成无意义的独立chunk。使用manualChunks返回入口名称（如index）时，会生成两个同名chunk文件，无法达到合并目的。

可行解决方案 #

方案1：在主入口显式导入工具文件 #

直接在主入口文件中添加对工具模块的导入语句，强制Rollup将其代码打包进主入口。其他子chunk会自动引用主入口中的工具代码，不会再单独拆分出工具chunk。

// 主入口文件 index.js
import './lib/utilities.js';

// 原有的主入口代码...

方案2：通过manualChunks禁止工具模块单独拆分 #

在manualChunks配置中，对工具模块返回undefined，让Rollup取消对该模块的单独拆分，将其合并到依赖它的入口或chunk中。如果主入口间接依赖该模块，代码会被合并到主入口。

manualChunks(id) {
  // 不对工具模块进行单独拆分
  if (id.includes('lib/utilities.js')) {
    return undefined;
  }
  // 保留其他自定义拆分逻辑
}

方案3：调整拆分策略，仅拆分动态导入模块 #

通过output.splitChunks配置限制Rollup仅拆分动态导入的模块，静态共享模块会被合并到主入口或依赖的chunk中。

output: {
  splitChunks: {
    chunks: 'async' // 仅对动态导入的模块进行拆分
  }
}

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