如何在反应头盔中预加载最大内容绘制图像答案

【问题标题】：How to preload largest-contentful-paint image in react helmet如何在反应头盔中预加载最大内容绘制图像
【发布时间】：2021-08-09 04:43:46
【问题描述】：

我在灯塔收到了这个警告

我尝试按照“了解更多”链接告诉我的操作，并在图片的头部包含一个预加载标签，但我仍然收到警告

我试过这个预加载标签，当我右键单击图像并选择“在新标签页中打开”时，该网址是浏览器中的那个

<link rel="preload" as="image" href={`https://example.com:8080/src/assets/images/example.webp`} />

图像只是像import banner from "images/banner-large.png";这样被导入到jsx组件中，然后使用像 <img src={example} className="w-100 banner-img" alt="Description" />这样的图像标签进行渲染

我还使用img-optimizer-loader对我的图像进行网络优化，并在我的 webpack 配置中将它们转换为 webp，如下所示

{
    test: /\.(gif|png|jpe?g|webm|webp)$/i,
    use: [
      {
        loader: "img-optimize-loader",

        options: {
          compress: {
            // This will transform your png/jpg into webp.
            webp: {
              quality: 75,
            },
            disableOnDevelopment: true,
          },
          name: "[path][name].[ext]",
        },
      },
    ],
  },

值得注意的是，我像这样导入图像

import image from 'src/assets/images/example.png'

但是因为img-optimize-loader，我所有的图片在构建中都转换成webp，显示的就是webp图片。

【问题讨论】：

通常情况下，我不会预加载图像。相反，我将显示一个模糊的占位符（分辨率超低，如 20x80，文件大小小到可以嵌入到 HTML 文件中），然后预取实际图像。图像准备好后，将占位符替换为实际图像，或在其上进行渲染。
disableOnDevelopment: true - 这不会停止转换图像还是将其设置为生产？您是否检查过请求是针对.webp 图像而不是原始.png？
@GrahamRitchie 出于某种原因，当我在开发中的新选项卡中打开图像时，它是一个 webp
@MatthewKwong 还有其他一些我想做的地方。你有一个例子的链接吗
我不确定您使用的是哪个工具链。如果您使用的是 Gatsby，则可以使用一个插件。如果您使用的是 CRA，那么您必须自己实现它

标签： reactjs webpack preload lighthouse react-helmet

【解决方案1】：

在您的图像组件中导入并使用Helmet：

import { Helmet } from 'react-helmet'
import example from "images/example.png";


function Image () {
  return (
    <Helmet>
      <link rel="preload" as="image" href={example}>
    </Helmet>
  )
}

【讨论】：

谢谢，但不幸的是，这并没有解决问题，我注意到我之前没有指定这个，所以我添加了一个编辑说明我如何导入 png 或 jpeg，但是插件可以转换它们到网页
如果您对图像使用动态导入然后使用webpackPreload 预加载它会怎样？例如import(/* webpackPreload: true */ './path/to/image.png');