文档网站部署和优化

构建优化

1. 构建配置

在 astro.config.mjs 中优化构建设置：

import { defineConfig } from 'astro/config';

export default defineConfig({
  build: {
    // 启用增量构建
    incremental: true,
    // 优化输出
    format: 'file',
    // 启用资源压缩
    assets: true,
  },
  vite: {
    build: {
      // 代码分割策略
      rollupOptions: {
        output: {
          manualChunks: {
            'vendor': ['react', 'react-dom'],
          },
        },
      },
    },
  },
});

2. 资源优化

图片处理

import image from '@astrojs/image';

export default defineConfig({
  integrations: [
    image({
      serviceEntryPoint: '@astrojs/image/sharp',
      cacheDir: './.cache/image',
      logLevel: 'debug',
    }),
  ],
});

使用优化后的图片组件

---
import { Image } from '@astrojs/image/components';
---

<Image
  src={import('../assets/hero.png')}
  alt="Hero image"
  width={800}
  height={400}
  format="webp"
  quality={80}
/>

部署配置

1. 静态部署

Netlify 配置

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Vercel 配置

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "astro"
}

2. 自动部署

GitHub Actions 配置

name: Deploy Documentation

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build site
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

性能优化

1. 代码优化

懒加载组件

import { lazy } from 'astro/components';

const Comments = lazy(() => import('../components/Comments.astro'));

预加载关键资源

<head>
  <link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preconnect" href="https://api.your-service.com">
</head>

2. 缓存策略

配置缓存控制

export default defineConfig({
  headers: {
    '/*.{js,css,jpg,jpeg,png,gif,woff,woff2}': [
      {
        key: 'Cache-Control',
        value: 'public, max-age=31536000, immutable',
      },
    ],
  },
});

3. SEO 优化

添加 SEO 组件

---
interface Props {
  title: string;
  description: string;
  image?: string;
}

const { title, description, image } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---

<meta name="description" content={description}>
<meta property="og:title" content={title}>
<meta property="og:description" content={description}>
<meta property="og:url" content={canonicalURL}>
{image && <meta property="og:image" content={image}>}
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href={canonicalURL}>

监控和分析

1. 性能监控

添加 Web Vitals 跟踪

import { onCLS, onFID, onLCP } from 'web-vitals';

function sendToAnalytics({ name, delta, id }) {
  const body = JSON.stringify({ name, delta, id });

  // 使用 Navigator.sendBeacon() API
  navigator.sendBeacon('/analytics', body);
}

export function reportWebVitals() {
  onCLS(sendToAnalytics);
  onFID(sendToAnalytics);
  onLCP(sendToAnalytics);
}

2. 错误跟踪

集成错误监控服务

export function initErrorTracking() {
  window.addEventListener('error', (event) => {
    // 发送错误信息到监控服务
    console.error('Captured error:', event.error);
  });

  window.addEventListener('unhandledrejection', (event) => {
    // 处理未捕获的 Promise 错误
    console.error('Unhandled rejection:', event.reason);
  });
}

最佳实践

部署流程
- 使用持续集成/持续部署（CI/CD）
- 实施自动化测试
- 配置环境变量管理
性能优化
- 实施渐进式增强
- 优化关键渲染路径
- 使用适当的缓存策略
监控和维护
- 定期检查性能指标
- 监控错误和异常
- 及时更新依赖包

总结

通过本章的学习，你已经掌握了：

如何优化 Astro 文档网站的构建过程
部署网站到不同的托管平台
实施性能优化策略
设置监控和分析系统

这些知识将帮助你构建一个高性能、易维护的文档网站。记住，优化是一个持续的过程，要根据实际需求和用户反馈不断改进。