chunk 分包

1. 多个入口点会自动生成多个 chunk。

2. 使用 import() 语法动态加载模块时会自动将其分割成一个单独的 chunk。

   import('./module.js').then(module => {
     module.default()
   })

   如果希望将某些路由打包到同一个 chunk 中：

   export default defineConfig({
     build: {
       rollupOptions: {
         // https://rollupjs.org/guide/en/#outputmanualchunks
         output: {
           manualChunks: {
             'group-user': ['./src/UserDetails', './src/UserDashboard', './src/UserProfileEdit'],
           },
         },
       },
     },
   })

3. 更精细的控制，修改 output.manualChunks 选项：

   export default {
     input: 'src/main.js',
     output: {
       dir: 'dist',
       format: 'esm',
       manualChunks(id) {
         if (id.includes('node_modules')) {
           return 'vendor' // 将 node_modules 中的模块打包到 vendor chunk
         }
         if (id.includes('utils')) {
           return 'utils' // 将 utils 目录中的模块打包到 utils chunk
         }
       },
     },
   }