http/2 不改变 vue 加载逻辑但提升静态资源传输效率，需前后端协同：前端用异步组件和动态 import 拆分 chunk、合理使用 preload/prefetch；后端启用 http/2 并禁用已废弃的 server push。

HTTP/2 本身不直接改变 Vue 的加载逻辑，但它能大幅改善 JS、CSS、字体、图片等静态资源的传输效率。真正起效的关键，是前端合理组织资源 + 后端正确启用并配置 HTTP/2，两者配合才能把多路复用、头部压缩这些特性用到位。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

前端：拆分 chunk 并主动提示关键资源

Vue Router 的异步组件语法（`component: () => import('./views/Home.vue')`）会让每个路由生成独立 chunk，天然适配 HTTP/2 的并发优势。 非首屏必需的重型依赖（比如 ECharts、Monaco 编辑器、PDF 渲染器）也建议用 `import()` 动态引入，避免初始包过大。 在 `index.html` 或 SSR 模板中，对首屏强依赖的资源加 ``，例如： ```html ``` 注意别滥用 `prefetch`——它适合预取用户「下一步可能点」的页面资源，不是当前渲染需要的。

后端：启用 HTTP/2 并禁用 Server Push

Nginx 或 Apache 必须开启 HTTP/2（通常需 HTTPS + `listen 443 ssl http2;`）。 Server Push 已被主流浏览器弃用（Chrome 96+ 移除，Firefox 停用），旧版 Nginx（; rel=preload; as=script`，让浏览器尽早发起请求。

配套优化不能少

CDN 必须支持 HTTP/2（主流服务商如 Cloudflare、阿里云 CDN、腾讯云 CDN 默认开启）。 静态资源路径要指向 CDN 域名（`vue.config.js` 中设 `publicPath`），同时开启 Brotli 压缩和强缓存（`Cache-Control: public, max-age=31536000, immutable`）。 第三方库（Vue、Axios、Lodash 等）可通过 CDN 引入，并在 `externals` 中排除打包，进一步减小主包体积。

验证是否生效

打开 Chrome DevTools → Network 面板，刷新页面，看资源协议列是否显示 `h2`； 检查请求是否复用同一 connection ID（Connection ID 列值一致即为多路复用成功）； 对比 HTTP/1.1 下的请求数与连接数，HTTP/2 应明显减少连接建立开销，尤其在资源量大的页面上效果突出。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！