http/2 本身不直接优化 vue 组件加载逻辑,但通过多路复用、hpack 压缩和 tls 加速,显著提升 js/css/图片等静态资源并行加载效率;需前端合理拆分 chunk + preload 提示,后端启用 http/2 并禁用 server push、改用 103 early hints,配合 brotli 压缩与强缓存策略。

HTTP/2 本身不直接优化 Vue 组件加载逻辑,但它能显著提升资源传输效率,从而间接加速组件依赖的 JS、CSS、字体、图片等静态资源的并行加载。关键在于:前端合理拆分与预加载,后端正确配置 HTTP/2 支持与服务端推送(或现代替代方案),两者协同才能释放 HTTP/2 的真实价值。
前端:按需拆分 + 资源提示(不用服务端推送也能见效)
Vue 应用通常打包为 chunk 文件(如路由级异步组件生成的 123.chunk.js)。HTTP/2 的多路复用优势,只有在多个小资源被并发请求时才明显。因此前端要避免「大包单载」:
- 启用 Vue Router 的异步组件语法:
component: () => import('./views/Dashboard.vue'),让每个路由生成独立 chunk - 对非首屏强依赖的 UI 组件(如图表库、富文本编辑器)也做动态导入,例如:
const Chart = await import('echarts') - 在
index.html或 SSR 模板中,主动添加<link rel="preload">提示关键 chunk,比如预加载主布局、核心工具函数包:
- 避免滥用
rel="prefetch"——它适用于用户「可能访问」的后续页面,而非当前渲染必需资源;HTTP/2 下盲目 prefetch 反而挤占首屏带宽
后端:启用 HTTP/2 + 合理使用 Server Push(谨慎!新版 Nginx/Apache 已默认禁用)
HTTP/2 Server Push 曾被寄予厚望(如推送 Vue 组件所需 CSS 和 runtime.js),但实践发现易造成资源冗余和缓存失效。现代最佳实践是:

