Angular中预加载的SVG Sprite被重复加载问题排查

这问题我之前帮好几个Angular开发者排查过，核心原因就是跨源请求模式不匹配，导致浏览器没把预加载和后续组件发起的请求当成同一个资源来缓存复用。

问题拆解： #

• 你在index.html里给symbol-defs.svg加了crossorigin属性，这会强制浏览器把这个预加载请求标记为跨源模式（Sec-Fetch-Mode: cors）——哪怕你的资源是同域的，只要加了这个属性，浏览器就会按跨源请求处理。
• 而Angular组件里加载这个SVG Sprite时，默认是同源模式（Sec-Fetch-Mode: same-origin），没有带跨源标识。浏览器对这两种模式的请求会视为完全独立的资源，自然不会复用预加载的缓存，就触发了重复加载。

至于控制台的提示：

The resource http://localhost:8080/assets/icons/font/symbol-defs.svg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

这其实是模式不匹配的连锁反应：预加载的是cors模式的资源，但实际使用的是same-origin模式的，浏览器找不到对应的“匹配使用”，就会认为你预加载的资源没被用上，抛出这个警告。

解决方案： #

最直接的修复方式就是去掉预加载标签里的crossorigin属性，让预加载请求和组件请求的模式保持一致：

<link rel="preload" href="assets/icons/font/symbol-defs.svg" as="image">

如果之后你需要加载跨域的SVG资源（比如CDN上的），再考虑加crossorigin，但同时要确保组件里的SVG引用也遵循跨源规则——不过对于你当前的本地场景，完全不需要这个属性。

另外还要确认一点：Angular组件里引用SVG Sprite的路径（比如<use href="assets/icons/font/symbol-defs.svg#my-icon">）和预加载的路径完全一致，包括相对路径、大小写（有些服务器会区分），避免因为路径细微差异导致的重复加载。

内容的提问来源于stack exchange，提问作者leal32b