Vite 打包配置，如何合并细小文件？

Question

使用vite（2.9.5）默认配置打包时，有些组件很小，可能只有0.2k也会单独打包成一个文件，请问如何合并这些细小的文件为一个文件？

比如，我在一个父页面有a, b, c, d, e, f 6个小子组件，如果每个子组件打包成单独的js和css，这样的话加载网页时浏览器就会频繁请求资源，

所以，

我想把a, b, c, d, e, f等子组件打包在一起，或者说

把a, b, c, d, e, f页面打包在父页面的资源文件中，

把请问该如何配置？

谢谢。

Answer 1

vite 是通过 rollup 打包的，你可以配置 rollup 的 output.manualChunks 配置。文档

vite.config.js

build: {
    rollupOptions: {
      output:{
        manualChunks(id) {
            if (id.includes('components')) { // 把 components 文件里面的文件都打包到 components.js 中 
                return 'components'
            }
        }
    }
}