预加载图像和字体与代码分割冲突
预加载图像和字体与代码分割冲突
提问于 2021-08-09 10:12:44
我使用的是react +17.0和craco (模块邦德勒)
类似于this post，当我试图在上预加载时，在的index.html上加载一些图像/字体：
<link rel='preload' as='image' href='assets/images/fooImage.png' crossorigin/>
我发现预加载不起作用，因为它需要在资产目录中使用相同的图像/字体名称，但是在构建后使用代码拆分，我看到我的图像和字体将以如下的新名称重命名：
因此，预压仍然不能工作。任何帮助都是合适的。
Stack Overflow用户
回答已采纳
发布于 2021-08-18 13:33:59
有什么问题？
模块绑定器在构建的版本上更改资产名称(向它们添加随机数)。
因此，铬灯塔(或其他性能测试人员)表明，这些资产无法在预加载链接(index.html)或任何相关文件中找到。
，那么，要修复什么呢？
当然，弹出或切换到另一个模块包，如Webpack和改变配置将解决问题，但我不能像许多项目那样。
解决名称问题的标准解决方案：
将所有项目的资产(静态资产)(如字体和图像)从frontEnd项目(客户端)转移到我的服务器中的公用文件夹中，并在我的客户端项目中使用它的URL。
现在，它可以很容易地预先加载或其他任何东西。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68710349
复制相关文章
相似问题
腾讯云开发者
