多个CSS文件拖慢页面因阻塞渲染且触发多次HTTP请求，拉长关键渲染路径；应按首屏需求切分，内联首屏CSS，其余合并为1–2个文件并用preload延迟加载。
多个CSS文件为什么反而拖慢页面？
浏览器加载CSS是阻塞渲染的，每个 <link rel="stylesheet"> 都会触发一次HTTP请求，而现代网页常引入 reset.css、base.css、theme.css、component.css 等多个文件——这直接导致关键渲染路径（CRP）被拉长，首屏时间变慢。更麻烦的是，即使某些CSS只在子页面或交互后才用，它也在首屏就下载并解析了。
合并CSS文件的实操要点
手动合并虽简单，但容易出错；自动化才是可持续方案。重点不是“能不能合”，而是“怎么合才不破环作用域和加载逻辑”：
- 确保合并顺序与原
<link>标签顺序一致，否则!important或同名选择器优先级会出问题 - 移除重复的
@import，它们无法被 Webpack/Vite 等工具静态分析，且会引发额外请求 - 注意相对路径：如果原
icon.css里有url(../fonts/icon.woff)，合并后路径基准变成主CSS所在目录，需用构建工具重写或改用绝对路径（如url(/fonts/icon.woff)） - Vite 用户可配
build.cssCodeSplit: false关闭CSS代码分割；Webpack 则用MiniCssExtractPlugin+optimization.splitChunks.chunks: 'all'并设cacheGroups强制归入同一chunk
用 <link rel="preload"> 控制非关键CSS的加载时机
不是所有CSS都该挤进首屏。比如打印样式 print.css、暗色主题 dark-theme.css、或某个弹窗组件的样式，完全可以用异步方式加载：
<link rel="preload" href="modal.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="modal.css"></noscript>
这段代码让浏览器提前发起请求但不阻塞渲染，等 DOM 就绪后再启用样式。注意：onload 回调必须立即清除自身（this.onload=null），否则 Safari 会重复执行；<noscript></noscript> 是降级保障。
立即学习“前端免费学习笔记（深入）”；
HTTP/2 和 HTTP/3 下还该合并CSS吗？
HTTP/2 支持多路复用，理论上多个小CSS文件不再有“队头阻塞”，但现实没那么理想：
- SSL/TLS 握手、TCP 慢启动仍存在，首个请求延迟不可忽略
- 缓存粒度变粗：一个CSS更新，整个合并包都要重新下载；而拆分后只有变更文件失效
- HTTP/3 虽改善丢包影响，但不改变CSS解析阻塞本质——浏览器仍要等全部字节收完才开始构建CSSOM
- 真正推荐的做法是：按“是否参与首屏渲染”切分，把首屏必需的CSS内联（
<style></style>），其余合并为1–2个外部文件，并配合preload或media属性延迟加载（如media="print"）
最易被忽略的一点：很多构建工具默认开启 CSS 压缩，但若未启用 discardComments: true 或 svgo（针对内联SVG中的CSS），注释和空格残留可能让合并后的文件体积反超预期。
