真正提速的关键是区分Prefetch与Preload，核心组件应采用Preload+路由懒加载+构建提示组合策略；Prefetch仅适用于高频跳转的下个页面，禁用默认Prefetch并精准控制。
Vue 初始化时不能靠“写在前面就先加载”来实现核心逻辑优先，Prefetch 的本质是浏览器空闲时预取资源，不参与关键路径。真正提速的关键，是把 Prefetch 和 Preload 区分开，并让核心组件走 Preload + 路由懒加载 + 构建提示 的组合策略。
别把 Prefetch 当成首屏加速器
Prefetch 是为“下个页面”准备的，比如用户大概率会点「订单页」，你才对它做 prefetch；它不会提升当前页面的加载速度，反而可能挤占带宽、拖慢首屏。Vue CLI 或 Vite 默认开启的 prefetch 插件，在大型项目中常成首屏瓶颈——尤其当它把几十个非关键路由 chunk 全 prefetch 时。
- 禁用默认 prefetch：Vite 中在
vite.config.js关闭build.rollupOptions.output.manualChunks的宽泛分包，或显式移除rollup-plugin-prefetch类插件 - Webpack 项目可在
vue.config.js中配置：config.plugins.delete('prefetch') - 只对明确高频跳转的二级路由（如 /user → /user/settings）保留少量 prefetch，且用注释控制：
import(/* webpackPrefetch: true */ './Settings.vue')
核心逻辑该用 Preload，不是 Prefetch
Preload 才是首屏关键资源的正确打开方式：它告诉浏览器“这个 JS/CSS 立刻下载，马上要用”，和当前导航并行执行，优先级高、无兼容陷阱（现代浏览器全支持）。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在路由定义中直接标记核心页面：
component: () => import(/* webpackPreload: true */ '@/views/Home.vue') - Vite 用户无需 Webpack 注释，改用
import('./Home.vue', { with: { preload: true } })（Vite 5+ 原生支持） - 搭配
webpackChunkName命名，确保打包后 chunk 可被 CDN 缓存识别，避免重复下载
构建层配合：让核心代码真正“零等待”
光靠 import 注释还不够。如果核心组件依赖的工具库（如 pinia、vue-router）被打进 vendor chunk，而 vendor 又没被 preload，那还是卡在解析阶段。
- 在
vite.config.js中精细切分 manualChunks：vendor: ['vue', 'vue-router', 'pinia'],<br>core: ['@/composables/useAuth', '@/stores/main']
- 对
corechunk 显式 preload：通过build.rollupOptions.output.entryFileNames配合 HTML 插件注入<link rel="preload"> - 服务端渲染（SSR）场景下，确保核心组件模块在
renderToString时已同步 resolve，不降级为客户端异步加载
验证是否生效：三步确认法
优化不是写了注释就完事，必须验证。
- 打开 Chrome DevTools → Network 面板，过滤
initiator列，确认 Home.vue 对应 chunk 的 initiator 是preload，不是script或other - 对比 Lighthouse 报告中的 “Eliminate render-blocking resources”，核心 chunk 应不再出现在阻塞列表中
- 用
performance.getEntriesByType('navigation')[0].transferSize查看首屏 JS 总传输量，目标是比优化前下降 60% 以上（实测常见于 1.7MB → 0.6MB）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
