为什么用modulepreload预加载CSS文件时浏览器没触发加载?
最近在优化项目预加载策略时遇到个怪问题,我按照文档给CSS文件加了modulepreload标签,但开发者工具网络面板完全没反应。换成preload马上就加载了,这是不是说明modulepreload只能处理JS模块?
我试过检查标签写法,代码是这样的:
<link rel="modulepreload" href="/styles/main.css" rel="external nofollow" >
但控制台没报错,资源也没预加载。如果改成rel="preload"并指定as="style"就能正常加载。是不是我搞混了这两个标签的使用场景?
我的做法是:
1. 对于CSS文件就用preload,记得加上as属性
2. 如果是JS模块才用modulepreload
你那个例子应该改成这样:
简单来说就是:
- modulepreload = JS模块专用
- preload = 通用预加载,需要指定资源类型
我也纳闷为什么文档没把这个区分说得更明显点,可能默认大家都会去看规范细节吧。不过现在知道问题在哪就好办了!
modulepreload是专门用来预加载 JavaScript 模块的,CSS 文件不支持这个属性。换成<link rel="preload" href="/styles/main.css" as="style">就行了。别折腾modulepreload了,它跟 CSS 没关系。