组件懒加载预下载的核心是利用Prefetch提前拉取用户很可能即将访问的代码块，使其进入浏览器磁盘缓存，跳转时直接读取实现秒开；关键在于精准控制触发时机而非import()写法。
组件懒加载时预下载，核心是利用 Prefetch 提前拉取用户「很可能即将访问」的代码块，等真正跳转或挂载时直接从缓存读取，实现秒开效果。关键不在“怎么写 import()”，而在于“什么时候触发 prefetch”。
Prefetch 的本质是资源预获取，不是自动执行
Webpack 和 Vite 都支持 /* webpackPrefetch: true */ 或 /* @vite-ignore */ + import.meta.preload，但要注意：Prefetch 只会发起 HTTP 请求下载 JS chunk，不会解析、执行，也不会触发组件生命周期。它只是把代码提前放进浏览器磁盘缓存。
- 适合场景：二级页面（如用户点击「个人中心」前，已 prefetch 对应模块）
- 不适合场景：首页首屏、高频切换的 Tab（prefetch 太多反而抢带宽）
- 验证是否生效：打开 DevTools → Network → 切换到「All」或「JS」，筛选 pending 状态的 chunk，看是否在用户操作前就已开始下载
手动触发 Prefetch：比注释更可控
依赖构建工具注释的方式不够灵活（比如无法根据用户行为、权限、AB 实验动态决定是否 prefetch）。推荐显式调用：
- Vite 项目：
import.meta.preload('./Profile.vue')或import.meta.preload(() => import('./Profile.vue')) - Webpack + React：
const Profile = React.lazy(() => import(/* webpackPrefetch: true */ './Profile'))，或在鼠标悬停时手动触发：onMouseEnter={() => import('./Profile')}（Webpack 会自动识别为 prefetch） - Vue Router：
beforeEach中判断目标路由，对特定路径调用import('./xxx').catch(() => {})（空加载即触发 prefetch）
结合用户行为智能预加载
单纯靠路由配置 prefetch 容易浪费。可叠加轻量级预测逻辑：
- 按钮 hover 100ms 后触发 prefetch（防误触）：
setTimeout(() => import('./Settings.vue'), 100) - 用户滚动到页面底部，prefetch 下一页列表数据 + 组件（适合长列表分页）
- 登录后立即 prefetch「订单」「收藏」等高概率入口模块（根据用户角色或历史行为）
- 注意降级：网络慢（
navigator.connection.effectiveType === '2g'）或低电量模式下跳过 prefetch
验证与优化要点
Prefetch 不是开箱即用的银弹，需关注实际效果：
- 检查 chunk 是否被复用：同一 chunk 在 prefetch 和正式 import 时，Network 面板应显示
from disk cache或from memory cache - 避免重复 prefetch：加全局标记（如
window.__prefetched = new Set()），请求前先查是否已触发 - 控制并发：大量 prefetch 可能阻塞主资源，可用 Promise.allSettled + 限流（如最多同时 2 个）
- 服务端配合：确保 chunk 资源响应头含
Cache-Control: public, max-age=31536000，避免重复下载
不复杂但容易忽略：Prefetch 是浏览器缓存层面的优化，和 SSR、hydration 无关，也无需改组件逻辑。重点是选对时机、控好节奏、验得清楚。
