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

标签 reactjs gatsby

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

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

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

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

最佳答案

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

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

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

关于reactjs - gatsby.js : How does content preload work?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49598548/

相关文章:

reactjs - 在 Gatsby Single Post 中渲染来自 WordPress 帖子内容的图像

javascript - 在使用 Chrome 进行分析时,React 的性能显着提高

javascript - 如何制作翻译运行时

reactjs - 外部api上任何前缀的CORS都需要400 header

javascript - 如何使用 Gatsby 在 Netlify 上获取多步骤表单

reactjs - 从 Lighthouse for Google Recaptcha 和 Google Maps API 解决 "Remove unused Javascript"的最正确方法

javascript - 如何处理在 enzyme 测试中包含 dom api 方法的 react ref 方法

reactjs - 在react中添加自定义方法到ref

Gatsby JS 文件过期 header

Gatsby 图像流体延伸到超出容器的垂直尺寸