首屏优化之代码分割

在结合 Webpack（vite） 和 vue 的项目中，代码分割（Code Splitting）是一种重要的性能优化手段，特别是对于首屏加载时间的优化。代码分割可以将一个大的 bundle 文件拆分成多个小的 chunks（块），这样可以按需加载，减少首次加载的时间，加快首屏显示。

Webpack 的 SplitChunksPlugin 可以用来自动分割公共模块和第三方库。通过合理配置 optimization.splitChunks 选项，可以把公共依赖提取到单独的 chunk 中，避免重复打包，减少首屏加载的体积。

  splitChunks: {
    chunks: 'all', // 可以是`async`（仅分割异步加载模块），`initial`（仅分割初始加载模块），或`all`（两者都分割）
      minSize: 20000, // 生成chunk的最小体积（以字节为单位）
      minChunks: 1, // 在分割之前，模块被共享的最少次数
      maxAsyncRequests: 30, // 按需加载时的最大并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      automaticNameDelimiter: '~', // 默认情况下，webpack将使用块的来源和名称生成名称（例如vendors~main.js）
      cacheGroups: { // 缓存组可以继承和/或覆盖splitChunks.*的任何选项
      vendors: {
        test: /[\\/]node_modules[\\/]/,
          priority: -10
      },
      default: {
        minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
      }
    }
  }
}