webpack 异步引入的文件如何根据文件大小判断是否单独打包在一起？-灵析社区
一本正经写代码我有一个组件库 index.ts 入口文件 a.jsx 组件 b.jsx c.jsx .... 在入口文件中通过require.context('./', false, //.jsx$//, 'lazy') 方式异步引入文件， 这样每一个文件就分开打包，按需加载了。 但是现在存在文件就是 如果我有的组件很小只有1kb, 2kb，3kb这种小组件的我希望他能合并在一起，避免http请求过多？ 我希望文件能合并到200kb左右一个， 又能异步加载，该如何解决？
无敌美少女在"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"分别控制并发请求和初始请求的最大数量。