modulepreload 到底怎么用才生效？

设计师爱丹提问于 2026-03-26 12:39:20 阅读 31

优化

我在项目里加了 <link rel="modulepreload" href="./utils.mjs" rel="external nofollow" >，但浏览器 Network 面板里还是看到 utils.mjs 是在脚本执行时才加载的，没提前预加载。

我试过把 link 放在 head 里、改成绝对路径、甚至加 crossorigin，都没用。是不是我哪里理解错了？比如 modulepreload 只对动态 import 起作用？

我的入口是这么写的：

import { helper } from './utils.mjs';
helper.doSomething();

预加载策略

我来解答赞 3 收藏

反馈

1 条解答

殿洁的笔记 Lv1

modulepreload 要生效得注意几个地方。你先改一下 link 标签的顺序，把它放到 head 里最前面，越早声明越好。

还有个关键点，浏览器对 modulepreload 的支持有点挑。确保你的服务器响应头有正确的 MIME 类型 application/javascript。没这个的话预加载可能会被忽略。

另外就是动态 import 确实更靠谱些。试试把代码改成这样：

async function init() {

  await import('./utils.mjs');

  const { helper } = await import('./utils.mjs');

  helper.doSomething();

}

document.addEventListener('DOMContentLoaded', init);

如果还是不行，检查下浏览器版本。有些老版本可能根本不认这个属性。实在不行就换用常规 preload 吧，虽然没 modulepreload 那么精准但至少能用。

2026-03-26 13:04