javascript 实现模块预取的核心做法是调用 import() 函数并立即处理返回的 promise，利用浏览器空闲时间或特定事件提前加载代码。开发者只需在需要时触发该调用，浏览器就会将模块下载并存入缓存，当后续真正执行导入逻辑时，可直接从缓存中读取，从而消除网络延迟。
如何手动触发 import() 进行预取
手动预取的关键在于分离“加载”与“使用”两个阶段。通过直接调用 import('module-path')，你可以让浏览器在后台下载模块，而无需等待后续的动态导入请求。这种方式适用于已知用户即将访问某些功能，但当前尚未触发的场景。
function prefetchModule(modulePath) {
// 直接调用 import() 启动下载
return import(modulePath)
.then(module => {
console.log(`模块 ${modulePath} 已预取并缓存`);
// 这里可以保存 module 引用供后续使用，或者仅依赖浏览器缓存
return module;
})
.catch(err => {
console.error(`预取失败: ${modulePath}`, err);
});
}
// 示例：在页面加载后预取可能用到的模块
prefetchModule('./utils.js');
prefetchModule('./api-client.js');
上述代码展示了基本的预取模式。调用 import() 会返回一个 Promise，该 Promise 在模块解析完成后 resolve。如果模块已经存在于缓存中（例如之前被其他脚本加载过），则几乎瞬间完成。注意，预取操作不应阻塞主线程，因此通常将其放在非关键路径中执行。若预取失败，错误会被捕获，不会影响主应用逻辑。
结合路由或用户行为优化预取策略
在实际应用中，预取往往与路由切换或用户交互绑定。例如，在单页应用（SPA）中，可以在用户悬停在导航链接上时，预先加载目标路由对应的组件模块。这种策略能显著减少页面切换时的白屏时间。
// 假设有一个导航链接列表
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('mouseenter', () => {
const targetRoute = link.dataset.route;
if (targetRoute && !isPrefetched(targetRoute)) {
// 预取对应路由的模块
import(`./routes/${targetRoute}.js`)
.then(() => markAsPrefetched(targetRoute));
}
});
});
const prefetchedCache = new Set();
function isPrefetched(route) {
return prefetchedCache.has(route);
}
function markAsPrefetched(route) {
prefetchedCache.add(route);
}
这段代码演示了基于鼠标悬停事件的预取机制。通过监听 mouseenter 事件，可以在用户实际点击前启动模块加载。使用 Set 记录已预取的模块，避免重复请求。这种方法特别适用于导航结构清晰的应用，能有效提升用户体验。需要注意的是，预取应适度，避免过度消耗带宽或内存，尤其是在移动设备上。
预取模块在后续动态导入中的表现
当预取完成后，后续对同一模块的动态导入将直接从缓存中获取，速度极快。验证这一行为可以通过监控网络请求和检查模块加载时间来确认。预取不会改变模块的语义，只是提前完成了网络传输和解析过程。
为了验证预取效果，可以编写一个简单的测试脚本，先预取一个模块，然后在短时间内再次导入它，观察第二次导入是否跳过网络请求。在实际项目中，这通常表现为第二次导入的 Promise 几乎立即 resolve，且网络面板中无新的模块下载请求。这表明浏览器缓存机制生效，预取成功减少了后续加载的延迟。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
