webpack 异步引入的文件如何根据文件大小判断是否单独打包在一起？

Question

我有一个组件库
index.ts 入口文件
a.jsx 组件
b.jsx
c.jsx
....

在入口文件中通过require.context('./', false, //.jsx$//, 'lazy') 方式异步引入文件， 这样每一个文件就分开打包，按需加载了。

但是现在存在文件就是 如果我有的组件很小只有1kb, 2kb，3kb这种小组件的我希望他能合并在一起，避免http请求过多？ 我希望文件能合并到200kb左右一个， 又能异步加载，该如何解决？

Answer 1

在Webpack中，异步引入的文件默认情况下会根据模块的依赖关系和配置进行打包。如果你希望根据文件大小来决定是否将多个小文件合并在一起打包，你可以通过配置optimization.splitChunks选项来实现这个需求。

optimization.splitChunks是Webpack 4中引入的一个特性，它允许你自定义代码分割的策略。你可以设置一个最小文件大小（minSize）和最大文件大小（maxSize），以及一个合并文件的阈值（maxAsyncRequests），来控制何时将多个小文件合并成一个chunk。

以下是一个配置示例，展示了如何根据文件大小来合并chunk：

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000, // 设置最小文件大小为30KB
      maxSize: 0, // 设置最大文件大小，0表示不限制
      minChunks: 1, // 设置最小chunks数量，1表示每个chunk至少包含一个模块
      maxAsyncRequests: 10, // 设置并发请求的最大数量
      maxInitialRequests: 5, // 设置初始并发请求的最大数量
      automaticNameDelimiter: '~', // 自动生成的chunk名称分隔符
      name: true, // 自动生成chunk名称
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10, // 缓存组优先级
          filename: 'vendors.js'
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
          filename: 'common.js'
        }
      }
    }
  }
};

在这个配置中，minSize设置为30KB，这意味着如果一个chunk的大小小于30KB，Webpack会尝试将其与其他chunk合并。maxSize设置为0，表示没有最大文件大小限制。maxAsyncRequests和maxInitialRequests分别控制并发请求和初始请求的最大数量。