Понимание процесса оптимизации next/image в Next.js
В настоящее время я работаю с Next.js и компонентом next/image для рендеринга изображений. Я использовал его для оптимизации загрузки изображений в своем приложении, но мне интересны технические детали того, как он работает «под капотом». В частности, мне хотелось бы знать, выполняет ли он какие-либо вызовы API в процессе оптимизации.
Вот что я понимаю на данный момент:
- next/image предоставляет такие функции, как отложенная загрузка, адаптивные изображения и выбор формата для оптимизации загрузки изображений.
- В процессе сборки он генерирует несколько версий изображений разных размеров и форматов.
- Он выбирает наиболее подходящий формат изображения на основе поддержки браузера.
- По умолчанию он поддерживает отложенную загрузку, и вы можете указать размеры адаптивного изображения.
Однако мне не удалось найти информацию о том, выполняет ли next/image какие-либо вызовы API во время процесса оптимизации. Моя цель — получить более глубокое понимание его внутренней работы. Будем очень признательны за любые идеи или ресурсы по этой теме.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Когда у вас есть такой код:
<Image width = {180} height = {37} src = "/test.jpg" />
Когда компонент визуализируется, загрузчик по умолчанию изменит URL-адрес источника на /_next/image?url=/test.jpg&w=384&q=75, который, в свою очередь, содержит все параметры, необходимые для оптимизации, такие как качество и ширина. На стороне сервера NextJS затем оптимизирует и обрезает/изменяет размер изображения с помощью Sharp. Эти оптимизированные изображения затем кэшируются, чтобы последующие запросы к тому же изображению не требовали повторной оптимизации. Если вы размещаете хостинг на Vercel, он будет использовать собственную службу оптимизации изображений Vercel.
Обратите внимание, что также можно создать собственный загрузчик для оптимизации изображений. Это позволит вам использовать любую службу оптимизации изображений, которую вы захотите. Пользовательские загрузчики реализуются путем простого предоставления компоненту изображения функции, которая принимает исходный код, ширину, качество и возвращает URL-адрес, по которому можно загрузить оптимизированное изображение. Обычно вы указываете качество и ширину в качестве параметров URL-адреса, как это делает загрузчик по умолчанию.
const imageLoader = ({ src, width, quality }) => {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
Процесс оптимизации происходит и в производстве, и в разработке, или только в производстве?
Оба добавили это в ответ.
@FINDarkside Я ценю объяснение того, как Next.js и компонент next/image работают внутри. Теперь мне интересно узнать об услуге оптимизации изображений, предоставляемой Vercel. Если я размещаю свое приложение Next.js на Vercel, будет ли оно автоматически использовать эту службу оптимизации изображений для изображений, созданных компонентом next/image? Я спрашиваю, потому что планирую запустить веб-приложение со значительным количеством изображений, возможно, тысячами. Понимание того, используется ли служба оптимизации изображений Vercel, поможет мне рассчитать потенциальные затраты и соответствующим образом оптимизировать свой бюджет.
Да, если вы размещаете хостинг на Vercel, будут применяться их цены. vercel.com/docs/image-optimization/limits-and-pricing#pricing
Вы говорите о сценарии, в котором вы импортировали файл в код и передали его
Image, или о сценарии, в котором у вас есть изображение по URL-адресу и вы делаете<Image src = {url} />?