不久前，尤大在朋友圈十分鸡冻地爆料，VitePress 1.0 正式发布，这也是 VitePress 诞生以来升级的第一个语义化主版本，一个值得纪念的里程碑。

VitePress官网链接：https://vitejs.cn/vitepress/

VitePress是什么？

VitePress 是一个基于 Vite 的静态网站生成器，专注于构建快速、简洁的文档网站。它利用 Vite 的构建性能优势，提供了优化的开发体验和高效的静态页面生成，适用于技术文档、博客等内容的展示。

VitePress 介绍及其特点

VitePress 是一个专为构建快速、以内容为中心的网站设计的静态站点生成器（SSG）。它通过处理用 Markdown 编写的内容，应用主题，并生成可以轻松部署的静态 HTML 页面，简化了创建和维护网站的过程。

使用场景

VitePress 主要适用于以下几种场景：

  1. 技术文档
    VitePress 附带了一个专为技术文档设计的默认主题。许多知名文档网站，如 Vite、Rollup、Pinia 和 Vue.js 官方文档，都使用了这个主题。Vue.js 官方文档在 VitePress 的基础上进行了定制，以支持不同语言之间的切换。

  2. 博客、档案和营销网站
    VitePress 支持完全自定义的主题，并兼容标准的 Vite + Vue 开发体验。其强大的 Vite 插件生态系统和灵活的 API 使得它能够处理本地或远程数据，并动态生成路由。比如，Vue.js 官方博客就是一个简单的博客页面，它利用本地内容生成了索引页面。

开发体验

VitePress 提供了卓越的开发体验，特别是在使用 Markdown 生成内容时：

  • Vite 驱动：得益于 Vite 的支持，VitePress 提供即时的服务器启动和编辑反映（<100ms），无需重新加载页面。

  • 内置 Markdown 扩展：包括 frontmatter、表格和语法高亮等，使其成为技术文档的理想选择。

  • Vue 增强的 Markdown：每个 Markdown 页面都是 Vue 单文件组件，可以在静态内容中嵌入动态交互，利用 Vue 模板语法和组件。

性能优势

与许多传统的 SSG 不同，VitePress 提供了更高效的性能体验：

  • 快速的初始加载：网站初次访问时提供静态 HTML 页面，确保快速加载和最佳 SEO。随后，页面加载一个 JavaScript bundle，将其转换为 Vue 单页应用（SPA），这一过程因 Vue 3 的优化而十分迅速。

  • 流畅的页面切换：在首次加载后，用户在站点内的导航不会触发页面刷新，而是通过动态更新内容实现切换。同时，VitePress 会预加载视口范围内的链接，提升用户体验。

  • 高效的交互：虽然 Markdown 页面被处理为 Vue 组件并编译成 JavaScript，但 Vue 编译器能够智能地将静态和动态部分分开，从而最小化激活成本和有效负载大小。

VitePress 与 VuePress 的比较

VitePress 的设计灵感来源于 VuePress。最初的 VuePress 基于 Vue 2 和 webpack，而 VitePress 利用 Vue 3 和 Vite 的优势，提供了更好的开发体验和生产性能。VitePress 的默认主题更加精美，且 API 更加灵活。

尽管 VuePress 2 也支持 Vue 3 和 Vite，并与 VuePress 1 具有更好的兼容性，但由于并行维护两个 SSG 的难度，Vue 团队决定将重点转向 VitePress，并将其作为推荐的主要 SSG 选择。

总的来说，VitePress 通过提供高效的开发体验和出色的性能，成为构建内容驱动网站的优秀工具。

您好，我是肥晨。 欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。