一、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"),},},})
}3. 國際化(i18n)
-
使用
gatsby-plugin-intl等插件 -
多語言路由方案
-
內容本地化管理
九、生態系統
1. 主題系統
-
主題繼承機制
-
組件陰影(Component Shadowing)
-
主題開發規范
2. 相關工具
-
Gatsby Cloud：官方托管服務
-
Gatsby Preview：內容預覽
-
Gatsby Recipes：自動化配置
十、最佳實踐
1. 項目組織
-
模塊化組件結構
-
清晰的目錄劃分
-
統一的代碼風格
2. 性能監控
-
Lighthouse評分
-
Web Vitals指標
-
性能預算設置
3. 安全實踐
-
環境變量管理
-
依賴安全審計
-
CSP策略實施
Gatsby特別適合構建內容驅動的網站，如博客、文檔站、營銷網站等。其豐富的插件生態系統和出色的開箱即用性能使其成為現代前端開發的重要工具。
)
