预编译是构建阶段将源码转为可执行代码的必要环节，不影响首屏性能；预渲染是构建后生成静态HTML以提升首屏速度和SEO，适用于静态、路由可控的场景。
预编译和预渲染常被混淆，但它们解决的问题、作用阶段和适用场景完全不同。预编译（如 Babel 编译、TS 转译、SFC 解析）发生在构建前或构建中，属于开发流程环节；而预渲染（Prerendering）是构建后针对特定路由生成静态 HTML 的优化手段，直接作用于首屏加载体验。
预渲染：构建时生成静态 HTML，提升首屏可见速度
预渲染在项目 build 阶段运行，通过无头浏览器（如 Puppeteer）访问指定路由，执行 Vue 应用并捕获渲染完成后的 HTML 内容，为每个目标路由生成一个独立的 .html 文件（例如 /about.html、/product/123.html）。用户首次访问时，服务器直接返回已含内容的 HTML，无需等待 JS 下载、解析、挂载。
- 适合页面内容相对静态、路由数量可控（几十个以内）的站点，比如企业官网、活动页、博客列表页
- 天然改善 SEO，爬虫可直接抓取完整 DOM 结构
- 不适用于个性化路径（如
/user/profile）、实时数据页（如排行榜、聊天室），因为生成的 HTML 不会随用户或状态变化而更新 - 常用工具：prerender-spa-plugin（Vue CLI 4 及以下）、@prerenderer/prerenderer（现代替代）、或 Vite 生态的 vite-plugin-prerender
预编译：不是性能优化手段，而是构建必要环节
“预编译”本身不是 Vue 加载优化的专有方案。它泛指将源码（如 .vue 单文件、TypeScript、JSX）转换为浏览器可执行代码的过程，由 vue-loader、@vue/compiler-sfc、Babel 等在 webpack/vite 构建时完成。这个过程不可跳过，也不直接影响首屏时间——它影响的是构建效率和产物质量，而非运行时加载表现。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 若误将“开启 babel 缓存”“启用 cacheDirectory”称作“预编译优化”，实际只是加速构建，并不减少用户侧资源体积或请求数
- 真正影响加载的，是构建产出结果：是否做了代码分割、是否启用 gzip、是否外链 CDN、是否移除 source map 等
- 把“预编译”当作加载优化来谈，容易偏离问题本质；应聚焦于构建产物的体积控制与加载策略
比预渲染更轻量且通用的替代方案
当预渲染因路由多、内容动态而不适用时，可组合使用以下技术达成相近效果：
立即学习“前端免费学习笔记（深入）”；
-
路由懒加载 + 异步组件：用
() => import('./Page.vue')拆分 chunk，让首页只加载核心逻辑 -
服务端渲染（SSR）：对需强 SEO 或高动态性场景，用 Nuxt 或 Vue 3 的
createSSRApp实现按需渲染 - 静态资源优化：启用 gzip/brotli 压缩、图片转 WebP + 懒加载、关键 CSS 内联、第三方库走 CDN
- HTTP/2 + 缓存策略：利用多路复用减少请求阻塞，设置 long-term cache 对 js/css 加 hash 后缀
一句话总结选择逻辑
想让用户打开链接就立刻看到内容？→ 查看是否满足预渲染前提（静态、路由少、无需登录态）；不满足？→ 放弃预渲染，转向 SSR 或强化客户端加载策略（懒加载 + 压缩 + CDN + 缓存）。预编译无需“选”，它始终存在；需要优化的是它产出的结果，而不是它本身。
