Компоненты Next/Image слишком медленные, чтобы отображаться

Question

Я использую Next.js 10.0.7 и next-images 1.7, и для появления больших изображений требуется несколько секунд.

Я правильно использую компоненты, вы можете видеть ниже, но я думаю, что есть решение моей проблемы.

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

Некоторые вопросы:

• Если я конвертирую все изображения в формат .webp, изображения будут отображаться быстрее?
• Есть ли решение этой проблемы?

Answer 1

У меня возникла проблема с той же проблемой, в основном в компонентах Slider. В основном, поскольку изображение находится за пределами экрана, пока слайдер не переместит его в поле зрения, возникает задержка, и оно не отображается в течение короткого времени, что выглядит неприятно.

Решение: Добавьте пакет. Проблема исходит от процессора изображений по умолчанию, который использует NextJS. Я не знаю, подходит ли это для OP, но в моем случае я не полностью прочитал документацию. Есть совет, который гласит:

Загрузчик по умолчанию для компонента next / image использует библиотеку 'squoosh' для изменения размера и оптимизации изображения. Эта библиотека быстро устанавливается и подходит для среды сервера разработки. Для производственной среды настоятельно рекомендуется установить дополнительную библиотеку Sharp, запустив

yarn add sharp

в каталоге вашего проекта. Если Sharp уже установлен, но не может быть разрешен, вы можете вручную передать путь к нему через переменную среды NEXT_SHARP_PATH, например, NEXT_SHARP_PATH= / tmp / node_modules / sharp

После добавления sharp, мои изображения обрабатывались намного быстрее, и заметной задержки больше нет. Я бы попробовал добавить это перед добавлением priority={true} к каждому изображению, так как это повлияет на производительность сайта.

Answer 2

Ваша проблема в том, что по умолчанию компонент изображения выполняет ленивую загрузку . Вы можете изменить это поведение на нетерпеливое , добавив loading опора вот так: loading="eager" или добавление priority={true}.

Рекомендуемым способом является использование priority.

Answer 3

1. обновить свой nextвыше чем 11.0.2-canary.20

2. yarn add sharp

3. пиво

https://github.com/vercel/next.js/issues/23637#issuecomment-885631610

https://nextjs.org/blog/next-11-1#оптимизация изображения