什么是 VitePress ?
VitePress
是一款静态网站生成器(SSG
),旨在构建快速、以内容为中心的网站。简而言之,VitePress
获取用Markdown
编写的源内容,将主题应用到其中,并生成可以轻松部署在任何地方的静态HTML
页面。
使用案例
文档
VitePress
附带了一个为技术文档设计的默认主题,尤其是那些需要嵌入交互式演示的文档。它为您现在正在阅读的页面提供了动力,还有Vite
、Pinia
、VueUse
、Mermaid
、Wikimedia Codex
等文档。Vue.js
的官方文档也基于VitePress
,但使用了多个翻译之间共享的自定义主题。博客、投资组合和营销网站
VitePress
支持完全定制的主题,具有标准Vite
+Vue
应用程序的开发体验。构建在Vite
上也意味着您可以直接利用其丰富的生态系统中的Vite
插件。此外,VitePress
还提供了灵活的api
来加载数据(本地或远程)和动态生成路由。只要在构建时可以确定数据,您就可以使用它来构建几乎任何东西。Vue.js
官方博客是一个基于本地内容生成索引页面的简单博客。
开发者经验
VitePress
的目标是在使用Markdown
内容时提供一个伟大的开发体验(DX
)。
Vite-Powered
: 服务器立即启动,编辑总是立即反映(<100ms),无需重新加载页面。Build-in Markdown Extensions
: 封面,表格,语法高亮…你能想到的都有。具体来说,VitePress
为代码块提供了许多高级功能,使其成为高技术文档的理想选择。Vue Ehanced Markdown
: 每个Markdown
页面也是一个Vue
单文件组件,这要归功于Vue
模板与HTML
的100%语法兼容性。可以使用Vue
模板特性或导入的Vue
组件将交互性嵌入到静态内容中。
性能
与许多传统SSG
不同,由VitePress
生成的网站实际上是一个单页应用程序(SPA
)。
- 快速初始加载 对任何页面的首次访问都将提供静态的、预渲染的
HTML
,以获得极快的加载速度和最佳的SEO
。然后,页面加载一个JavaScript
包,将页面转换为Vue SPA
(“水合作用”)。水化过程非常快:在PageSpeed Insights
上,典型的VitePress
站点即使在网络较慢的低端移动设备上也能获得近乎完美的性能分数。 - 快速加载后导航 更重要的是,
SPA
模型在初始加载后会带来更好的用户体验。站点内的后续导航将不再导致整个页面重新加载。相反,将获取并动态更新传入页面的内容。VitePress
还自动预取视口内链接的页面块。在大多数情况下,加载后导航会让人感觉很即时。 - 无禁区的互动性 为了能够在静态
Markdown
中嵌入动态Vue
部件,每个Markdown
页面都被作为Vue
组件处理并编译成JavaScript
。这听起来可能效率很低,但是Vue
编译器足够聪明,可以分离静态和动态部分,从而最小化水合成本和有效负载大小。对于初始页面加载,静态部分将自动从JavaScript
有效负载中删除,并在水合过程中跳过。
VuePress怎么样?
VitePress
是VuePress
的精神继承者。最初的VuePress
基于Vue
2和webpack
。通过Vue
3和Vite
, VitePress
提供了明显更好的DX
、更好的生产性能、更精致的默认主题和更灵活的定制API
。
VitePress
和VuePress
之间的API
差异主要在于主题和定制。如果您正在使用带有默认主题的VuePress 1
,那么迁移到VitePress
应该相对简单。
VuePress 2
也投入了精力,它也支持Vue 3
和Vite
,与VuePress 1
的兼容性更好。然而,同时维护两个SSG
是不可持续的,所以Vue
团队决定将VitePress
作为长期推荐的主要SSG
。