Ускорение развертывания и разработки для образа тяжелого сайта Gatsby.js

Question

Я использую Gatsby.js и gatsby-image для создания веб-сайта, на котором в настоящее время размещено около 300 изображений. Я сталкиваюсь с 2 проблемами:

1. gatsby develop и gatsby build занимают много минут, потому что gatsby-image генерирует несколько разрешений и svg-заполнителей для каждого изображения на сайте. Это обеспечивает отличный пользовательский опыт после предварительной оптимизации, но очень медленный опыт разработки, если мне когда-либо понадобится пересобрать.

Мой обходной путь - удалить все, кроме нескольких изображений, во время разработки.

2. Развертывание на страницах GitHub занимает слишком много времени с таким количеством изображений (300 базовых изображений * 3 разрешения + 1 представление SVG). Попытка развернуть сайт на страницах GitHub приводит к тайм-ауту. Собираюсь вместо этого попытаться развернуть Netlify, но я ожидаю ту же проблему. Я также не хочу перезагружать изображения каждый раз, когда я делаю изменения на сайте.

Я не чувствую, что мои <1000 изображений должны квалифицироваться как «изображения тяжелые», но, учитывая низкую или посредственную скорость загрузки, мне нужен способ их постепенной загрузки, а не повторной загрузки изображений, которые не изменились . </strong>

Есть ли способ загрузить изображения отдельно от остальной части сборки для веб-сайта Gatsby?

Я думаю, что, возможно, мне удастся получить что-то, работающее с AWS S3, вручную выбирая, какие файлы из папки сборки я загружаю при создании нового развертывания.

Кто-нибудь еще занимался обработкой сайта Гэтсби, насыщенного изображениями? Любые рекомендации по ускорению процесса сборки и развертывания?

Answer 1

См. другой ответ от Netlify : меньшие исходные изображения (как упомянуто @fool) или выгрузка в службу, такую ​​как Cloudinary или Imgix .

Answer 2

Отказ от ответственности: я работаю на Netlify

Наша общая рекомендация состоит в том, чтобы выполнить оптимизацию изображения локально и проверить эти файлы в GitHub, поскольку это может занять больше времени, чем наш CI позволяет вам (15 минут) выполнять всю эту работу, и это повторяется.

Существует также модуль npm, который позволяет вам кэшировать то, что вы сделали вместе с вашими зависимостями: https://www.npmjs.com/package/cache-me-outside, который может сделать это для вас, не злоупотребляя GitHub (вместо этого злоупотребляя кешем Netlify:))