如何配置 webpack 根据文件大小动态打包异步引入的文件？

通过异步引入的方式按需加载文件是一种提高应用程序性能的常见做法。然而，过多的异步请求可能会导致不必要的http开销。

为了优化这种情况，我们可以使用 webpack 的 optimization.splitchunks 选项，根据文件大小对异步引入的文件进行动态打包。

optimization.splitchunks 选项

optimization.splitchunks 允许配置代码分割策略，包括以下选项：

• minsize: 最小文件大小，小于该大小的文件将合并。
• maxsize: 最大文件大小，超过该大小的文件将被分割。
• maxasyncrequests: 并发异步请求的最大数量。
• maxinitialrequests: 初始异步请求的最大数量。

配置示例

以下是一个配置示例，展示如何根据文件大小动态打包异步引入的文件：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000, // 最小文件大小为 30KB
      maxSize: 0, // 没有最大文件大小限制
      minChunks: 1, // 每个 chunk 至少包含一个模块
      maxAsyncRequests: 10, // 并发请求最多 10 个
      maxInitialRequests: 5, // 初始请求最多 5 个
      automaticNameDelimiter: '~', // chunk 名称分隔符
      name: true, // 自动生成 chunk 名称
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10, // 缓存组优先级
          filename: 'vendors.js'
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true, // 重用已存在的 chunk
          filename: 'common.js'
        }
      }
    }
  }
};

在这个配置中，minsize 设置为 30kb，即文件大小小于 30kb 时将被合并。maxsize 设置为 0，表明没有最大文件大小限制。maxasyncrequests 和 maxinitialrequests 分别控制并发请求和初始请求的最大数量。

该配置将根据以下规则对异步引入的文件进行打包：

• 大于 30kb 的文件将被独立打包。
• 小于 30kb 的文件将被合并到一个 chunk 中，直到该 chunk 的大小不超过 200kb 或异步请求数量达到 10 个。