Next.js Project [/b].
Было проведено довольно много обсуждений на GitHub о введении возможности использования следующего/Image для оптимизации изображения во время сборки. Однако в данный момент компонент следующего/Image не работает со статическим экспортом сайта.
См.: Https://github.com/vercel/next.js/discussions/19065 фрагмент/>
solreation это несколько разных действий, которые можно предпринять: < /p>
1. Установите неоптимизированный флаг в следующем.config.js , чтобы полностью отключить оптимизацию изображения для всех следующих/Image Компонентов
. Хотя это избавляется от ошибок, картинки теперь не оптимизированы в каталоге вывода сборки.
2. Замените все теги < /code> со стандартным < /code> < /h4>
Как первый подход, это приводит к нептимизированию изображений. Если вы используете Eslint , вам также придется отключить правило no-img-element , чтобы избавиться от ошибок.
3. Используйте стороннюю библиотеку специально для Next.js, чтобы включить оптимизацию изображений во время сборки < /h4>
Я смог найти только две библиотеки, которые можно использовать для достижения этого. Рекомендуемый пакет в потоке GitHub называется следующим оптимизированным имиджами и, по-видимому, является более популярным решением этой проблемы. Однако, рассматривая историю репозиториев, становится очевидным, что этот проект был заброшен и больше не обновляется для новых версий next.js. В Readme.md этого проекта упоминается предстоящая третья версия (найденная в канарейке), которая также не увидела новый коммит и через 3 года. Этот пакет обновляется довольно часто, но также требуется множество шагов, которые необходимо настроить, и требует изменений на протяжении всего приложения.
Мне не нравится идея замены компонента изображения некоторым специфическим для библиотеки компонента изображения. < /P>
4. Реализуйте пользовательский загрузчик изображения < /h4>
Это один из рекомендуемых методов, упомянутых в выпуске GitHub. Однако я смог найти документацию о том, как это сделать, используя сторонние службы оптимизации изображений (например, CloudFlare). Мне неясно, можно ли использовать этот метод для локальной оптимизации изображений во время сборки. < /P>
5. Вручную оптимизируйте новые изображения перед созданием проекта
Возможно, можно будет изменить сценарий Build в файле Package.json для выполнения другого скрипта, который оптимизирует все недавно добавленные изображения, хранящиеся за пределами публичной папки и копировать эти оптимизированные версии в публичную папку . Изменение сценария Build внутри файла Package.json может нарушить автоматическое развертывание с помощью сайтов хостинга, таких как Vercel. Но я хотел бы избежать запуска сервера только для функции оптимизации изображений next.js.
Поскольку эта проблема была в последний раз обновлялась на Github некоторое время назад, мне было интересно Если есть более простые подходы для оптимизации изображений в Code/Public/Code> Project Project .>
Проблема Я пытаюсь использовать [b] оптимизацию изображений для локальных файлов внутри публичного каталога [/b] в [b][code]SSG[/code] Next.js Project [/b]. Было проведено довольно много обсуждений на GitHub о введении возможности использования следующего/Image для оптимизации изображения во время сборки. Однако в данный момент компонент следующего/Image не работает со статическим экспортом сайта. См.: Https://github.com/vercel/next.js/discussions/19065 фрагмент/> solreation это несколько разных действий, которые можно предпринять: < /p> [h4] 1. Установите неоптимизированный флаг в следующем.config.js , чтобы полностью отключить оптимизацию изображения для всех следующих/Image Компонентов [/h4] . Хотя это избавляется от ошибок, картинки теперь не оптимизированы в каталоге вывода сборки. [h4] 2. Замените все теги < /code> со стандартным < /code> < /h4> Как первый подход, это приводит к нептимизированию изображений. Если вы используете Eslint , вам также придется отключить правило no-img-element , чтобы избавиться от ошибок. 3. Используйте стороннюю библиотеку специально для Next.js, чтобы включить оптимизацию изображений во время сборки < /h4> Я смог найти только две библиотеки, которые можно использовать для достижения этого. Рекомендуемый пакет в потоке GitHub называется следующим оптимизированным имиджами и, по-видимому, является более популярным решением этой проблемы. Однако, рассматривая историю репозиториев, становится очевидным, что этот проект был заброшен и больше не обновляется для новых версий next.js. В Readme.md этого проекта упоминается предстоящая третья версия (найденная в канарейке), которая также не увидела новый коммит и через 3 года. Этот пакет обновляется довольно часто, но также требуется множество шагов, которые необходимо настроить, и требует изменений на протяжении всего приложения. Мне не нравится идея замены компонента изображения некоторым специфическим для библиотеки компонента изображения. < /P> 4. Реализуйте пользовательский загрузчик изображения < /h4> Это один из рекомендуемых методов, упомянутых в выпуске GitHub. Однако я смог найти документацию о том, как это сделать, используя сторонние службы оптимизации изображений (например, CloudFlare). Мне неясно, можно ли использовать этот метод для локальной оптимизации изображений во время сборки. < /P> 5. Вручную оптимизируйте новые изображения перед созданием проекта [/h4] Возможно, можно будет изменить сценарий Build в файле Package.json для выполнения другого скрипта, который оптимизирует все недавно добавленные изображения, хранящиеся за пределами публичной папки и копировать эти оптимизированные версии в публичную папку . Изменение сценария Build внутри файла Package.json может нарушить автоматическое развертывание с помощью сайтов хостинга, таких как Vercel. Но я хотел бы избежать запуска сервера только для функции оптимизации изображений next.js. Поскольку эта проблема была в последний раз обновлялась на Github некоторое время назад, мне было интересно [b] Если есть более простые подходы для оптимизации изображений в Code/Public/Code> Project Project [/b].>
Мобильная версия