优化 vue 应用初始加载性能关键在于 http/2 与前端资源调度协同：需路由级懒加载、组件级异步加载、第三方库分离、splitchunks 提取公共逻辑，并精准预加载关键资源，配合后端关闭 server push、启用 brotli 压缩与强缓存，以及 dns 预解析和预连接。
优化 Vue 应用初始加载性能，关键不在单点技术，而在于 HTTP/2 传输能力与前端资源调度的协同。HTTP/2 本身不改变组件加载逻辑，但它让合理拆分后的资源能真正并行、低开销地抵达浏览器——前提是前端不打包成“一坨大文件”，后端也不盲目推送。
按需拆分：让 HTTP/2 的多路复用真正起作用
HTTP/2 的多路复用优势，只在多个中小体积资源被并发请求时才明显。若所有代码打成一个 2MB 的 app.js，哪怕启用了 HTTP/2，也还是单个大请求拖慢首屏。
- 路由级懒加载是基础：用
component: () => import('./views/Home.vue')替代静态导入，每个路由生成独立 chunk - 组件级异步加载更精细：对非首屏必需的模块（如图表、编辑器、弹窗）使用
defineAsyncComponent或动态import() - 第三方库分离：通过 webpack 的
externals或 Vite 的optimizeDeps.exclude，将 Vue、Vue Router 等剥离，配合 CDN 加载 - 启用
splitChunks提取公共逻辑：把重复引用的工具函数、通用组件、UI 库抽成chunk-commons或chunk-libs，避免重复下载
精准预加载：用 rel="preload" 提前唤起关键资源
浏览器默认按 HTML 解析顺序发起请求，但首屏渲染依赖的 JS/CSS 往往藏在深层 chunk 里。主动 <link rel="preload"> 可让浏览器提前拉取，不阻塞渲染。
- 只预加载当前页面必用资源：比如首页需要的 layout.js、核心 API 工具包、主色调 CSS，而非所有路由的 chunk
- 在 index.html 或 SSR 模板中静态写入：
<link rel="preload" href="/js/layout.abc123.js" as="script"> - 避免滥用
rel="prefetch"：它适用于用户「下一步可能访问」的资源（如登录后大概率进个人中心），放在首屏会抢占带宽 - 搭配
103 Early Hints更高效：后端在返回 HTML 前先发一个 103 响应，内含Link: /runtime.js>; rel=preload; as=script，比 HTML 里的 preload 更早触发
后端配合：HTTP/2 配置要到位，Server Push 已淘汰
HTTP/2 不是开了就赢。现代实践中，服务端推送（Server Push）已被主流浏览器弃用，继续启用反而浪费连接和缓存。
- Nginx/Apache 启用 HTTP/2：监听配置加
http2，例如listen 443 ssl http2;，并确保 TLS 版本 ≥ 1.2 - 关闭 Server Push：Nginx 1.21.4+ 默认禁用，旧版本需显式设
http2_push off; - 开启 Brotli 压缩：比 Gzip 平均再压 15–20%，尤其对 JS/CSS 效果明显
- 设置强缓存头：对带哈希的静态资源（
app.a1b2c3.js）返回Cache-Control: public, max-age=31536000，让浏览器长期缓存
补充加速项：DNS 与连接层优化
资源还没开始传，连接建立就耗掉几百毫秒。预连接能压缩这部分延迟。
- 在 index.html head 中加入：
<link rel="dns-prefetch" href="https://cdn.example.com"> - 加上预连接：
<link rel="preconnect" href="https://cdn.example.com" crossorigin>，提前完成 DNS 查询、TCP 握手、TLS 协商 - 对 API 服务也可预连接：
<link rel="preconnect" href="https://api.example.com" crossorigin>，尤其适合首屏需调用接口的场景 - 注意：不要对未使用的域名 preconnect，否则占用连接池，得不偿失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
