prerender-spa-plugin可将首屏内容渲染压至100–300ms内可见，前提是页面静态或初始状态可预测；它通过构建时html直出替代js下载、解析、挂载等运行时流程，但不适用于需鉴权、带动态参数或依赖客户端状态的路由。
prerender-spa-plugin 能把白屏时间压到多少？
它能把首屏内容渲染时间从「JS 下载 + 解析 + 挂载 + API 请求 + 渲染」压缩到「HTML 直出」——实际效果通常是 100–300ms 内可见首屏文字/结构，前提是页面静态或初始状态可预测。这不是魔法，而是用构建时确定性换运行时不确定性。
常见误判：以为加了插件就自动“秒开”。真实瓶颈常在：staticDir路径错导致资源 404、routes漏写导致部分路径没生成、Vue 实例挂载时机早于 DOM 就绪（尤其 Vue 2 的 new Vue() 写法）。
- Vue 3 推荐用
app.mount('#app')，避免document.getElementById返回 null - 必须用
history模式路由；hash模式下预渲染会输出/index.html#/about这种无效路径 -
renderAfterDocumentEvent触发点要和 main.js 里dispatchEvent(new Event('xxx'))名称严格一致，大小写敏感
为什么有些页面预渲染后反而更慢？
预渲染不是给所有页面“贴加速补丁”，它只对满足以下条件的路由有效：初始数据固定、无登录态依赖、不读取 localStorage 或 Geolocation、URL 无动态参数。一旦违反，就会出现两种典型问题：
- 内容错乱：比如预渲染时用户未登录，却生成了带“欢迎，张三”的首页 HTML，上线后 CSR 接管时闪白或报错
- 二次 hydration 失败：服务端生成的 DOM 结构与客户端 JS 渲染结果不一致，Vue/React 报
Hydration failed警告，降级为全量重渲染
典型反例：/user/profile（需鉴权）、/search?q=xxx（带 query）、/product?id=123（动态 ID）——这些都不该放进 routes 数组。
vite-plugin-prerender 和 prerender-spa-plugin 的关键差异
别混用。Vite 项目硬套 Webpack 插件会直接构建失败，因为二者底层 loader、resolve 逻辑完全不同。vite-plugin-prerender 默认用 Puppeteer，但配置项命名和生命周期钩子都更贴近 Vite 生态。
-
routes必须是真实可访问路径，如['/about']，不是['/about.html']（后者会导致 404） - Vite 默认开启
base: '/'，若部署在子路径（如/my-app/），必须显式设base: '/my-app/'，否则预渲染生成的<script src="/assets/xxx.js"></script>会 404 - 插件不支持
renderAfterTime，只认renderAfterDocumentEvent或renderAfterElementExists，别照搬 Webpack 配置
link rel="prerender" 在 2026 年还有效吗？
完全无效。Chrome v110+ 默认关闭，Edge 同步弃用，Firefox/Safari 从未实现。你在 HTML 里写 <link rel="prerender" href="/product">，Network 面板里根本看不到请求，控制台也无日志——不是“没生效”，是浏览器压根不解析这行标签。
真正起作用的是 <link rel="prefetch" href="/product" as="document">，它被所有现代浏览器支持，只下载 HTML 不执行 JS，配合前端路由可手动 hydrate。但注意：prefetch 是低优先级资源，若网络繁忙或内存紧张，可能被丢弃；而 preload 只适合关键 CSS/JS，不能用于 HTML。
构建时预渲染和运行时 prefetch 是互补关系，不是替代关系。前者解决 SEO 和首次加载，后者优化后续导航。混淆这两者，容易在关键入口页留下不可控的白屏缺口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
