博客 前端工程

VitePress 站点性能优化实战

从构建配置、运行时加载、第三方依赖三个维度，拆解 VitePress 1.x 站点的常见性能瓶颈。

2 分钟阅读347 字
VitePress性能优化静态站点

一、概述

VitePress 默认已基于 Vite 6 + Vue 3 做了大量优化，但当站点文章数量超过 200 篇或引入大量第三方组件时，仍然会出现首屏白屏、路由切换卡顿等问题。本文从构建产物、运行时加载、依赖治理三方面给出可落地的优化清单。

二、背景

VitePress 在构建时会把每个 Markdown 文件预渲染成独立的 HTML 入口，再由前端 SPA 接管路由。这种"SSG + 客户端水合"的混合模式带来两个挑战：

  1. 大量 chunk 在首次访问时被并行请求；
  2. 自定义主题组件如果在浏览器端重复执行，hydration 成本会被放大。

三、实践

3.1 拆包策略

利用 vite.build.rollupOptions.output.manualChunks 把体积较大的依赖单独切分：

TS
manualChunks(id: string): string | undefined {
  if (id.includes('node_modules/katex')) return 'math'
  if (id.includes('node_modules/lucide-vue-next')) return 'icons'
  if (id.includes('node_modules/echarts')) return 'charts'
  return undefined
}

3.2 关闭不必要功能

TS
export default defineConfig({
  cleanUrls: true,
  srcExclude: ['content/**/*.md'],
  markdown: { lineNumbers: false }, // 长文关闭行号可节省 ~20% 体积
})

3.3 路由级懒加载

TS
const PostPage = defineAsyncComponent(() => import('./components/PostPage.vue'))

3.4 资源预加载

TS
head: [
  ['link', { rel: 'preload', as: 'font', href: '/fonts/inter.woff2', crossorigin: '' }],
  ['link', { rel: 'modulepreload', href: '/assets/chunks/vue.js' }]
]

四、效果对比

指标 优化前 优化后
首屏 LCP 3.2s 1.4s
主线程阻塞 480ms 160ms
总请求数 86 42

五、总结

  • 拆分第三方依赖是见效最快的一招。
  • 关闭与场景无关的 markdown 插件，避免 hydration 阶段重复执行。
  • 预加载关键资源，把首屏关键路径提前到 HTML 解析阶段。

进一步可结合 Web Vitals 持续监控并设置性能预算。

文章 slug: vitepress-performance-guide 最后更新: 2026-06-15

版权声明 · CC BY-NC-ND 4.0

署名-非商业性使用-禁止演绎 4.0 国际

版权归属

本作品著作权归 窦长友 所有， 首次发布于 ，受相关知识产权法律法规保护。

授权范围
  • 可自由分享 — 在任何媒介以任何形式复制、转载本文
  • 不得用于商业目的 — 未经书面授权禁止商用
  • 禁止演绎修改 — 不得改编、转换或以本文为基础再创作
署名要求

转载或引用时须明确标注作者姓名、原文出处及本许可协议链接。 不得以任何方式暗示或声称作者为您的使用背书。

查看完整许可证 法律文本（英文）

评论

由 GitHub Discussions 驱动