按需加载css的核心是控制加载时机与条件，而非js拼接插入；优先用media属性跳过不匹配请求，其次用rel="preload" onload异步加载，动态插入前须查重防重复。
按需加载 CSS 不是“等用户点一下再加载”，而是让浏览器只在真正需要时才下载并应用某份样式表——关键在于控制 <link> 的加载时机和条件，而不是靠 JS 拼字符串再 appendChild。
用 media 属性跳过不匹配的 CSS 下载
现代浏览器（Chrome 80+、Firefox 69+、Safari 14+）对不匹配的 media 查询会直接跳过网络请求，不是“下载完再丢弃”。这是最轻量、零 JS、真正按需的方案。
-
<link rel="stylesheet" href="mobile-nav.css" media="(max-width: 768px)">：桌面端首次访问时，这个文件根本不会出现在 Network 面板里 -
<link rel="stylesheet" href="dark-theme.css" media="(prefers-color-scheme: dark)">：系统切深色模式时才触发下载 - 错误写法：
media="screen and (min-width: 768px)"中多了一个空格或括号不闭合，会导致媒体查询失效，浏览器降级为无条件加载 - 调试时看 Network 面板的 Initiator 列，确认状态码为 200 且 Initiator 是
parser，才说明是 HTML 解析阶段触发的加载
用 rel="preload" + onload 异步加载非关键 CSS
适用于折叠区域、弹窗、图表组件等首屏不可见但后续一定会用的样式。它不阻塞渲染，又比纯 JS 动态插入更可控。
- 必须同时满足三个条件：①
rel="preload"②as="style"③onload中改回rel="stylesheet" - 正确写法：
<link rel="preload" href="charts.css" as="style" onload="this.rel='stylesheet'"> - 漏掉
as="style"就等于普通 fetch，浏览器不会提升优先级，也不会触发 CSS 解析流程 - IE 不支持
onload，需加降级：<noscript><link rel="stylesheet" href="charts.css"></noscript>
动态创建 <link> 前，先检查是否已存在
避免重复加载同一份 CSS，尤其在单页应用（SPA）中路由切换或组件反复挂载时容易发生。
- 用
document.querySelector查路径而非 class 或 id：document.querySelector(`link[href="${href}"]`) - 注意路径要完全一致（大小写、斜杠、查询参数），
styles.css?v=1和styles.css?v=2被视为两个资源 - 不要用
document.write()插入<link>：页面加载完成后调用会清空整个文档 - 如果路径含运行时变量（如地区代码），确保该变量在构建时可静态分析，否则 webpack/vite 无法做代码分割，可能打包进主包
为什么不用 @import 做按需加载
@import 是串行、阻塞、不可中断的加载机制，和“按需”目标完全相悖。
- 在 CSS 文件里写
@import "modal.css"，会强制等待modal.css下载解析完，才继续解析后续规则 - 哪怕
modal.css只用于点击后弹出的对话框，它也会拖慢首屏 FCP - 浏览器无法对
@import做 preload、media 判断或加载失败重试 - 所有主流构建工具（Vite/Webpack）都不推荐在最终输出 CSS 中保留
@import，建议提前 inline 或拆成独立<link>
真正难的不是“怎么加”，而是判断“哪部分算‘需’”——首屏可见区域的样式必须内联，其余的得靠 media、preload 或动态插入分层控制；路径拼接、重复加载、构建时静态分析这些细节，稍不注意就让“按需”变成“全量加载”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
