@import 一定会阻塞关键渲染路径，因其串行加载、不可预加载、media属性不控制下载；构建产物中残留@import说明配置遗漏，需检查打包工具配置并验证network面板initiator和waterfall。
@import 会让页面首屏明显变慢，不是“可能慢”，而是浏览器规范强制它慢——它天生串行、不可预加载、无法跳过非关键资源。
为什么@import一定会阻塞关键渲染路径
浏览器解析 HTML 时，<link rel="stylesheet"> 会被预加载器（preload scanner）立刻捕获，并发发起请求；而 @import 是 CSS 语法的一部分，只有当浏览器真正开始解析某个 CSS 文件、读到那一行时，才发起下一个请求。这意味着：
- 主 CSS 文件必须完整下载 + 开始解析 → 才触发第一个
@import的请求 - 被导入的 CSS 下载完成 + 解析完 → 才继续解析原文件后续规则
- Network 面板里 Initiator 显示为
stylesheet（不是parser），就是典型信号 - HTTP/1.1 下，单域名并发连接数本就有限，
@import还会额外占一个“隐式连接槽”
@import的media参数根本不管用
写 @import url("dark.css") (prefers-color-scheme: dark);，浏览器照常下载 dark.css，哪怕用户全程用亮色模式。它的 media 只控制样式是否“生效”，不控制是否“下载”。真正能跳过请求的只有 <link> 的 media 属性：
-
<link rel="stylesheet" href="print.css" media="print">→ 多数浏览器根本不会发请求，直到用户点打印 -
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">→ 系统切换暗色模式时才拉取 - 千万别把
media="all"或空media加在主样式表上，部分浏览器会误判为非关键资源，导致样式失效
构建产物里还有@import，说明配置漏了
Sass/Less 里的 @import 是编译期行为，通常没问题；但如果你打开最终上线的 dist/main.css，里面还明文写着 @import url("reset.css");，那就一定是构建流程没处理干净：
- Webpack：确认
css-loader启用了importLoaders，且mini-css-extract-plugin配置正确 - Vite：检查是否禁用了
css.preprocessorOptions.sass的默认@import处理，或遗漏了build.cssCodeSplit: true - PostCSS：确保启用了
postcss-import插件，且skipDuplicates: false防止重复引入 - 第三方 UI 库打包后的 CSS 也可能藏
@import，且无 sourcemap，这类最难排查——得手动打开 dist 目录下的 CSS 文件搜索@import
怎么验证优化是否生效
别只看源码写了什么，要盯最终运行时表现：
- 打开 Chrome DevTools → Network → 刷新页面 → 看所有 CSS 的 Initiator 列：必须是
parser或other，不能是stylesheet - 看 Waterfall 时间线：多个 CSS 请求应大致并行开始，而不是排长队（A → B → C）
- 用 Lighthouse 跑一次：如果还报 “Eliminate render-blocking resources”，说明仍有
@import漏网 - 弱网模拟下观察 FOUC：文字先乱排、再突然整齐，基本就是
@import嵌套没拆干净
最容易被忽略的点：路径问题和构建残留。相对路径的 @import 在重构后极易 404；而生产环境 CSS 文件里残留的 @import，往往来自被忽略的第三方库或错误的 PostCSS 配置——它们不会报错，但会悄悄拖慢首屏 200ms 以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
