VitePress MPA 模式

VitePress 的核心是一个单页应用（SPA），它在首次加载后通过客户端路由进行页面导航，无需整页刷新。然而，在某些特定场景下，你可能希望网站表现得像一个传统的多页应用（MPA），即每次导航都进行完整的页面加载。

VitePress 提供了 mpa: true 选项来启用此模式。

何时使用 MPA 模式？

• 极致轻量：如果你希望每个页面的 JavaScript 负载都尽可能小，不加载 Vue 路由器和其他 SPA 相关的客户端逻辑。
• 隔离环境：当页面之间完全独立，不需要共享状态，并且你希望避免客户端脚本可能带来的复杂性时。
• 特殊嵌入场景：当 VitePress 页面需要被嵌入到另一个完全不同的网站或应用中，使用 MPA 模式可以减少潜在的样式和脚本冲突。

如何启用

在你的 .vitepress/config.js 配置文件中，设置 mpa: true。

// .vitepress/config.js
export default {
  // ...其他配置
  mpa: true
}

MPA 模式下的行为变化

启用 MPA 模式后，VitePress 的行为会有以下关键变化：

1. 禁用客户端路由：Vue Router 不再被打包到客户端构建中。所有的页面导航都会触发传统的浏览器整页加载。
2. 更小的 JS 体积：由于没有了路由和 SPA 相关的逻辑，每个页面的初始 JavaScript 体积会显著减小。
3. 页面间状态不保留：因为每次都是整页刷新，所以 Vue 组件的内存状态（如 ref 或 reactive 的值）在页面跳转后不会被保留。

注意事项

• 用户体验：MPA 模式下的页面切换可能会有白屏闪烁，不如 SPA 模式流畅。对于以内容为主、交互较少的文档网站，这通常是可以接受的。
• 数据持久化：如果你需要在页面之间共享数据，你需要依赖传统的 Web 存储机制，如 localStorage 或 sessionStorage，而不是 Vue 的内存状态管理。
• 预加载：VitePress 在 SPA 模式下的一些性能优化，如预加载视口内链接的页面资源，在 MPA 模式下将不可用。

总结

MPA 模式是 VitePress 提供的一个“逃生舱”，它让你在需要时可以回归到更传统的 Web 工作方式。它牺牲了 SPA 的流畅导航体验，换来了更小的客户端负载和更简单的页面生命周期。

对于绝大多数文档网站来说，默认的 SPA 模式是最佳选择。只有在你明确知道为什么需要 MPA，并且愿意接受其带来的变化时，才应考虑启用此模式。