Next.js SSG Оптимизация изображений во время сборки ⇐ Html

[Гость]

Проблема
Я пытаюсь использовать оптимизацию изображений для локальных файлов внутри публичного каталога в

Код: Выделить всё

SSG

next.js Project [/b].
Был довольно много обсуждений на GitHub о введении возможности использования следующего/Image для оптимизации изображения во время сборки. Однако в данный момент компонент следующего/Image не работает со статическим экспортом сайта.
См. /обсуждения /19065 < /p>

Попытки решений /идеи < /h2>
Из того, что я мог найти, есть несколько разных действий Это можно взять: < /p>

1. Установите неоптимизированный флаг в следующем.config.js , чтобы полностью отключить оптимизацию изображений для всех следующих/image Components

, пока это избавится Из ошибок изображения теперь нептимизированы в каталоге вывода сборки. < /p>

2. Замените все теги < /code> со стандартным < /code> < /h4>
Как первый подход, это приводит к нептимизированию изображений. Если вы используете Eslint , вам также придется отключить правило no-img-element , чтобы избавиться от ошибок.
3. Используйте стороннюю библиотеку специально для Next.js, чтобы включить оптимизацию изображений во время сборки < /h4>
Я смог найти только две библиотеки, которые можно использовать для достижения этого. Рекомендуемый пакет в потоке GitHub называется следующим оптимизированным имиджами и, по-видимому, является более популярным решением этой проблемы. Однако, рассматривая историю репозиториев, становится очевидным, что этот проект был заброшен и больше не обновляется для новых версий next.js. Readme.md этого проекта упоминает о предстоящей третьей версии (найденной в канарейке), которая также не увидела нового коммита и за 3 года.
Другое. Проект, который я смог найти, называется Next-Image-Export-Optimizer . Этот пакет обновляется довольно часто, но также требуется множество шагов, которые необходимо настроить и требуют изменений на протяжении всего приложения. >
4. Реализуйте пользовательский загрузчик изображения < /h4>
Это один из рекомендуемых методов, упомянутых в выпуске GitHub. Однако я смог найти документацию о том, как это сделать, используя сторонние службы оптимизации изображений (например, CloudFlare). Мне неясно, можно ли использовать этот метод для локальной оптимизации изображений во время сборки. < /P>
5. Вручную оптимизируйте новые изображения перед созданием проекта

, возможно, можно изменить сценарий Build в файле Package.json для выполнения другого скрипта, который оптимизирует все недавно Добавлены изображения, хранящиеся за пределами публичной папки , и скопируют эти оптимизированные версии в папку Public . Изменение сценария Build < /code> внутри пакета. Я мог бы просто развернуть свое приложение с помощью SSR вместо использования команды Export . Но я хотел бы избежать запуска сервера только для функции оптимизации изображений next.js. Существуют более простые подходы для оптимизации изображений в каталоге/public/ проекта SSG при использовании команды Export для создания файлов.

Подробнее здесь: https://stackoverflow.com/questions/756 ... build-time