Gatsby知识框架

最新推荐文章于 2025-05-14 20:21:16 发布

言拂C

最新推荐文章于 2025-05-14 20:21:16 发布

阅读量458

点赞数 14

文章标签： node.js

本文链接：https://blog.csdn.net/weixin_45119097/article/details/147936386

版权

一、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 } = actions
  createPage({
    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 {
          title
          date(formatString: "YYYY-MM-DD")
        }
        html
      }
    }
  }
}

3. 页面数据注入

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

export const query = graphql`
  query BlogPostQuery($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        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 (
    <GatsbyImage
      image={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"),
      },
    },
  })
}