如何根据文件大小定制 Webpack 异步引入文件的打包方式？
在 webpack 中使用异步导入时，文件默认会根据模块依赖关系打包。然而，如果你想根据文件大小决定是否合并小文件，可以配置 optimization.splitchunks 选项。
配置 splitchunks 选项
optimization.splitchunks 允许你定义代码分割策略。你可以设置：
- minsize：最小文件大小，低于此大小的文件将合并。
- maxsize：最大文件大小，超过此大小的文件将不合并。
- maxasyncrequests：并发请求的最大数量。
配置示例
以下是根据文件大小合并 chunk 的配置示例：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000, // 设置最小文件大小为 30KB
maxSize: 0, // 设置最大文件大小为无限制
maxAsyncRequests: 10, // 设置并发请求的最大数量
maxInitialRequests: 5, // 设置初始并发请求的最大数量
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10, // 设置 vendors 缓存组的优先级为 -10
filename: 'vendors.js'
},
default: {
minChunks: 2,
priority: -20, // 设置 default 缓存组的优先级为 -20
reuseExistingChunk: true,
filename: 'common.js'
}
}
}
}
};
在这个配置中：
- 当 chunk 大小小于 30kb 时，webpack 会尝试将其与其他 chunk 合并。
- 没有最大文件大小限制。
- 限制最大并发请求数量为 10。