<p>动态导入本身不预加载，需配合Prefetch机制实现提前下载：Webpack中用/ webpackPrefetch: true /注释，Vite中用import.meta.preload，或手动调用import()触发隐式预加载，均在浏览器空闲时下载chunk至缓存，适用于高概率访问的非首屏页面。</p>
动态导入（import()）本身只负责按需加载，不带预获取能力；要实现“提前下载、点击即用”，必须配合构建工具的 Prefetch 提示或手动触发机制。关键不是写对 import()，而是让浏览器在用户操作前就把代码块拉进缓存。
Webpack 项目：用注释开启静默预加载
在动态导入语句中添加 Webpack 特殊注释，即可启用空闲时自动预获取：
- 写法：
const Profile = () => import(/* webpackPrefetch: true */ '@/views/Profile.vue') - 效果：主包加载完、浏览器空闲时，自动发起请求下载该 chunk，并存入 HTTP 缓存（或 Service Worker 缓存）
- 注意：它不会执行组件、不触发生命周期，只是下载 JS 文件；适合「大概率会点但非首屏」的页面，比如设置页、订单页
Vite 项目：用 import.meta.preload 主动控制
Vite 不依赖注释，提供更灵活的 API，支持运行时判断后精准触发：
- 基础用法：
import.meta.preload('./Profile.vue')或import.meta.preload(() => import('./Profile.vue')) - 可结合交互事件：例如按钮 hover 100ms 后调用 preload，避免误触
- 支持条件逻辑：登录后根据角色预加载「收藏」「消息」等模块，网络慢（
navigator.connection.effectiveType === '2g'）时直接跳过
通用方案：手动触发 import() 实现隐式 Prefetch
即使不依赖构建工具提示，只要在合适时机调用 import()，现代打包器（Webpack/Vite）也会识别为 prefetch 行为：
- Vue Router 中可在
beforeEach钩子中判断目标路径，对特定路由执行import('./xxx.vue').catch(() => {})（空加载即触发下载） - React 中可绑定
onMouseEnter，调用import('./Detail.jsx')，Webpack 自动转为高优先级 preload 或低优先级 prefetch - 优势：完全可控，能结合用户行为、AB 实验、权限状态动态决策是否预加载
验证与注意事项
预加载是否生效，不能只看代码，要实测确认：
- 打开 Chrome DevTools → Network → 筛选 JS 请求，观察目标 chunk 是否在用户点击前就已开始下载（状态可能是 pending 或 finished）
- 避免过度预加载：限制并发数（如最多 2 个）、设置超时（3 秒无后续动作则取消）
- prefetch 只下载不执行，所以不会影响当前页面性能；但若预加载太多冷门模块，反而挤占带宽，得不偿失
