通过 PoP 向 WordPress 网站添加代码分割功能

Desknumber

众所周知，WP网站通过Webpack实现代码分割并不容易。Leonardo 亲自动手，为名为 PoP 的开源框架实现了他自己的代码分割版本。
速度是当今任何网站的首要任务之一。使网站加载速度更快的一种方法是代码分割：将应用程序分割成可以按需加载的块 - 仅加载所需的 JavaScript，而不加载其他内容。基于 JavaScript 框架的网站可以通过流行的 JavaScript 捆绑器 Webpack 立即实现代码分割。但对于 WordPress 网站来说，事情就没那么容易了。首先，Webpack 并不是专门为与 WordPress 一起使用而构建的，因此设置它需要相当多的解决方法；其次，似乎没有任何工具可以为 WordPress 提供原生的按需资源加载功能。

鉴于 WordPress 缺乏合适的解决方案，我决定为PoP实现我自己的代码分割版本，PoP 是一个用于构建我创建的 WordPress 网站的开源框架。安装了 PoP 的 WordPress 网站本身就具有代码分割功能，因此不需 电子邮件营销列表 要依赖 Webpack 或任何其他捆绑器。在本文中，我将向您展示它是如何完成的，并解释根据框架架构的各个方面做出了哪些决策。最后，我将分析使用和不使用代码分割的网站的性能，以及使用自定义实现而不是外部捆绑器的优点和缺点。希望您旅途愉快！



为了解决第一步，我们需要生成一个资产依赖关系图，包括应用程序中的所有资产。资产必须递归地添加到此映射中 - 还必须添加依赖项的依赖项，直到不需要更多资产为止。然后，我们可以通过遍历资产依赖关系图来计算特定路由所需的所有依赖关系，从路由的入口点（即开始执行的文件或代码段）开始一直到最后一层。