什么是 Code Splitting（代码分割）？splitChunks 怎么配？

代码分割把大包拆成多个小文件，按需加载 / 并行加载 / 缓存复用，避免首屏下载整个应用。

三种方式：

1. 入口分割：多 entry
2. 动态 import()：路由/组件懒加载，自动成独立 chunk
3. splitChunks：把公共依赖（如 react、lodash）抽成 vendor chunk

// 路由懒加载（React）
const Home = React.lazy(() => import('./Home'))

// webpack 公共提取
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors' }
    }
  }
}

经验：把稳定不变的第三方库单独成 vendors chunk，业务代码更新时它因内容哈希不变可走强缓存。

同分类其他题目