预加载图像和字体与代码拆分冲突
preloading images and fonts conflict with code splitting
我正在使用 react +17.0 和 craco（模块打包器）
类似于this post，
当我尝试在我的 index.html 上 preload 一些 images/fonts 时：
<link rel='preload' as='image' href='assets/images/fooImage.png' crossorigin/>
我发现预加载不起作用，因为它在资产目录中需要相同的 image/font name 但代码 splitting 构建后我看到我的图像和字体将以这样的新名称重命名：
因此，预加载仍然不起作用。任何帮助都是合适的。
问题是什么？
模块捆绑器在构建版本上更改资产名称（向其添加随机数）。
所以 chrome 灯塔（或其他性能测试器）显示在预加载 link (index.html) 或任何相关文件中找不到这些资产。
那么，要解决什么问题？
当然，弹出或切换到另一个模块捆绑器（如 Webpack）并更改配置将解决问题，但我不能像许多项目那样这样做。
解决名字问题的标准方案：
将所有项目的资产（静态资产）如字体和图像从前端项目（客户端）转移到我服务器的 public 文件夹中，并在我的客户端使用它的 URL项目。
现在，它可以很容易地预加载或其他任何内容。
我正在使用 react +17.0 和 craco（模块打包器）
类似于this post， 当我尝试在我的 index.html 上 preload 一些 images/fonts 时：
<link rel='preload' as='image' href='assets/images/fooImage.png' crossorigin/>
我发现预加载不起作用，因为它在资产目录中需要相同的 image/font name 但代码 splitting 构建后我看到我的图像和字体将以这样的新名称重命名：
因此，预加载仍然不起作用。任何帮助都是合适的。
问题是什么？
模块捆绑器在构建版本上更改资产名称（向其添加随机数）。
所以 chrome 灯塔（或其他性能测试器）显示在预加载 link (index.html) 或任何相关文件中找不到这些资产。
那么，要解决什么问题？
当然，弹出或切换到另一个模块捆绑器（如 Webpack）并更改配置将解决问题，但我不能像许多项目那样这样做。
解决名字问题的标准方案：
将所有项目的资产（静态资产）如字体和图像从前端项目（客户端）转移到我服务器的 public 文件夹中，并在我的客户端使用它的 URL项目。
现在，它可以很容易地预加载或其他任何内容。