Блог

Главная - Вопросы по программированию - Компоненты Next / Image отображаются слишком медленно

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

#next.js #nextjs-image

#next.js #nextjs-изображение

Вопрос:

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

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

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

Несколько вопросов:

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

Ответ №1:

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

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

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

yarn add sharp

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

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

Комментарии:

1. Привет, Джеймс, вы имели в виду, что добавили sharp в свой пакет приложений или запустили yarn add sharp как часть команды deploy?

2. Эй, Бишал, я побежал yarn add sharp добавлять sharp в свой пакет проектов, и это значительно ускорило для меня изображения.

3. Вау, это значительно улучшило производительность! Спасибо, Джеймс!

4. Большой человек! Отличный трюк!

Ответ №2:

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

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

О формате изображения. Webp меньше, чем png, поэтому он будет загружаться быстрее.

Комментарии:

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

2. Проблема не в этом. Проблема в том, сколько времени требуется Next для обслуживания изображения по требованию. Было бы гораздо лучше предложить опцию статической генерации для каждого определенного размера изображения / экрана во время сборки и ссылаться на статический файл. Затем просто используйте NGINX — нет необходимости в Node.

3. не next/image загружает изображение автоматически в приемлемом формате и не оптимизирует загрузку?

Ответ №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#image-optimization