预加载图像和字体与代码拆分冲突
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项目。
现在,它可以很容易地预加载或其他任何内容。