路由懒加载需配合代码分割、预加载、ssr/ssg等协同优化才能显著提升首屏性能，单独使用import()效果有限；关键在于精准拆包、按需交付与提前感知。
路由懒加载本身不能直接把首屏性能评分从 D 拉到 A，但它在真实项目中是关键一环——前提是配合代码分割、预加载策略、服务端渲染（SSR）或静态站点生成（SSG）、资源优先级控制等协同优化。单独加 import() 只能缓解部分问题，真正提分靠的是“精准拆包 + 按需交付 + 提前感知”。
1. 路由懒加载不是“加上就完事”，得看拆得对不对
常见误区：所有路由都用 defineAsyncComponent 或 () => import('./xxx.vue')，但首页核心模块（如 Header、Banner、首屏商品列表）却被塞进异步组件里，导致白屏时间拉长。
- 首屏必需的路由组件（如
/、/home）应保持同步加载，确保 HTML 渲染后 Vue 能立刻挂载并激活 - 非首屏、高内聚、低耦合的模块才适合拆：用户中心（
/user）、订单页（/order）、后台管理（/admin） - 避免“过度拆分”：一个页面被拆成 5 个异步组件，反而增加 HTTP 请求和解析开销，尤其在弱网下更明显
2. 配合 Webpack / Vite 的魔法注释做精细化控制
光写 import('./Page.vue') 不够，要利用构建工具能力做 chunk 策略干预：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 用
/* webpackPrefetch: true */或/* webpackPreload: true */（Vite 中对应prefetch/preload）标记次要但高频路径，让浏览器空闲时提前拉取（例如登录后大概率进个人页，就在登录按钮点击逻辑里 prefetch/user） - 用
/* webpackChunkName: "group-user" */合并语义相关模块，防止生成一堆12.js13.js碎片文件 - Vite 项目可配
build.rollupOptions.output.manualChunks，按业务/第三方库维度统一抽离（如把所有echarts相关逻辑打进charts.js）
3. 首屏性能提分不止靠“懒”，更要“快+准+稳”
Lighthouse 的首屏指标（LCP、FCP、CLS）受多因素影响，懒加载只是其中一环：
-
快：服务端返回 HTML 时，已内联关键 CSS（如全局重置、首屏样式），避免 render-blocking；JS 用
defer或type="module"控制执行时机 -
准：用
<link rel="modulepreload">提前声明主应用入口（index.abc123.js），比等 parser 发现再 fetch 快 100–300ms -
稳：首屏组件避免在
mounted中发起多个并发 API；改用async setup()+await Promise.all([apiA(), apiB()])减少 TTFB 累积延迟
4. 真实项目提分路径（某电商 H5 项目案例）
初始 Lighthouse 移动端首屏评分：D（LCP 5.2s，FCP 3.1s）
- 第一步：移除首页路由懒加载，改为同步 import，LCP 降至 4.3s
- 第二步：将商品详情页、购物车、优惠券弹窗拆为异步组件，并添加
/* webpackPrefetch: true */（用户浏览商品列表时后台静默加载） - 第三步：用
vite-plugin-html注入 critical CSS，搭配build.cssCodeSplit = false防止首屏样式被拆走 - 第四步：API 层加 loading skeleton + 缓存策略（
stale-while-revalidate），FCP 稳定在 1.8s 内 - 最终评分：A（LCP 1.6s，FCP 1.3s，CLS 0.02）
不复杂但容易忽略：懒加载是手段，不是目的；真正的优化，是从用户打开链接那一刻开始算起的整条链路协同。
