Webpack 中的 chunk

什么是 Chunk？

定义：Chunk 是 Webpack 在构建过程中生成的一个或多个文件的集合。每个 chunk 可以包含一个或多个模块。
目的：通过将代码分割成多个 chunks，可以实现按需加载（懒加载），减少初始加载时间，提升应用性能。

Chunk 的类型

Initial Chunks：
这些 chunks 包含了应用程序启动时需要的所有代码。
它们通常是由入口点（entry points）生成的。

Async Chunks：
这些 chunks 是在运行时按需加载的。
它们通常是由动态导入（import()）生成的。

Vendor Chunks：
这些 chunks 包含了第三方库或框架的代码。
通过将第三方代码分离出来，可以利用浏览器缓存，减少重复下载。

Common Chunks：
这些 chunks 包含了多个 entry points 或 async chunks 之间的共享代码。
通过提取公共代码，可以减少冗余，提高加载效率。

如何配置 Chunks

entry 配置：指定应用程序的入口点。

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['react', 'react-dom']
  }
};

optimization.splitChunks：控制如何拆分 chunks。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 对所有类型的 chunks 进行拆分
      minSize: 10000, // 最小 chunk 大小
      maxSize: 0, // 最大 chunk 大小，0 表示无限制
      minChunks: 1, // 最少被引用次数
      maxAsyncRequests: 5, // 按需加载时的最大并行请求数
      maxInitialRequests: 3, // 初始加载时的最大并行请求数
      automaticNameDelimiter: '~', // 自动生成的 chunk 名称分隔符
      name: true, // 自动命名
      cacheGroups: { // 缓存组配置
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

dynamic imports：使用动态导入（import()）来按需加载代码。

button.addEventListener('click', () => {
  import('./module.js').then((module) => {
    module.default();
  });
});