Rollup：将分割的块合并回入口点

Question

我有一个包含大量块的模块

A

、

B

、

C

和

D

，所有这些都依赖于一个共享实用程序文件，该文件单独汇总块。

因为这个实用程序文件只有几 Kb，并且因为每个子块都需要它，所以我想将此实用程序文件合并回主入口点。它本身作为一个块绝对没有任何好处。

但是，我不知道该怎么做。 Rollup 记录了

manualChunks(id)

选项，但它绝对没有关于如何合并回入口点的文档。提供像

index

这样的通用名称会创建两个

index.<hash>.js

文件，一个是入口点，第二个是我的实用程序文件。

manualChunks(id) {
    if (id.includes('lib/utilities.js')) {
        return 'index';
    }
}

如何强制 Rollup 将该模块提升回入口点？

Answer 1

重要的是要明白，Vite 是固执己见的，虽然它是可定制的，但你只能做这么多来改变它的行为。它针对 HTTP/2 进行了优化，HTTP/2 通过单个 TCP 连接多路复用网络请求。因此，Vite 并不担心文件较小或网络请求较多。分块文件被设计为并行加载。

这听起来像是 Vite 坚持分块的第二个原因

utilities.js

是因为它可以在多个其他模块中重复使用，无论文件大小如何，这都是预期的行为。

您可以尝试传递 rollup 选项 experimentalMinChunkSize 选项，但我在测试中还没有看到它工作得很好。值得一试，但我猜它不会起作用。

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                experimentalMinChunkSize: 500,
            }
        },
    },
})

另一种选择可能是在 HTML 文档中添加一个直接引用

utilities.js

文件的脚本标记。您不必在生产中使用此 HTML，但它可能足以说服 Vite 修改您的输出包。

<script type="module" src="/lib/utilities.js"></script>

如果这些都不起作用，那么您可以尝试设置汇总选项inlineDynamicImports，这可能会为整个包创建一个 JS/CSS 文件，包括模块 A、B、C 和 D，具体取决于模块的导入方式.

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                inlineDynamicImports: true,
            }
        },
    },
})

我认为

manualChunks

不会对你想做的事情有所帮助。如果您尝试这样做，它仍然会创建另一个文件，因为 Vite 将其视为共享代码块。最好的情况下，

manualChunks

只会为您提供重命名输出文件的选项。