性能优化

优化 VitePress 站点性能，提升用户体验和 SEO 效果。

构建优化

减小包体积

// docs/.vitepress/config.mts
export default defineConfig({
  vite: {
    build: {
      // 启用 minify
      minify: 'esbuild',
      
      // 代码分割
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['vue']
          }
        }
      }
    }
  }
})

按需加载组件

<script setup>
import { defineAsyncComponent } from 'vue'

// 异步加载大型组件
const HeavyComponent = defineAsyncComponent(() => 
  import('./HeavyComponent.vue')
)
</script>

图片优化

使用现代图片格式

<!-- 使用 WebP 格式 -->
<picture>
  <source srcset="/image.webp" type="image/webp">
  <img src="/image.png" alt="描述">
</picture>

图片懒加载

<template>
  <img 
    src="/image.jpg" 
    loading="lazy"
    alt="描述"
  />
</template>

响应式图片

<template>
  <img
    src="/image.jpg"
    srcset="/image-small.jpg 480w, /image-medium.jpg 800w"
    sizes="(max-width: 600px) 480px, 800px"
    alt="描述"
  />
</template>

代码优化

减少重排重绘

/* 使用 transform 代替 top/left */
.element {
  transform: translateX(100px);
}

/* 使用 will-change 提示浏览器 */
.animated {
  will-change: transform;
}

避免阻塞渲染

<!-- 异步加载脚本 -->
<script src="script.js" async></script>

<!-- 延迟加载脚本 -->
<script src="script.js" defer></script>

缓存策略

HTTP 缓存配置

Nginx 配置示例：

# 静态资源长期缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# HTML 文件短期缓存
location ~* \.html$ {
    expires 1h;
    add_header Cache-Control "public, must-revalidate";
}

Service Worker

使用 Vite PWA 插件：

npm add -D vite-plugin-pwa

// docs/.vitepress/config.mts
import { withPwa } from '@vite-pwa/vitepress'

export default withPwa(defineConfig({
  pwa: {
    registerType: 'autoUpdate',
    workbox: {
      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}']
    }
  }
}))

加载优化

预加载关键资源

export default defineConfig({
  head: [
    // 预加载字体
    ['link', { rel: 'preload', href: '/fonts/inter.woff2', as: 'font', type: 'font/woff2', crossorigin: '' }],
    // 预连接
    ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }]
  ]
})

预取下一页

VitePress 默认预取视口内的链接。可配置：

export default defineConfig({
  // 禁用预取
  prefetch: false,
  
  // 自定义预取策略
  prefetch: {
    waitUntil: 'idle'  // 空闲时预取
  }
})

内容优化

减少首屏内容

将复杂内容延迟加载：

<script setup>
import { onMounted, ref } from 'vue'

const showContent = ref(false)

onMounted(() => {
  // 延迟显示非关键内容
  setTimeout(() => {
    showContent.value = true
  }, 1000)
})
</script>

<template>
  <div v-if="showContent">
    延迟加载的内容
  </div>
</template>

代码分块

// docs/.vitepress/config.mts
export default defineConfig({
  vite: {
    build: {
      chunkSizeWarningLimit: 1000,
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/[name]-[hash].js',
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return 'vendor'
            }
          }
        }
      }
    }
  }
})

字体优化

字体子集化

只包含需要的字符：

import { defineConfig } from 'vitepress'

export default defineConfig({
  head: [
    // 使用 Google Fonts 子集化
    ['link', { 
      rel: 'stylesheet', 
      href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap&text=VitePress' 
    }]
  ]
})

字体加载优化

/* 使用 font-display: swap */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

监控与分析

Lighthouse 分析

# 使用 Chrome DevTools 或 CLI
npx lighthouse https://your-site.com --view

性能指标

关注以下指标：

指标	说明	目标值
LCP	最大内容绘制	< 2.5s
FID	首次输入延迟	< 100ms
CLS	累积布局偏移	< 0.1
TTFB	首字节时间	< 600ms

性能预算

// package.json
{
  "scripts": {
    "perf": "lighthouse https://your-site.com --budget-path=budget.json"
  }
}

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "stylesheet", "budget": 100 },
      { "resourceType": "image", "budget": 500 },
      { "resourceType": "total", "budget": 1000 }
    ]
  }
]

性能检查清单

• [ ] 启用 Gzip/Brotli 压缩
• [ ] 配置静态资源缓存
• [ ] 优化图片大小和格式
• [ ] 使用懒加载
• [ ] 预加载关键资源
• [ ] 减少第三方脚本
• [ ] 优化字体加载
• [ ] 分析打包体积
• [ ] 配置 CDN
• [ ] 定期性能测试

下一步

查看 常见问题 解决开发中遇到的问题。