根据文件大小判断 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。
以上就是如何根据文件大小定制 Webpack 异步引入文件的打包方式？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2661245.html
