在 NextJS 中预加载图像答案

【问题标题】：Preloading Images in NextJS在 NextJS 中预加载图像
【发布时间】：2020-11-01 18:14:38
【问题描述】：

我们正在使用带有静态站点生成器的 NextJS 9.3.2 框架，即 SSG，并引入了 Google Lighthouse 6 最大内容绘制 (LCP) 正在影响我的站点性能得分。大多数网站在首屏内容中都有一个英雄形象。

所以我希望预加载图像以减少 LCP 的时间。你们能指导我如何使用 SSG 在 NextJS 中预加载大英雄图像吗？

【问题讨论】：

您可以查看next-optimized-images 和lqip-loader。如果您想更好地控制构建过程，我写了这篇文章Create a Lazy-Loading Image Component with React Hooks，我简要分享了如何在 Next 的getStaticProps 中的 sharp 的帮助下创建自己的 LQIP（低质量图像占位符）并通过props传递给页面组件。
感谢您的回复，但我们的客户不同意在主图像加载之前将低质量图像图像放置为占位符，我们需要预渲染主英雄图像以减少 LCP
预渲染主英雄意思是把它变成内联base64？
你的意思是说在构建时使用sharp生成webp图像格式，因为Site是SSG，然后使用base64图像内联图像。如果我错了，请纠正我。
我只是问你“预渲染主要英雄形象”是什么意思？

【解决方案1】：

您应该升级您的Next.js 并使用Image Component。它将做以下伟大的事情 -

实施它可以看到灯塔分数的大幅上升。

虽然它有一些限制，例如静态导出和占位符图像目前不可用，但它仍然很好用。对于占位符图像，您可以使用一些额外的库，例如 https://github.com/joe-bell/plaiceholder

【讨论】：

缺乏 SSG 支持 /next export 使其无法在这种情况下使用
不幸的是，有一个糟糕的缓存策略无法更改：github.com/vercel/next.js/issues/19914，所以很长一段时间你可能想坚持使用简单的<img >
澄清一下，使用next export 时仅不支持默认加载器 - 使用cloud provider or a custom loader 仍然有效。从那时起，image optimization caching 也得到了改进，不应再成为不使用 next/image 的威慑。
@juliomalves 您是否使用自定义加载器在导出时构建\创建图像大小\webp？ twitter.com/rauchg/status/1402613436081528836
next/image 还不支持构建时优化。

【解决方案2】：

在包含需要预加载的英雄图像的组件中，使用next/head 并简单地预加载该图像。

我不会使用下一个/图像。它比其他动态服务器图像大小的解决方案慢。

那是另一回事。您应该 load images based on the browser size 使用内置的 HTML 功能。

【讨论】：