大家好，我正在开发一个大型react应用程序，我的新任务是优化它的性能，以在灯塔中获得更好的性能分数。我遇到的最大问题是关于lcp(最大内容完整油漆)，现在被称为我们页面的元素lcp是一个有图像背景的div，我读过很多关于如何优化图像的文章，但都是关于静态资产的，这不是我的选择，我的应用程序对元素使用动态渲染，而且所有图像都是动态的，没关系，我只想解决的问题是如何在脚本仍然不解析的情况下预加载背景图像，如果我想明确表示，当渲染图像的元素没有绘制在屏幕上时，我想用webpack预加载一个url，doe的webpack支持这样的东西吗？我以前读过一些关于react应用主捆绑包动态导入的内容
我需要webpack开始保护我的url并缓存响应(作为它的默认行为)，当我需要url时，它会立即加载并绘制在屏幕上
好吧，如果您使用的是纯客户端react，那么您可以尝试链接rel预连接。它将预连接到给定的域，并且应该提高性能。您也可以在谷歌上搜索链接relprefetch和链接relpreload。
在使用react客户端时，其他选项是，如果图像链接是来自服务器的API响应(JSON等)的结果，则使用react-query等方法使用预取