用替换@import是最有效方式，因@import导致串行加载、阻塞渲染且无法预加载；而支持并行下载、预加载及media等优化属性。
直接用 <link> 替换 @import 是最有效的方式。因为 @import 在 CSS 文件中使用时，会触发串行加载、阻塞渲染，且无法被浏览器预加载器识别。
为什么 @import 会变慢
@import 在 CSS 中属于“运行时引入”，浏览器必须先下载并解析完当前 CSS 文件，遇到 @import 才发起下一个请求，形成链式依赖。比如：
A.css 中写了 @import "B.css"; → 必须等 A.css 下载解析完，才开始请求 B.css → B.css 再 import C.css 就更慢
而 <link rel="stylesheet"> 是 HTML 解析阶段就发现的资源，浏览器可并行下载、预加载，且支持 media、as 等优化属性。
立即学习“前端免费学习笔记（深入）”；
如何快速替换为 link 方式
- 把所有 CSS 文件从
@import拆出来，统一移到 HTML 的中，按依赖顺序用<link>引入 - 保留原有顺序（如重置样式 → 工具类 → 组件样式 → 主题），避免样式覆盖异常
- 对非关键 CSS（如打印样式、暗色主题），加上
media="print"或media="(prefers-color-scheme: dark)"，让浏览器延迟加载 - 现代项目可配合
rel="preload"提前拉取核心样式：<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">
构建工具中也要注意
像 Sass/Less 编译时，@import 是预处理指令（编译期合并），不会产生运行时请求，这类是安全的。但一旦写在已编译好的 CSS 文件里（比如打包后 dist/main.css 里还有 @import），就一定得改。
检查最终上线的 CSS 文件内容，搜索 @import url( 或 @import "，只要存在，就要溯源清理。
验证是否生效
打开 Chrome DevTools → Network 标签页 → 刷新页面 → 查看 CSS 文件的 Initiator 列：
- 如果是
parser或other，说明来自 HTML 的<link>，加载早、不阻塞 - 如果显示
stylesheet，说明是另一个 CSS 里的@import触发的，仍需优化
同时观察 Waterfall 时间线：多个 CSS 应该大致并行开始下载，而非一个接一个排长队。
