盖茨比乔布斯_盖茨比怎么这么快

最新推荐文章于 2024-07-21 22:27:18 发布

cumian8165

最新推荐文章于 2024-07-21 22:27:18 发布

阅读量181

点赞数

文章标签： python java vue javascript 大数据 ViewUI

原文链接：https://www.freecodecamp.org/news/how-gatsby-is-so-blazing-fast-c99a6f2d405e/

版权

盖茨比乔布斯

by Luan Orlandi

通过栾奥兰迪

盖茨比怎么这么快 (How Gatsby is so blazing fast)

Performance greatly affects the user experience. Gatsby builds fast websites out-of-the-box.

性能极大地影响用户体验。 Gatsby开箱即用地构建快速的网站。

When creating the tool, they noticed that slow websites are slow in different ways, but fast websites are fast in similar ways. So baking optimization approaches in a framework resulted in Gatsby.

在创建该工具时，他们注意到慢速网站以不同的方式变慢，而快速网站以类似的方式变慢。因此，在框架中进行烘焙优化的方法产生了盖茨比。

From my experience, Gatsby set up webpack to build the most optimal performance. Webpack is a module bundler for JavaScript used by many front-end projects.

根据我的经验，盖茨比设置了webpack来构建最佳性能。 Webpack是许多前端项目使用JavaScript模块捆绑器。

将静态网站与动态应用程序融合 (Blending static websites with dynamic apps)

Gatsby is a static website generator that uses React. It creates HTML files for each page your website has.

Gatsby是使用React的静态网站生成器。它为您的网站的每个页面创建HTML文件。

So when building your website, Node.js will mount the React application to create HTML files with the rendered content for each route. This is the core of Gatsby.

因此，在构建网站时，Node.js将挂载React应用程序以创建HTML文件，其中包含每个路线的呈现内容。这是盖茨比的核心。

“ Instead of waiting to generate pages when requested, Gatsby pre-build pages” — gatsbyjs.org

“ Gatsby可以预先构建页面，而不是在请求时等待生成页面” – gatsbyjs.org

Let’s go back in the basics to see why this is important for performance.

让我们回过头来看看为什么这对性能很重要。

When the user accesses a page through an HTML file, the browser renders the content. Without any cache or JavaScript, using an anchor tag will load another HTML file when clicked. As a result, the user might have to wait or worse, see a blank page while rendering the content.

当用户通过HTML文件访问页面时，浏览器将呈现内容。如果没有任何缓存或JavaScript，则使用定位标记将在单击时加载另一个HTML文件。结果，用户可能不得不等待甚至更糟，在呈现内容时看到空白页。

This is the most traditional way that the Web was designed until Single Page Applications (SPA) came up.

在单页应用程序(SPA)出现之前，这是Web设计的最传统方法。

SPA renders the page by updating the content with JavaScript. It’s much faster to update than downloading static files. Because they load a single HTML file and dynamically update that page as the user interacts.

SPA通过使用JavaScript更新内容来呈现页面。更新比下载静态文件快得多。因为它们加载单个HTML文件并在用户交互时动态更新该页面。

React is a library to handle the view layer for SPA. Such frameworks and libraries like React doesn’t know what to render unless some JavaScript code starts running. So building them as SPAs will drastically affect the Critical Rendering Path.

React是一个用于处理SPA的视图层的库。像React这样的框架和库除非开始运行某些JavaScript代码，否则不知道要呈现什么内容。因此，将它们构建为SPA将极大地影响“ 关键渲染路径” 。

Gatsby has a webpack configuration to provide enough content for the first render:

Gatsby具有webpack配置，可为第一个渲染提供足够的内容：

HTML tags
HTML标签
JavaScript code set as async, necessary for user interaction but not for the first render
JavaScript代码设置为async ，对于用户交互是必需的，但对于第一次渲染则不需要
CSS as inline, so no need to download them
CSS为内联，因此无需下载它们

代码拆分和缓存 (Code split and cache)

When building a page, Gatsby can see which components the page needs and let webpack do code splitting automatically. This is applied by setting up Dynamic Imports.

构建页面时，Gatsby可以查看页面需要哪些组件，并让webpack自动进行代码拆分。这是通过设置“ 动态导入”来应用的。

Through this way, the browser will only request files required for the page, not the entire website, speeding up the time to interact with the page.

通过这种方式，浏览器将仅请求页面所需的文件，而不是整个网站，从而加快了与页面交互的时间。

As a result, links to other pages will download their files only when the user interacts with the link, slowing navigation.

结果，仅当用户与链接交互时，指向其他页面的链接才会下载其文件，从而降低了导航速度。

To avoid this problem, the webpack configuration of Gatsby applies a technique called Link prefetching.

为避免此问题，Gatsby的webpack配置应用了一种称为Link prefetching的技术。

After the browser is finished loading the page, it silently looks for links with prefetch attributes to download them. Then, when a user clicks on a link, the files requested for the page will have high chances to be already in cache.

浏览器完成页面加载后，它会静默查找具有预取属性的链接以下载它们。然后，当用户单击链接时，为该页面请求的文件将很有可能已经在缓存中。

每个页面都是一个React应用 (Every page is a React app)

Navigating through pages in a static website still requires a load of HTML files, but not for Gatsby — they are React apps.

在静态网站中浏览页面仍然需要加载HTML文件，但对于盖茨比而言则不是(它们是React应用程序)。

“Gatsby generates your site’s HTML pages, but also creates a JavaScript runtime that takes over in the browser once the initial HTML has loaded” — gatsbyjs.org

“ Gatsby会生成您站点HTML页面，但还会创建一个JavaScript运行时，一旦初始HTML加载完成，JavaScript运行时就会接管浏览器。” — gatsbyjs.org

Each anchor tag for another page will become a route by Reach Router (a tool for building routes on React with accessibility). It looks like it’s changing from one HTML file to another when in fact, it’s a SPA updating the content on the page.

另一个页面的每个锚标记都将由Reach Router (用于在具有可访问性的React上构建路由的工具)成为路由。实际上，它看起来像是从一个HTML文件更改为另一个HTML文件，实际上是一个SPA，用于更新页面上的内容。

图像优化 (Image optimization)

HTTP Archive tracks a lot of popular websites, most of the data types requested by pages are images.

HTTP存档跟踪许多受欢迎的网站，页面请求的大多数数据类型是图像。

Optimizing images can be one of the best performance improvements on a website.

优化图像可能是网站上最好的性能改进之一。

Fewer bytes to download means less bandwidth required, so the browser can download and render content faster. These are some of the optimizations we can do:

更少的字节下载意味着需要更少的带宽，因此浏览器可以更快地下载和呈现内容。这些是我们可以做的一些优化：

Resize to the same amount of space it needs
调整大小到所需的相同空间
Generate responsive images with different resolutions for desktop and phones
为台式机和手机生成具有不同分辨率的响应图像
Remove metadata and apply compression
删除元数据并应用压缩
Apply lazy loading to speed up the initial page load
应用延迟加载以加快初始页面加载
Display a placeholder while the image is loading
加载图像时显示占位符

This can take a lot of effort and Gatsby has a solution: this whole process can be automated.

这会花费很多精力，盖茨比(Gatsby)有一个解决方案：整个过程可以自动化。

Like many tools in Gatsby, gatsbyjs-image is powered by GraphQL. This plugin sets up the images with different resolutions for download. It creates some thumbnails and applys compression. All this on the building step.

像Gatsby中的许多工具一样， gatsbyjs-image由GraphQL提供支持。该插件设置了不同分辨率的图像以供下载。它创建一些缩略图并应用压缩。所有这些都在构建步骤上。

When the image is loading, a “blur-up” technique displays a preview in a very low-quality image that is already in the HTML file (or just the background). All the work is reduced in coding GraphQL queries to create the automated optimization. Check out this demo:

加载图像时，“模糊处理”技术会在HTML文件(或只是背景)中已经存在的非常低质量的图像中显示预览。减少对GraphQL查询进行编码以创建自动优化的工作。查看此演示：

缩小和唯一文件名 (Minification and unique filenames)

These techniques are already widely used by popular frameworks and libraries, and in Gatsby there is not much difference.

这些技术已被流行的框架和库广泛使用，并且在Gatsby中差别不大。

All files are minified by default when building with webpack. Because browsers don’t care about beautiful code, so why not write everything in one line?

使用webpack构建时，默认情况下会缩小所有文件。因为浏览器不在乎漂亮的代码，所以为什么不将所有内容写在一行中呢？

The files are unique when built by assigning a hash on the filename. If something changes, a new name is given for the file.

通过在文件名上分配哈希来构建文件时，这些文件是唯一的。如果发生变化，将为文件指定一个新名称。

The reason behind this is to allow the server that hosts these files to give a long duration for browser caching.

其背后的原因是允许承载这些文件的服务器为浏览器缓存提供较长的持续时间。

So when the user comes back for the website, they already have the files. Updates in your files will give a new filename when built. So the browser downloads the file because there will be no match with the one from the cache.

因此，当用户再次访问该网站时，他们已经拥有了文件。建立文件时，文件中的更新将提供新的文件名。因此浏览器下载文件是因为与缓存中的文件不匹配。