如何让Vite拆分library.js，将子组件打包到对应路由chunk中？

方法一：改用动态导入组件 #

将静态导入的UniqueChild改为在computed中动态导入，让Vite自动将组件代码打包到对应路由的chunk中：

<template>
  <CommonChild :content="content" />
</template>

<script>
import CommonChild from '@/views/CommonChild.vue';

export default {
  name: 'Example1',
  components: {
    CommonChild
  },
  computed: {
    content: function () {
      return {
        // 动态导入指定组件，Vite会自动拆分到当前路由chunk
        component: () => import('@/library.js').then(mod => mod.UniqueChild1)
      };
    }
  }
};
</script>

如果library中的每个组件都有独立文件（比如@/library/UniqueChild1.vue），直接导入对应文件效果更优：

component: () => import('@/library/UniqueChild1.vue')

方法二：配置Vite的拆分规则 #

在vite.config.js中修改build.splitChunks配置，强制取消library.js的独立chunk，让其代码拆分到使用它的路由chunk中：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          // 不让library.js单独生成chunk
          if (id.includes('library.js')) return;
          // 保留node_modules的默认拆分规则
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        }
      }
    }
  }
})

若需要更精准拆分library下的单个组件：

manualChunks: (id) => {
  if (id.includes('node_modules')) return 'vendor';
  // 让library下的组件跟随使用它的路由chunk打包
  if (id.includes('@/library/')) return;
}

方法三：优化library.js的导出结构 #

调整library.js为动态导出格式，避免因副作用导致Vite无法tree-shake：

// @/library.js
// 改用按需导入再导出，而非一次性加载所有组件
export const UniqueChild1 = () => import('./UniqueChild1.vue');
export const UniqueChild2 = () => import('./UniqueChild2.vue');
// ...其他组件

然后在路由组件中直接使用该动态导出的组件：

<script>
import CommonChild from '@/views/CommonChild.vue';
import { UniqueChild1 } from '@/library.js';

export default {
  name: 'Example1',
  components: {
    CommonChild
  },
  computed: {
    content: function () {
      return {
        component: UniqueChild1
      };
    }
  }
};
</script>

这样Vite会自动将每个UniqueChild的代码拆分到对应的路由chunk中。

内容的提问来源于stack exchange，提问作者The Jared Wilcurt