代码分割策略

通过配置 manualChunks 自定义代码分割，优化 chunk 体积和加载性能。

基础配置

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 框架单独分包
          vue: ['vue', 'vue-router', 'pinia'],
          // 工具库分包
          utils: ['lodash', 'axios']
        }
      }
    }
  }
})

函数形式配置

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // node_modules 依赖单独分包
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

分包策略建议

注意：分包过多会增加 HTTP 请求，需平衡分包数量和 chunk 体积。

按依赖分组分包

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // Vue 相关
            if (id.includes('vue')) return 'vue'
            // React 相关
            if (id.includes('react')) return 'react'
            // 其他依赖
            return 'vendor'
          }
        }
      }
    }
  }
})

动态导入分割

// 路由级懒加载
const routes = [
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
]

动态导入自动创建独立 chunk，按需加载。

分包效果验证

# 构建后查看产物
npm run build

# 输出类似
dist/assets/vue-xxx.js      50 kB
dist/assets/vendor-xxx.js   100 kB
dist/assets/index-xxx.js    20 kB

分包配置选项

output: {
  manualChunks: {
    // 对象形式：固定分包
    vendor: ['vue', 'axios']
  },
  // 或函数形式：动态分包
  manualChunks(id) {
    // 自定义逻辑
  }
}

要点总结

• manualChunks 配置分包策略
• 框架核心单独分包优化缓存
• 动态导入自动创建 chunk
• 分包需平衡数量与体积