import()实现运行时按需加载，返回Promise，适用于路由、交互、条件等场景；配合prefetch预取可提升体验，preload则用于当前页急需资源。
使用 import() 动态导入可实现真正的按需懒加载，配合首屏预取（preload/prefetch）能兼顾性能与用户体验——关键在于区分“真正需要时才加载”和“预判用户下一步可能需要、提前准备”。
用 import() 实现精准懒加载
动态 import() 返回 Promise，只在调用时触发模块解析与加载，不参与初始打包。适合路由级、功能级、条件级拆分：
-
路由懒加载：React Router 或 Vue Router 中，将组件定义为异步函数，如
const Page = () => import('./pages/Home.vue')；实际访问该路由时才请求并执行模块。 -
交互触发加载：点击按钮后才加载复杂图表库或编辑器，例如：
button.addEventListener('click', async () => { const { Editor } = await import('./editor.js'); new Editor(); }); - 条件分支加载：根据环境、权限或配置决定加载哪个模块，避免无意义的 bundle 体积膨胀。
首屏预取：让“懒”不等于“卡”
懒加载虽省流量，但首次触发可能有明显等待。预取（<link rel="prefetch">）可在浏览器空闲时提前下载资源，不阻塞渲染，也不立即执行。适用于高概率后续访问的模块：
- 在首屏 HTML 中手动添加：
<link rel="prefetch" href="/js/next-page.abc123.js" as="script">（需构建时生成确定路径）。 - Webpack/Vite 等工具支持自动注入：例如 Vite 的
import.meta.webpackPrefetch（仅 Webpack）或通过插件分析路由图，在首屏 HTML 中注入高频次页面的 prefetch 标签。 - 更精细控制可用
document.createElement('link')+rel=prefetch动态插入，比如用户 hover 导航菜单项 200ms 后预取对应模块（即“hover prefetch”）。
预取 vs 预加载（preload）别混淆
preload 是强制高优先级提前加载当前页面**马上要用**的资源（如关键字体、首屏图片），会阻塞 DOM 解析；而 prefetch 是低优先级、空闲时加载**将来可能用**的资源，不影响首屏速度。对懒加载模块，应始终用 prefetch，而非 preload。
构建与部署需协同优化
动态 import 生成的 chunk 文件名含 hash，需确保 HTML 能正确引用：
- 服务端渲染（SSR）中，需在首屏 HTML 注入正确的 prefetch link，且路径与构建输出一致（建议用构建产物 manifest 或插件自动注入）。
- CDN 缓存策略要区分：主包可长期缓存，prefetch 的 chunk 也需带 hash 并设置合理缓存头，避免预取内容过期失效。
- 监控预取效果：通过
PerformanceObserver监听resource类型，检查 prefetch 资源是否被复用；也可在 Network 面板观察Initiator列是否为Prefetch Cache。
不复杂但容易忽略：预取不是越多越好，应基于真实用户行为数据筛选目标模块；懒加载也不是所有地方都适用——核心交互链路上的模块，预取 + 懒加载组合才是平衡点。
