webpack4 optimization.splitChunks的注意点

最新推荐文章于 2026-04-25 13:27:42 发布

原创最新推荐文章于 2026-04-25 13:27:42 发布 · 9.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

当前文章被收录于：

javascript

26 篇文章 0 人学习

订阅专栏查看详情

webpack

当前文章被收录于：

webpack

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了在使用webpack4的optimization.splitChunks进行代码分离时遇到的问题，重点强调了新生成的chunk大小需超过30kb（未压缩前）才能成功分离的细节，以及如何通过增加无效代码达到这一目标。

写了个共用的chunk，没有办法实现代码分离。
搞了一个多小时，最后发现官方文档的这句话，吐血了！

webpack will automatically split chunks based on these conditions:

New chunk can be shared OR modules are from the node_modules folder
New chunk would be bigger than 30kb (before min+gz)
Maximum number of parallel requests when loading chunks on demand would be lower or equal to 5
Maximum number of parallel requests at initial page load would be lower or equal to 3

New chunk would be bigger than 30kb (before min+gz)！
New chunk would be bigger than 30kb (before min+gz)！
New chunk would be bigger than 30kb (before min+gz)！

重要的事说三遍。

在chunk里故意写了一些无效代码，扩充到30Kb以后，终于分离成功。