静态站点生成器 Gatsby 创建者 Kyle Mathews 访谈

  • David Iffland
  • 谢丽

2017 年 7 月 16 日

话题:JavaScript性能调优语言 & 开发

在一系列创业之后,Kyle Mathews 辞掉了工作,开始全身心投入到他的其中一个业余项目上,这个项目就是Gatsby,该项目的目标是让开发人员可以“不需要使用 React.js 之外的任何东西”就可以创建一个网站。

从那时到现在,Gatsby 已经达到了 1.0 版本。它已经发展成为一整套的工具集,包括一个插件架构、一个基于 GraphQL 的构建时数据层和渐进式 Web 应用(PWA)支持。它包含一个 CLI 及一个基于 Babel 和 webpack 的预置构建过程。

为了深入了解 Gatsby 的速度,Mathews 编写了一个Instagram Clone,旨在展示 Gatsby 如何使用谷歌的PRPL 模式尽快获取屏幕像素。这个速度包括创建“一个静态 HTML 渲染每个页面,尽可能加快初次加载的速度”。此外,据 Mathews 介绍,预取帮助完成了开销较大的工作。

Gatsby 要快得多,因为它会在客户端和客户端转换中进行资源预取。有多个人已经表示,浏览 Gatsby 网站就感觉是在浏览本地站点。

在接受 InfoQ 采访时,Mathews 介绍了项目的动机及其未来的发展方向。

InfoQ:Gatsby 试图解决什么问题?

Kyle Mathews:Gatsby 试图解决的问题是,2017 年网站框架应该是个什么样子。大多人都采用 Web 1.0/2.0 时代的 Web 框架,因为它们是很棒、很成熟的框架,但是,它们不是针对如今这个庞大的 Web 而构建的。如今,数以十亿计的人是在低端的智能手机上通过不可靠的网络来访问 Web。

要想让一个网站可以在智能手机上快速的浏览,它必须在相当大的程度上独立于服务器;可以预取代码、数据,然后在客户端上渲染。

就提供优秀的 Web 体验而言,智能手机和浏览器已经足够快了——我们只是受制于旧有的框架,它们的基础是快速的有线网络,它们要求我们口袋里的超级计算机必须等待并不可靠的蜂窝网络。

Gatsby 内置了大量的信息,可以使网站快速加载,不管网络条件如何,浏览网站时都会觉得相当得快。

对于移动 Web 而言,响应式设计是一个重要的步骤,但是,我们需要转而采用一种站点在客户端渲染并能智能地完成内容预取的模型。

InfoQ:与其他静态站点生成器相比,基于 React 或非基于 React 的,它又如何呢?

Mathews:它继承了传统静态网站生成器的所有优点,例如,卓越的性能、较高的安全性、较低的扩展成本和较好的开发者体验(数据库迁移?随便什么)。Gatsby 的 v1 版本为静态网站生成器开辟了新的天地,提供了与 CMS 的丰富集成,如 Contentful、Wordpress、Drupal,及一整套的功能,默认开启,让你的网站快得让人吃惊——基于路由的代码分割、服务工作线程、离线支持等等。

在开发者体验方面,其他所有的静态网站生成器针对现代 CSS 和 JS 都提供了很少的帮助。它们将自己限定在把(通常是 markdown)编译成 HTML,然后由你自己配置一个现代构建 / 资源通道。Gatsby 100% 开箱即用,让你可以使用最新的工具和技术构建复杂的网站。

InfoQ:长远来看,Gatsby 会是什么样子?

Mathews:Gatsby 的发展势头很好,只用了 2 年时间就已经成为排名第 4 的静态网站生成器。有许多已经上线或正在开发的高性能网站都是基于 Gatsby。最近,我们批准了 200 名核心贡献者,Gatsby 的下载量超过 50 万。对于 Gatsby 的长期性,其关键是建立一个可持续的业务模型,为 Gatsby 的核心开发提供资金支持,以及建立一个富有活力的开源社区,构建和维护插件及与数据源的集成。

InfoQ:下一步有什么计划?

Mathews:我个人的关注点是如何为 Gatsby 的核心开发提供资金支持。该项目的重心是构建与更多 API、CMS 和数据库的集成,简化现有站点向 Gatsby 的迁移,或者基于一个现代化的网站框架重建。Gatsby 已经可以用于生产环境,构建复杂快速的网站。下一步,我考虑简化数据导入到 Gatsby 的过程,不管数据现在在哪里。

虽然已经快 2 岁了,但对于这个项目而言,它还是处于早期阶段,当然会有许多必要的部分添加进来。插件架构应该允许社区来查漏补缺,截至目前,有大约 35 个这样的插件,涉及 SASS、TypeScript、Preact 等技术。

要了解更多信息,请检出GitHub 库或访问Gatsby 首页

查看英文原文:Q & A With Kyle Mathews, Creator of React-Based Static Site Generator Gatsby

JavaScript性能调优语言 & 开发