Next/Image的组件出现速度太慢了。

Question

35

我正在使用Next.js 10.0.7和next-images 1.7，大尺寸图片需要一些时间才能显示出来。

我已正确使用组件，如下所示，但我认为有解决我的问题的方法。

<Image
   height="600"
   width="800"
   src={
     'https://myImageURL.png'
   }
   alt="my image"
/>

一些问题：

- Charles Braga

3个回答

30

问题在于Image组件的默认行为是懒加载。您可以通过添加loading="eager"属性或添加priority={true}属性来改变这种行为，使其变为愿意立即加载。

推荐的方式是使用priority属性。

关于图像格式。 Webp比png更小，因此它加载速度更快。

- Gh05d

7

我认为他们在某些方面，特别是性能方面退步了。 - Armin Torkashvand

5

问题不在这里。问题在于 Next 在按需服务图像时所需的时间太长了。如果他们在构建时为每个定义的图像/屏幕大小提供静态生成选项并引用静态文件，就会更好。然后只需使用 NGINX 进行服务 - 不需要使用 Node。 - Will Squire

2

next/image 不会自动加载图片并优化加载吗？它不支持可接受的格式吗？ - Gangula

3

- Tim2.0

嘿，你能帮我看一下这个吗？https://dev59.com/MrDopogBymzxlkE8XI6g - crayonne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Hooper · Accepted Answer

我一直在遇到同样的问题，主要出现在Slider组件中。基本上，因为图片在Slider将其移动到视图中之前是不可见的，所以会有延迟，它不会立即显示，看起来很糟糕。

解决方案： 添加sharp包。问题来自于NextJS使用的默认图像处理器。我不知道对于OP来说是否好用，但在我的情况下，我没有完全阅读文档。有一个提示说：

next/image组件的默认加载程序使用“squoosh”库进行图像调整和优化。该库安装快速，适合开发服务器环境。对于生产环境，强烈建议通过运行

yarn add sharp

在您的项目目录中安装可选的sharp库。如果已经安装了sharp但无法解析，则可以通过NEXT_SHARP_PATH环境变量手动传递它的路径，例如NEXT_SHARP_PATH=/tmp/node_modules/sharp

添加了sharp后，我的图片处理速度更快，不再有明显的延迟。在添加priority={true}到每个图像之前，请尝试添加这个解决方案，因为它会影响网站性能。