GABA BLOG

Appearance

VitePress 博客部署优化：Vercel 部署与性能调优

VitePress 博客部署优化：Vercel 部署与性能调优

VitePress

基于 GABA Blog 实际项目，详细讲解 VitePress 博客在 Vercel 上的部署优化策略，包括缓存配置、性能调优、监控分析和最佳实践

标签：
Vercel
发布于 2025年12月19日
更新于 2026年3月16日

部署架构概述 ​

GABA Blog 选择 Vercel 作为部署平台，主要基于以下考虑：

  1. 开发者友好：无缝的 Git 集成和自动部署
  2. 性能优秀：全球 CDN 和边缘网络
  3. 成本效益：个人项目免费额度充足
  4. 功能丰富：支持 Serverless Functions、环境变量等
  5. 监控完善：内置性能监控和分析工具

Vercel 配置详解 ​

vercel.json 配置解析 ​

json
{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000, immutable"
        }
      ]
    }
  ]
}

配置说明 ​

  1. 缓存策略：静态资源（assets）设置一年缓存（31536000秒）
  2. immutable 标志：资源内容不会改变，浏览器可以永久缓存
  3. 路径匹配：使用正则表达式匹配 /assets/ 目录下的所有文件

缓存策略优化 ​

资源分类与缓存策略 ​

资源类型缓存策略说明
HTML 文件max-age=3600, must-revalidate内容可能更新，需要重新验证
CSS/JS 文件max-age=31536000, immutable通过文件哈希确保内容不变
图片资源max-age=31536000, immutable内容不变，永久缓存
字体文件max-age=31536000, immutable内容不变，永久缓存

完整的缓存配置示例 ​

json
{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000, immutable"
        },
        {
          "key": "Vary",
          "value": "Accept-Encoding"
        }
      ]
    },
    {
      "source": "/(.*).(html|htm)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=3600, must-revalidate"
        }
      ]
    },
    {
      "source": "/(.*).(css|js)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000, immutable"
        }
      ]
    }
  ]
}

构建优化配置 ​

Vite 构建配置优化 ​

typescript
// .vitepress/config.mts 中的构建配置
vite: {
  build: {
    cssCodeSplit: true,
    sourcemap: false,
    minify: 'esbuild'
  }
}

图片优化配置 ​

typescript
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  vite: {
    plugins: [
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 7,
        },
        mozjpeg: {
          quality: 80,
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4,
        },
        svgo: {
          plugins: [{ name: 'removeViewBox' }, { name: 'removeEmptyAttrs', active: false }],
        },
      }),
    ],
  },
})

构建优化策略 ​

  1. 代码分割：将第三方库分离，提高缓存利用率
  2. 文件哈希：使用内容哈希命名，支持长期缓存
  3. 资源内联：小资源内联减少 HTTP 请求
  4. 目标版本：使用现代 JavaScript 特性
  5. 图片压缩：自动压缩图片资源

性能监控与分析 ​

Google Analytics 4 集成 ​

html
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())
  gtag('config', 'G-XXXXXXXXXX')
</script>

自定义性能监控 ​

typescript
export class PerformanceMonitor {
  static trackPageView() {
    if (typeof window.gtag !== 'undefined') {
      window.gtag('event', 'page_view', {
        page_title: document.title,
        page_location: window.location.href,
        page_path: window.location.pathname,
      })
    }
  }

  static trackCustomMetric(name: string, value: number) {
    if (typeof window.gtag !== 'undefined') {
      window.gtag('event', 'custom_metric', {
        metric_name: name,
        metric_value: value,
      })
    }
  }

  static trackLCP(entry: PerformanceEntry) {
    this.trackCustomMetric('lcp', entry.startTime)
  }
}

if ('PerformanceObserver' in window) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.entryType === 'largest-contentful-paint') {
        PerformanceMonitor.trackLCP(entry)
      }
    }
  })

  observer.observe({ entryTypes: ['largest-contentful-paint'] })
}

部署流程优化 ​

开发脚本使用 ​

bash
# 开发模式
pnpm dev

# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview

# 更新依赖并构建
pnpm update

本地构建测试 ​

bash
# 构建
pnpm build

# 预览
pnpm preview

# 检查构建输出
ls -la .vitepress/dist/

# 检查文件大小
find .vitepress/dist/ -type f -name "*.js" -exec du -h {} \;

安全优化策略 ​

安全头部配置 ​

json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    }
  ]
}

CSP 内容安全策略 ​

html
<meta
  http-equiv="Content-Security-Policy"
  content="
  default-src 'self';
  script-src 'self' 'unsafe-inline' https://www.googletagmanager.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self';
  connect-src 'self' https://www.google-analytics.com;
  "
/>

故障排除与调试 ​

部署问题排查 ​

bash
# 本地构建测试
pnpm build

# 预览构建结果
pnpm preview

# 检查构建输出
ls -la .vitepress/dist/

# 检查缓存头
curl -I https://blog.crudclass.com/assets/main.js

性能问题排查 ​

typescript
const measurePerformance = (name: string, callback: () => void) => {
  const start = performance.now()
  callback()
  const duration = performance.now() - start

  console.log(`[Performance] ${name}: ${duration.toFixed(2)}ms`)

  if (duration > 100) {
    console.warn(`[Performance Warning] ${name} took ${duration.toFixed(2)}ms`)
  }
}

最佳实践总结 ​

1. 部署最佳实践 ​

  • 使用 immutable 缓存策略优化静态资源
  • 配置合理的 CDN 缓存规则
  • 设置安全头部保护网站安全
  • 监控 Core Web Vitals 指标

2. 性能最佳实践 ​

  • 代码分割和懒加载
  • 资源压缩和优化
  • 图片懒加载和响应式图片
  • 字体优化和预加载
  • 减少第三方依赖

3. 监控最佳实践 ​

  • 集成 Google Analytics 4
  • 监控 Core Web Vitals
  • 设置错误监控
  • 定期性能审计

总结 ​

通过合理的部署优化策略，GABA Blog 在 Vercel 上实现了优秀的性能表现：

  1. 极快的加载速度：通过缓存策略和 CDN 优化
  2. 优秀的用户体验：通过性能监控和优化
  3. 可靠的部署流程：通过自动化构建
  4. 完善的安全防护：通过安全头部配置
  5. 持续的监控改进：通过数据分析优化

这些优化策略不仅提升了博客的性能和用户体验，也为后续的扩展和维护打下了坚实的基础。

Last updated: