reactjs - gatsby.js : How does content preload work?

Question

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

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

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

如果有简单的答案，我们将不胜感激，谢谢!

Answer 1

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

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

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