Gatsby知识框架

一、Gatsby 基础概念

1. 核心特性

基于React的静态站点生成器：使用React构建，输出静态HTML/CSS/JS
GraphQL数据层：统一的数据查询接口
丰富的插件系统：超过2000个官方和社区插件
高性能优化：自动代码分割、预加载、图像优化等
混合渲染能力：支持SSG、DSG、SSR和CSR多种渲染模式

2. 核心技术栈

React.js
GraphQL
Webpack
Babel
Node.js

二、项目结构与配置

1. 标准目录结构

/
├── src/
│   ├── pages/         # 自动生成路由的页面
│   ├── templates/     # 页面模板
│   ├── components/    # 可复用组件
│   ├── images/        # 图片资源
│   └── styles/        # 全局样式
├── static/            # 直接复制的静态文件
├── gatsby-config.js   # 主配置文件
├── gatsby-node.js     # Node API扩展
├── gatsby-browser.js  # 浏览器API扩展
└── gatsby-ssr.js      # SSR API扩展

2. 核心配置文件

gatsby-config.js：站点元数据、插件配置

module.exports = {siteMetadata: {title: "我的Gatsby站点",},plugins: [`gatsby-plugin-react-helmet`,{resolve: `gatsby-source-filesystem`,options: {name: `images`,path: `${__dirname}/src/images`,},},],
}

gatsby-node.js：自定义构建流程

exports.createPages = async ({ actions }) => {const { createPage } = actionscreatePage({path: "/custom-page",component: require.resolve("./src/templates/custom.js"),context: {}, // 传递给页面的数据})
}

三、数据管理

1. 数据源类型

文件系统：gatsby-source-filesystem
CMS内容管理系统：Contentful、Sanity、WordPress等
数据库：Firebase、MongoDB等
API接口：REST、GraphQL等
本地数据：JSON、YAML等

2. GraphQL数据查询

query {allMarkdownRemark {edges {node {frontmatter {titledate(formatString: "YYYY-MM-DD")}html}}}
}

3. 页面数据注入

页面查询：只能在页面组件中使用

export const query = graphql`query BlogPostQuery($id: String!) {markdownRemark(id: { eq: $id }) {htmlfrontmatter {title}}}
`

StaticQuery：可在任何组件中使用（现已被useStaticQuery替代）

const data = useStaticQuery(graphql`query HeaderQuery {site {siteMetadata {title}}}
`)

四、核心功能

1. 页面创建

自动路由：src/pages下的文件自动生成路由
编程式创建：通过gatsby-node.js动态创建
客户端路由：@reach/router集成

2. 图像处理

gatsby-image（现为gatsby-plugin-image）

import { GatsbyImage } from "gatsby-plugin-image"export default function ImageComponent({ data }) {return (<GatsbyImageimage={data.file.childImageSharp.gatsbyImageData}alt="示例图片"/>)
}

3. 样式方案

CSS Modules

import * as styles from "./layout.module.css"<div className={styles.container}></div>

CSS-in-JS：Styled Components、Emotion等
Sass/Less：通过插件支持
Tailwind CSS：通过插件集成

五、插件系统

1. 常用官方插件

插件名称	功能描述
gatsby-plugin-image	优化图像处理
gatsby-plugin-sharp	图像处理引擎
gatsby-transformer-sharp	图像转换
gatsby-source-filesystem	文件系统数据源
gatsby-plugin-react-helmet	管理文档头
gatsby-plugin-manifest	PWA支持
gatsby-plugin-offline	离线支持

2. 插件配置示例

// gatsby-config.js
module.exports = {plugins: [{resolve: `gatsby-source-contentful`,options: {spaceId: `your_space_id`,accessToken: `your_access_token`,},},`gatsby-plugin-sass`,],
}

六、性能优化

1. 内置优化

自动代码分割
资源预加载
延迟加载
服务端渲染
图像懒加载

2. 优化实践

使用gatsby-plugin-image优化图片
实现预取链接

<Link to="/page-2" prefetch="true">Page 2</Link>

分析构建结果

gatsby build --profile --json

使用gatsby-plugin-bundle-analyzer分析包大小

七、部署与CI/CD

1. 部署目标

Netlify
Vercel
AWS Amplify
GitHub Pages
传统主机

2. 部署流程

# 安装依赖
npm install# 本地开发
gatsby develop# 生产构建
gatsby build# 启动本地服务器测试生产版本
gatsby serve

八、高级特性

1. 渲染模式

静态站点生成(SSG)：构建时生成
延迟静态生成(DSG)：首次请求时生成
服务器端渲染(SSR)：请求时渲染
客户端渲染(CSR)：浏览器端渲染

2. 自定义Webpack配置

// gatsby-node.js
exports.onCreateWebpackConfig = ({ actions }) => {actions.setWebpackConfig({resolve: {alias: {"@components": path.resolve(__dirname, "src/components"),},},})
}