加快图像重 Gatsby.js 网站的部署和开发构建

Question

我正在使用Gatsby.js并gatsby-image构建一个网站，目前有大约 300 张图片。我遇到了两个问题：

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

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

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

我不觉得我的 <1000 张图像应该被称为“图像重”，但是由于上传速度很差，所以我需要一种方法来增量上传它们，而不是重新上传没有改变的图像。

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

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

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

Answer 1

免责声明：我为 Netlify 工作

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

还有一个 npm 模块，可以让你缓存你所做的东西以及依赖项： https: //www.npmjs.com/package/cache-me-outside，它可以为你做到这一点，而不会滥用 GitHub（而不是滥用 Netlify）缓存 ：））