Gatsby 静态网站搭建全过程 (3)—运行流程
程序员文章站
2022-06-04 19:49:13
...
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阶段
从总体上来讲，在整个引导和构建过程中发生了以下：
- 从Node对象中推断出develop还是build
- 页面是根据你的js/React组件创建的
- 提供Graphql查询并运行，以提供页面数据
- 静态文件被创建并输入到public目录下
步骤详细介绍
- open and validate gatsby-configs：运行gatsby-config.js，打开所有已安装主题等
- load plugins: 加载所有的插件以及运行
- onPreInit：生命周期执行，执行期间调用的第一个API在插件初始化后即缓存初始化和引导准备之前运行
- delete html and css files from previous builds：在开发和构建不同的是，构建阶段会删除以前的html、css等，以防止出现文件已删除的错误
- initialize cache：插件可以将数据缓存为JSON对象，并在连续的构建中检索它们，检测配置是否发生变化，package.json是否变化。
- copy gatsby files：将站点文件复制到.cache文件夹中的缓存中。
- onPreBootstrap：生命周期执行，初始化自身并准备引导您的网站时调用
- source and transform nodes：从站点以及所有实现该sourceNodesAPI的插件创建Node对象，由源或转换器插件创建的节点将被缓存
- Add explicit types：将类型添加到Graphql中，以供使用准确的query查询需要的数据
- 10.Add inferred types：字段自动类型推断
- Processing types：组成第三方架构类型，子字段，自定义解析功能，并在GraphQL架构中设置字段
- building schema：导入并构建组成的GraphQL模式
- createPages：调用gatsby-node.js中生命周期createPagesAPI为您的网站创建页面
- createPagesStatefully：生命周期执行
- onPreExtractQueries：生命周期执行，
- update schema：重建GraphQL模式-Gatsby的内部片段，可让您检查为站点创建的所有页面
- extract queries from components：站点中的所有JavaScript文件均已加载，并且Gatsby确定是否从其中导出了任何GraphQL查询。如果有问题的查询，可以用警告或错误将其报告回来。所有这些查询都排队等待稍后执行
- write out requires：Gatsby程序添加了文件需要加载/需要的代码
- write out redirect data：Gatsby程序添加了用于重定向的代码，例如通过createRedirect
- Build manifest and related icons-（来自gatsby-plugin-manifest）：
此步骤是通过**的gatsby-plugin-manifest，网站icon图标支持等 - onPostBootstrap：生命周期执行，Gatsby初始化自身并准备引导您的网站时调用
- success run static queries：运行非页面组件中的静态查询，这些非页面组件早于查询提取排队的，以便向需要它的组件提供数据，useStaticQuery执行
- run page queries：运行从查询提取开始排队的页面查询，因此可以将需要的数据页面提供给它们
构建build
- Generating image thumbnails —(来自gatsby-plugin-sharp）：gatsby-plugin-sharp，它可以进入生命周期。Sharp对图像进行处理以创建不同大小的图像资产
- Building production JavaScript and CSS bundles：使用webpack编译JavaScript和CSS
- Rewriting compilation hashes：webpack使用编译散列进行代码拆分，并使缓存保持最新状态，并且具有页面数据的所有文件都需要使用新的散列进行更新，因为它们已经重新编译
- Building static HTML for pages：在准备好HTML页面的所有内容后，HTML会被编译并写出到文件中，以便可以静态地提供它。由于HTML是在Node.js服务器上下文中生成的，因此对浏览器API的引用可能会破坏构建，因此必须有条件地使用。
上一篇： docker 端口映射
下一篇： prometheus从外部监控k8s集群