Gatsby 静态网站搭建全过程 (3)—运行流程

Gatsby

Gatsby 是一个为 React 打造的快如闪电的现代化站点生成器-静态网站。

Gatsby构建过程概述

盖茨比有两种网站编译模式：

• 开发-使用gatsby develop命令运行
• 构建-运行 gatsby build

该gatsby develop命令不会执行该命令所执行的某些生产构建步骤gatsby build。相反，它会启动开发服务器，您可以使用它在浏览器中预览站点（例如运行时）。当您运行gatsby build（构建时间）时，将没有可用的浏览器，因此您的站点需要能够保护对基于浏览器的API的调用。即对浏览器对象的判断。

了解gatsby develop（运行时）

gatsby develop 在默认启动情况运行如下

success open and validate gatsby-configs - 0.051 s
success load plugins - 0.591 s
success onPreInit - 0.015 s
success initialize cache - 0.019 s
success copy gatsby files - 0.076 s
success onPreBootstrap - 0.021 s
success source and transform nodes - 0.082 s
success Add explicit types - 0.018 s
success Add inferred types - 0.106 s
success Processing types - 0.080 s
success building schema - 0.266 s
success createPages - 0.014 s
success createPagesStatefully - 0.067 s
success onPreExtractQueries - 0.017 s
success update schema - 0.034 s
success extract queries from components - 0.222 s
success write out requires - 0.044 s
success write out redirect data - 0.014 s
success Build manifest and related icons - 0.110 s
success onPostBootstrap - 0.130 s
⠀
info bootstrap finished - 3.674 s
⠀
success run static queries - 0.057 s — 3/3 89.08 queries/second
success run page queries - 0.033 s — 5/5 347.81 queries/second
success start webpack server - 1.707 s — 1/1 6.06 pages/second

了解gatsby build（构建时间）

gatsby build使用生产就绪型优化来创建您网站的版本，例如打包您网站的配置，数据和代码，并创建所有静态HTML页面，这些页面最终将被重新合成为React应用程序。

success open and validate gatsby-configs - 0.062 s
success load plugins - 0.915 s
success onPreInit - 0.021 s
success delete html and css files from previous builds - 0.030 s
success initialize cache - 0.034 s
success copy gatsby files - 0.099 s
success onPreBootstrap - 0.034 s
success source and transform nodes - 0.121 s
success Add explicit types - 0.025 s
success Add inferred types - 0.144 s
success Processing types - 0.110 s
success building schema - 0.365 s
success createPages - 0.016 s
success createPagesStatefully - 0.079 s
success onPreExtractQueries - 0.025 s
success update schema - 0.041 s
success extract queries from components - 0.333 s
success write out requires - 0.020 s
success write out redirect data - 0.019 s
success Build manifest and related icons - 0.141 s
success onPostBootstrap - 0.164 s
⠀
info bootstrap finished - 6.932 s
⠀
success run static queries - 0.166 s — 3/3 20.90 queries/second
success Generating image thumbnails — 6/6 - 1.059 s
success Building production JavaScript and CSS bundles - 8.050 s
success Rewriting compilation hashes - 0.021 s
success run page queries - 0.034 s — 4/4 441.23 queries/second
success Building static HTML for pages - 0.852 s — 4/4 23.89 pages/second
info Done building in 16.143999152 sec

开发和构建之间的差异

以下输出显示了以上两个示例之间的区别：

success open and validate gatsby-configs - 0.051 s
success load plugins - 0.915 s
success onPreInit - 0.021 s
+ success delete html and css files from previous builds - 0.030 s
success initialize cache - 0.034 s
success copy gatsby files - 0.099 s
success onPreBootstrap - 0.034 s
success source and transform nodes - 0.121 s
success Add explicit types - 0.025 s
success Add inferred types - 0.144 s
success Processing types - 0.110 s
success building schema - 0.365 s
success createPages - 0.016 s
success createPagesStatefully - 0.079 s
success onPreExtractQueries - 0.025 s
success update schema - 0.041 s
success extract queries from components - 0.333 s
success write out requires - 0.020 s
success write out redirect data - 0.019 s
success Build manifest and related icons - 0.141 s
success onPostBootstrap - 0.130 s
⠀
info bootstrap finished - 3.674 s
⠀
success run static queries - 0.057 s — 3/3 89.08 queries/second
success run page queries - 0.033 s — 5/5 347.81 queries/second
- success start webpack server - 1.707 s — 1/1 6.06 pages/second
+ success Generating image thumbnails — 6/6 - 1.059 s
+ success Building production JavaScript and CSS bundles - 8.050 s
+ success Rewriting compilation hashes - 0.021 s
+ success Building static HTML for pages - 0.852 s — 4/4 23.89 pages/second
+ info Done building in 16.143999152 sec

构建使用现代功能（例如服务器端渲染，基于路由的代码拆分）来编译你的程序，以实现出色的开箱即用性能。

在构建过程中（运行gatsby build或时gatsby develop），将提取数据并将其合并到GraphQL模式中，其中包含站点所需所有数据的静态快照。

就像以上显示的

• gatsby develop下是bootstrap和webpack server阶段
• gatsby build 是bootstrap和 build阶段

从总体上来讲，在整个引导和构建过程中发生了以下：

1. 从Node对象中推断出develop还是build
2. 页面是根据你的js/React组件创建的
3. 提供Graphql查询并运行，以提供页面数据
4. 静态文件被创建并输入到public目录下

步骤详细介绍

1. open and validate gatsby-configs：打开gatsby-config.js，校验配置文件
2. load plugins: 加载所有的插件以及运行
3. onPreInit：生命周期执行，执行期间调用的第一个API在插件初始化后即缓存初始化和引导准备之前运行
4. delete html and css files from previous builds：在开发和构建不同的是，构建阶段会删除以前的html、css等，以防止出现文件已删除的错误
5. initialize cache：插件可以将数据缓存为JSON对象，并在连续的构建中检索它们，检测配置是否发生变化，package.json是否变化。
6. copy gatsby files：将站点文件复制到.cache文件夹中的缓存中。
7. onPreBootstrap：生命周期执行，初始化自身并准备引导您的网站时调用
8. source and transform nodes：从站点以及所有实现该sourceNodesAPI的插件创建Node对象，由源或转换器插件创建的节点将被缓存
9. Add explicit types：将类型添加到Graphql中，以供使用准确的query查询需要的数据
10. 10.Add inferred types：字段自动类型推断
11. Processing types：组成第三方架构类型，子字段，自定义解析功能，并在GraphQL架构中设置字段
12. building schema：导入并构建组成的GraphQL模式
13. createPages：调用gatsby-node.js中生命周期createPagesAPI为您的网站创建页面
14. createPagesStatefully：生命周期执行
15. onPreExtractQueries：生命周期执行，
16. update schema：重建GraphQL模式-Gatsby的内部片段，可让您检查为站点创建的所有页面
17. extract queries from components：站点中的所有JavaScript文件均已加载，并且Gatsby确定是否从其中导出了任何GraphQL查询。如果有问题的查询，可以用警告或错误将其报告回来。所有这些查询都排队等待稍后执行
18. write out requires：Gatsby程序添加了文件需要加载/需要的代码
19. write out redirect data：Gatsby程序添加了用于重定向的代码，例如通过createRedirect
20. Build manifest and related icons-（来自gatsby-plugin-manifest）：
    此步骤是通过激活的gatsby-plugin-manifest，网站icon图标支持等
21. onPostBootstrap：生命周期执行，Gatsby初始化自身并准备引导您的网站时调用
22. success run static queries：运行非页面组件中的静态查询，这些非页面组件早于查询提取排队的，以便向需要它的组件提供数据，useStaticQuery执行
23. run page queries：运行从查询提取开始排队的页面查询，因此可以将需要的数据页面提供给它们

构建build

25. Generating image thumbnails —(来自gatsby-plugin-sharp）：gatsby-plugin-sharp，它可以进入生命周期。Sharp对图像进行处理以创建不同大小的图像资产
26. Building production JavaScript and CSS bundles：使用webpack编译JavaScript和CSS
27. Rewriting compilation hashes：webpack使用编译散列进行代码拆分，并使缓存保持最新状态，并且具有页面数据的所有文件都需要使用新的散列进行更新，因为它们已经重新编译
28. Building static HTML for pages：在准备好HTML页面的所有内容后，HTML会被编译并写出到文件中，以便可以静态地提供它。由于HTML是在Node.js服务器上下文中生成的，因此对浏览器API的引用可能会破坏构建，因此必须有条件地使用。

上一篇: Gatsby 静态网站搭建全过程 (2)—采坑和经验.