在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

gatsbyjs/gatsby

菜单

性能优化

相关源文件

本文概述了 Gatsby 中可用的性能优化技术和机制。它涵盖了构建时和运行时优化，以帮助您创建快速高效的网站。有关部署特定的优化，请参阅部署适配器。

概述

Gatsby 提供了多层次的性能优化，从构建时高效的资源处理到提升用户体验的运行时技术

来源

  • packages/gatsby/src/utils/webpack.config.js
  • packages/gatsby-plugin-image/package.json
  • packages/gatsby-plugin-sharp/package.json
  • packages/gatsby-plugin-offline/package.json

Webpack 配置

Gatsby 利用 webpack 进行资源打包和优化。它会根据构建阶段自动配置 webpack，采用性能最佳实践。

构建阶段

Gatsby 根据构建阶段使用不同的 webpack 配置

来源

  • packages/gatsby/src/utils/webpack.config.js:40-45
  • packages/gatsby/src/utils/webpack.config.js:331-341

代码拆分

Gatsby 自动实施代码分割策略以优化包大小

  1. 框架包：React、ReactDOM 和其他框架库会单独打包
  2. 基于路由的分割：每个页面都有自己的包
  3. 公共块：共享代码被提取到公共包中

来源

  • packages/gatsby/src/utils/webpack.config.js:580-612
  • packages/gatsby/src/utils/webpack.config.js:652-698

生产构建的具体实现（build-javascript 阶段）

// In production JavaScript builds
if (stage === `build-javascript`) {
  const splitChunks = {
    chunks: `all`,
    cacheGroups: {
      default: false,
      defaultVendors: false,
      framework: {
        chunks: `all`,
        name: `framework`,
        test: FRAMEWORK_BUNDLES_REGEX,
        priority: 40,
        enforce: true,
      },
      // ... other optimization options
    }
  }
}

来源

  • packages/gatsby/src/utils/webpack.config.js:653-670

代码压缩和优化

对于生产构建，Gatsby 应用激进的优化

  1. JS 压缩：使用 Terser 减小 JavaScript 大小
  2. CSS 最小化：优化和压缩 CSS
  3. 资源优化：压缩和优化静态资源

来源

  • packages/gatsby/src/utils/webpack-utils.ts:344-347
  • packages/gatsby/src/utils/webpack.config.js:274-280

图像优化

Gatsby 通过多个包提供了一个强大的图像优化生态系统。

图像处理管道

来源

  • packages/gatsby-plugin-image/package.json
  • packages/gatsby-plugin-sharp/package.json
  • packages/gatsby-transformer-sharp/package.json
  • packages/gatsby-transformer-sqip/package.json

gatsby-plugin-image 系统

gatsby-plugin-image 提供了用于优化图像加载的 React 组件

  1. StaticImage：用于不更改的图像（直接导入）
  2. GatsbyImage：用于动态图像（来自 CMS 等数据源）

这两个组件都会自动

  • 生成多种宽度的响应式图像
  • 在加载期间提供占位符（模糊效果或 SQIP）
  • 懒加载屏幕外的图像
  • 使用 WebP 和 AVIF 等现代格式，并带有回退方案

来源

  • packages/gatsby-plugin-image/package.json
  • packages/gatsby-plugin-sharp/package.json:3-4

SQIP（基于 SVG 的占位符）

gatsby-transformer-sqip 包会创建图像的低质量 SVG 预览，这些预览会立即加载，并在完整图像加载时被替换。

来源

  • packages/gatsby-transformer-sqip/package.json:2-4

运行时性能优化

Gatsby 会在链接页面进入视口时自动预取，使导航感觉即时。

代码分割和懒加载

初始渲染不需要的组件可以进行懒加载

来源

  • packages/gatsby/src/utils/webpack.config.js:582-608

离线支持

gatsby-plugin-offline 包增加了对 Service Worker 的支持，以缓存资源并启用离线功能，从而提高感知性能和弹性。

来源

  • packages/gatsby-plugin-offline/package.json:3-4

数据源优化

内容分发网络

Gatsby 通过高效的数据获取策略，优化来自各种源（Contentful、WordPress、Shopify）的内容交付。

来源

  • packages/gatsby-source-contentful/package.json
  • packages/gatsby-source-wordpress/package.json
  • packages/gatsby-source-shopify/package.json
  • packages/gatsby-source-drupal/package.json
  • packages/gatsby-source-filesystem/package.json

性能优化插件

不同的数据源有专门的性能优化

  1. Contentful：高效的资源处理和增量更新
  2. WordPress：增量内容获取和媒体优化
  3. Shopify：优化的产品和集合查询
  4. Drupal：高效处理 Drupal 实体和媒体

来源

  • packages/gatsby-source-contentful/CHANGELOG.md:10-11
  • packages/gatsby-source-wordpress/CHANGELOG.md:29-31
  • packages/gatsby-source-shopify/CHANGELOG.md:29-30
  • packages/gatsby-source-drupal/CHANGELOG.md:23-25

构建性能

并行处理

Gatsby 利用工作池（worker pools）进行并行处理，以进行图像转换和其他 CPU 密集型任务。

来源

  • packages/gatsby-worker/package.json:3-4
  • packages/gatsby-plugin-sharp/package.json:2-4

增量构建

Gatsby 可以检测哪些数据已更改，并仅重建受影响的页面，从而显著缩短内容更新的构建时间。

来源

  • packages/gatsby-source-contentful/CHANGELOG.md:45-47
  • packages/gatsby-source-wordpress/CHANGELOG.md:133-135

性能分析

Gatsby 提供了内置的性能分析工具来识别性能瓶颈

// Enable React profiling
if (stage === `build-javascript` && program.profile) {
  resolve.alias[`react-dom$`] = `react-dom/profiling`
  resolve.alias[`scheduler/tracing`] = `scheduler/tracing-profiling`
}

来源

  • packages/gatsby/src/utils/webpack.config.js:518-521

捆绑包优化

现代 JavaScript

Gatsby 根据您的目标浏览器生成优化的包

来源

  • packages/gatsby/src/utils/webpack.config.js:179-186
  • packages/gatsby/src/utils/webpack.config.js:199-206
  • packages/gatsby/src/utils/browserslist.ts

识别性能问题

常见的性能问题包括

  1. 大型 JavaScript 包：过多的依赖或低效的代码
  2. 未优化的图像：未使用 Gatsby 的图像优化功能
  3. 慢速数据源：低效的查询或过度的数据获取
  4. 渲染阻塞资源：阻塞渲染的 CSS 或 JavaScript

最佳实践

  1. 对所有图像使用 gatsby-plugin-image 以确保它们得到优化
  2. 对不需要立即加载的大型组件实现代码分割
  3. 在部署站点时配置适当的缓存头
  4. 定期审查依赖项以识别并删除未使用的包
  5. 设置正确的 Browserslist 配置以避免不必要的 polyfills

来源

  • packages/gatsby-plugin-image/package.json
  • packages/gatsby/src/utils/webpack.config.js:398-406
  • packages/gatsby/src/utils/webpack.config.js:582-608

性能测试工具

要衡量 Gatsby 站点的性能

  1. Lighthouse：用于整体性能指标
  2. WebPageTest：用于详细的瀑布图分析
  3. Chrome DevTools：用于运行时性能分析
  4. Gatsby 构建信息：用于构建性能指标

Lighthouse 分数关注于

  • 首次内容绘制 (FCP)
  • 最大内容绘制 (LCP)
  • 可交互时间 (TTI)
  • 累计布局偏移 (CLS)
  • 首次输入延迟 (FID)

通过实施上述性能优化技术，Gatsby 站点可以在这些指标上取得出色的性能分数。