image - 加快图像密集型 Gatsby.js 网站的部署和开发构建

Question

我正在使用 Gatsby.js和 gatsby-image建立一个目前有大约 300 张图片的网站。我遇到了2个问题:

gatsby develop和 gatsby build需要很长时间才能运行，因为 gatsby-image为网站上的每个图像生成多种分辨率和 svg 占位符图像。一旦完成预优化，这会带来很好的用户体验，但如果我需要重新构建，开发体验会非常缓慢。

我目前的解决方法是在开发过程中删除除少数图像之外的所有图像。

部署到 GitHub Pages 需要很长时间，因为图像太多(300 个基本图像 * 3 个分辨率 + 1 个 svg 表示)。尝试将网站部署到 GitHub 页面会导致超时。打算尝试部署到 Netlify，但我预计会出现同样的问题。我也不想每次在网站上进行更改时都必须重新上传图像。

我不觉得我的 <1000 张图片应该符合“图片重”的条件，但鉴于上传速度平庸，我需要一种增量上传它们的方法，而不是重新上传未更改的图片。

有没有办法将图像与 Gatsby 网站的其他构建分开上传？

我想也许我可以使用 AWS S3，手动选择在创建新部署时上传的构建文件夹中的哪些文件。

还有其他人处理过图像重的 Gatsby 网站吗？有什么建议可以加快我的构建和部署过程吗？

Answer 1

免责声明:我为 Netlify 工作

我们的一般建议是在本地进行图像优化并将这些文件 checkin GitHub，因为它可能需要比我们的 CI 允许的时间(15 分钟)更长的时间来完成所有工作，而且它是重复的。

还有一个 npm 模块可以让你缓存你在依赖项旁边制作的东西:https://www.npmjs.com/package/cache-me-outside可以在不滥用 GitHub 的情况下为您做到这一点(而不是滥用 Netlify 的缓存 :))