预加载（preload）是高优先级、立即下载当前导航必需资源，预取（prefetch）是低优先级、空闲时下载未来可能使用的资源；前者提升首屏确定性，后者优化后续交互速度。
JavaScript模块系统中，预取（prefetch）和预加载（preload）都是资源提示机制，但目标、时机和使用场景截然不同。理解它们的差异，能避免资源浪费或关键资源延迟加载。
预加载（preload）：高优先级、立即执行
预加载告诉浏览器“这个资源我马上就要用”，浏览器会以最高优先级提前获取并缓存它，但不会自动执行或解析（如脚本不执行，样式表不应用）。适用于当前导航中明确需要、但尚未触发使用的资源。
- 适用场景：关键字体、首屏所需异步组件的代码块、核心 polyfill 脚本、即将通过
import()动态引入的模块 - 声明方式：通常用
<link rel="preload">或在动态import()前手动调用fetch()+new Function()（不推荐），主流框架（如 Webpack、Vite）支持/* webpackPreload: true */或/* vite: preload */注释语法 - 注意点：预加载的资源若未在当前生命周期内被实际使用（例如页面跳转前没调用对应
import()），会造成带宽浪费；不能跨域预加载（除非crossorigin属性匹配）
预取（prefetch）：低优先级、未来备用
预取告诉浏览器“这个资源我**之后可能**会用”，浏览器会在空闲时（如当前任务完成、网络空闲、CPU 闲置）以最低优先级下载，并存入 HTTP 缓存或磁盘缓存。不阻塞渲染，也不影响当前页面性能。
- 适用场景：下一页路由对应的 JS chunk、用户大概率点击的按钮关联模块（如“编辑文档”按钮后的富文本编辑器）、登录后才需要的管理后台模块
- 声明方式：常用
<link rel="prefetch">，也可通过import()配合/* webpackPrefetch: true */或 Vite 的/* vite: prefetch */ - 注意点：预取不保证资源一定被加载完成；浏览器可随时取消（如网络切换为省流模式、内存紧张）；对 SEO 和首屏指标无影响，但能显著提升后续交互的响应速度
核心区别一句话总结
preload 是“我现在就要，立刻下载”，prefetch 是“以后也许要，有空再下”。前者关乎当前体验的确定性，后者关乎后续体验的潜在优化；前者由开发者强声明使用时机，后者依赖浏览器调度策略；错误使用 preload（比如预加载非首屏资源）反而拖慢首屏，而 prefetch 几乎没有副作用。
实际搭配建议
- 首屏关键模块：用
preload（如主业务逻辑、核心 UI 组件） - 路由级代码分割模块：默认用
prefetch（React Router / Vue Router 默认启用） - 用户行为强预期场景（如悬停菜单后 300ms 内大概率点击）：可在事件监听中动态触发
import()，或提前prefetch相关 chunk - 避免对大体积资源（>500KB）盲目
preload，尤其在弱网环境下；prefetch对大资源更友好，但也要评估缓存命中率
不复杂但容易忽略：现代打包工具已封装大部分逻辑，但真正发挥效果，取决于你是否清楚每个模块的用户路径权重和加载时机语义。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
