gatsby.js:内容预加载如何工作?

gatsby.js: How does content preload work?

我确实有一个与 Gatsby.js 相关的问题,或者假设是基于 React 的静态博客系统。

在查看 Stripe, Google Cloud 等网页时,页面似乎是在点击时加载的。加载内容需要几毫秒,直到它显示出来。使用 Gatsby.js,当我看到网站时,内容立即可见。

问题:这是否意味着 Gatsby.js 将所有页面内容预加载到 DOM 中?我有一个页面,其中包含大约 10 个静态页面和 100 篇博文,每篇博文有 5-10 张图片。因此,我不确定系统的速度是否只对特定页面和内容大小有意义?权衡是:整页的初始页面加载(兆字节?)与每次点击的页面加载(千字节?)?

如能简单回答,将不胜感激!

Gatsby 在客户端呈现页面。因此,当它预取其他页面时,它不会预加载页面的 HTML & JS & 图像等,而是预取 just 数据(有时代码) 这些页面所必需的。这不包括这些页面的图像或可能需要的其他资源,例如字体文件。

这意味着 Gatsby 的预取非常轻量级,可以毫无问题地用于您的网站类型。

同样重要的是要记住,Gatsby 不会预取整个站点。它仅预取从用户所在页面链接到的页面。因此,即使在非常大的网站上,Gatsby 也不会预取那么多。