根据文件大小判断 webpack 异步引入文件的打包方式
在 webpack 中使用异步导入时，文件默认会根据模块依赖关系打包。然而，如果你想根据文件大小决定是否合并小文件，可以配置 optimization.splitchunks 选项。
配置 splitchunks 选项
optimization.splitchunks 允许你定义代码分割策略。你可以设置：
配置示例
以下是根据文件大小合并 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'
}
}
}
}
};在这个配置中：
以上就是如何根据文件大小定制 Webpack 异步引入文件的打包方式？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
881
收藏
