下载掌阅APP，畅读海量书库
立即打开
问题
像博客和在线商店这样内容丰富的网站需要高效地提供大量复杂的内容。像create-react-app这样的工具不适合这类网站，因为它将所有内容都打包成了一个大JavaScript包，浏览器必须先下载完这个JavaScript包才能显示内容。
解决方案
如果你正在构建一个内容丰富的网站，那么可以考虑使用Gatsby。
Gatsby专注于以最高效的方式加载、转换和传递内容。它可以生成网页的静态版本，这意味着Gatsby网站的响应速度通常比那些用create-react-app构建的网站要快得多。
Gatsby有许多插件，它们可以有效地从静态本地数据、GraphQL源和第三方内容管理系统（如WordPress）加载和转换数据。
你可以全局安装gatsby，也可以通过npx命令来运行它：
gatsby new命令在名为 my-app 的子目录中创建新项目。第一次运行这个命令时，它会询问使用哪个包管理器：yarn还是npm。
要启动应用程序，请先切换到新目录，然后以开发模式运行它：
你可以在 http://localhost:8000 上打开应用程序，如图1-3所示。
图1-3： http://localhost:8000 上的Gatsby页面
Gatsby项目结构简单明了，如图1-4所示。
图1-4：Gatsby所创建的项目的目录结构
应用程序的核心代码位于 src 目录下。Gatsby应用中的每个页面都有对应的React组件。下面是 index.js 中默认应用程序的首页：
无须为页面创建路由，因为每个页面组件会自动分配一个路由。例如，
src/pages/using-typescript.tsx
中的页面可以在
using-typescript
中自动获取
。这种方法有很多优点。首先，如果有很多页面，你就无须手动管理它们的路由。其次，这意味着Gatsby有更快的传输速度。为什么会这样呢？我们来看如何为Gatsby应用生成生产环境。
如果你关闭了Gatsby开发服务器
，那么可以用以下代码生成一个生产环境：
这个gatsby build命令会创建一个 public 目录。而正是这个 public 目录体现了Gatsby的真正魅力。对于每个页面，你可以找到对应的两个文件。首先是一个已生成的JavaScript文件：
可以看到， using-typescript.tsx 的代码只有1389字节，加上核心框架，足够构建JavaScript页面了。它不是create-react-app生成的那种把一切内容都打包在一起的脚本文件。
其次，每个页面都有一个子目录，其中包含生成的HTML文件。对于 using-typescript.tsx ，这个文件被称为 public/using-typescript/index.html ，其中包含一个静态生成的网页版本。它包含了 using-typescript.tsx 组件将动态渲染的HTML。在网页的末尾，它会加载网页的JavaScript版本以生成动态内容。
这种文件结构意味着Gatsby页面的加载速度与静态页面一样快。使用捆绑的react-helmet库，你也可以生成带有你网站的附加特性的＜meta＞标题标签。这两个特性对于搜索引擎优化（Search Engine Optimization，SEO）来说都是非常友好的。
讨论
如何在Gatsby应用中引进动态内容呢？你可以使用无界面内容管理系统（Headless Content Management System，Headless CMS）、GraphQL服务、静态数据源或其他方式。幸运的是，Gatsby有许多插件，它们允许你将数据源连接到自己的应用程序，然后将其他格式（如Markdown）的内容转换为HTML。
你可以在Gatsby网站（ https://oreil.ly/9GwLv ）上找到一套完整的插件。
大多数情况下，在创建项目时你会自己选择所需的插件。为了帮你更快起步，Gatsby还支持启动模板。模板提供了应用程序的初始结构和配置信息。我们之前创建的应用程序使用了默认的启动器模板，它非常简单。应用程序根目录下的 gatsby-config.js 文件会配置应用程序用到的所有插件。
然而，这里有大量的Gatsby启动器可用，这些启动器都是预先配置好的，可以创建连接到各种数据源的应用程序，并具有预先配置的SEO、样式、离线缓存、渐进式Web应用（PWA）等。无论你正在创建什么样的富文本应用程序，都会有一个贴近你需求的启动器。Gatsby网站上有更多关于Gatsby启动器（ https://oreil.ly/vwUd8 ）的信息，以及非常有用的工具和命令的速查表（ https://oreil.ly/f7xbF ）。
你可以从GitHub网站（ https://oreil.ly/DzLSy ）下载本解决方案的源代码。