css加载阻塞渲染，必须异步化；webpack 5不解决此问题，需用loadcss或preload+media切换实现异步加载，避免fcp延迟。
直接结论：CSS加载阻塞渲染，必须异步化；Webpack 5本身不解决这个问题，得靠 loadCSS 或 <link rel="preload"> + 动态 media 切换。
为什么 CSS 会拖慢首屏？
浏览器遇到 <link rel="stylesheet"> 时，会暂停 HTML 解析、推迟 DOM 构建和首次绘制（FCP），哪怕这个 CSS 只用于页脚或弹窗。实测中，一个未优化的 200KB main.css 可让 FCP 延迟 800ms+，尤其在弱网下更明显。
Webpack 的 mini-css-extract-plugin 默认仍生成阻塞式 <link> 标签，它只管提取 CSS，不管加载时机。
用 loadCSS 实现真异步加载
这是目前兼容性最好、侵入最小的方案，无需改构建逻辑，只改 HTML 模板。
- 把原本的
<link rel="stylesheet" href="main.css">替换为：
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">
原理是利用 media="print" 让浏览器异步加载（不阻塞渲染），加载完再通过 onload 切回 media="all" 生效。
- 注意：
onload在 Safari 15.4+ 和部分旧 Android WebView 中不可靠，可加降级 fallback：
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="/css/main.css"></noscript>
- 不要用 Webpack 插件自动注入 —— 多数插件（如
html-webpack-plugin的inject: true）无法控制media属性，必须手动写入模板。
用 preload + media 切换做关键 CSS 加速
对真正影响首屏的 CSS（比如按钮、标题、布局类），建议用 <link rel="preload"> 提前拉取，再配合 JS 控制生效时机：
- 在
中加入：
<link rel="preload" href="/css/critical.css" as="style" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="/css/critical.css"></noscript>
-
as="style"告诉浏览器这是样式资源，可提升优先级；onload触发后才设rel="stylesheet"，避免重复解析。 - Webpack 中需确保
critical.css是独立 chunk（例如通过splitChunks.cacheGroups单独提取），且路径固定可引用。 - 别对整个
main.css做 preload —— 它体积大、优先级低，反而挤占关键 JS 下载带宽。
容易被忽略的坑
很多人以为开了 mini-css-extract-plugin 就算优化完了，其实远没结束：
-
optimization.splitChunks拆出的 CSS chunk 仍是阻塞式加载，除非你手动处理<link>标签。 - Webpack 的
/* webpackPreload: true */注释对 CSS 无效 —— 它只作用于 JS，CSS 不支持魔法注释预加载。 - 服务端开启 Gzip/Brotli 后，CSS 文件体积下降明显，但阻塞问题依然存在 —— 压缩不能替代异步化。
- 如果用了 CSS-in-JS（如 Emotion、Styled Components），需确认其 SSR 输出是否内联了 critical CSS；否则客户端 hydration 前仍白屏。
真正卡住首屏的，往往不是体积，而是加载方式。把 CSS 从“必须等它”变成“先画再样式”，才是见效最快的一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
