合并CSS不一定提升首屏性能，因所有合并文件均阻塞渲染，首屏无需的样式（如暗色主题、实验样式）被强制加载，且缓存粒度变粗、调试困难；应按复用率与变更频率精准拆分，高频基础样式可合并，路由/主题/实验样式须分离。
为什么合并 CSS 文件不一定提升首屏性能
合并 CSS 文件在 HTTP/1.1 下确实能减少请求数，但在 HTTP/2 环境中，盲目合并反而可能拖慢页面渲染。关键不是“能不能合”，而是“合哪些、怎么合”。浏览器遇到 <link rel="stylesheet"> 会阻塞 HTML 解析和首次绘制（FOUC 被抑制的前提），所以每个 CSS 文件都意味着一次潜在的渲染延迟——哪怕它只有 1KB。
常见错误现象：reset.css、theme-dark.css、ab-test-banner.css 全部写进一个 main.css，结果用户刚打开首页就下载了根本用不到的暗色主题和实验样式；或者某次小修改触发整个大文件缓存失效，所有用户重下 300KB。
- HTTP/2 多路复用 ≠ 零开销：TLS 握手仍只做一次，但小文件多会增加帧调度压力和磁盘 I/O 次数
- CDN 缓存粒度变粗：1 个文件更新 → 整体缓存失效；10 个文件中 1 个更新 → 其余 9 个仍可复用
- 调试困难：构建产物里
main.css报错行号指向 5000+ 行，实际问题出在modal.scss第 12 行
哪些 CSS 必须合并，哪些绝对不能动
判断依据只有两个：是否高频复用 + 是否低频变更。和文件名、目录结构无关。
- 应该合并：
reset.css、utils.css、button.css、card.css—— 这些在 >95% 页面中加载，且半年内基本不改 - 不应合并：
/admin/dashboard.css、prefers-reduced-motion.css、print.css—— 它们只在特定条件或路由下生效，且media="print"或media="(prefers-reduced-motion: reduce)"的资源根本不会阻塞主文档渲染 - 谨慎合并：
theme-dark.css和theme-light.css—— 合并后无法按偏好动态切换，必须 JS 注入或用media声明式加载
一个容易被忽略的点：@import 在 CSS 文件内部引入其他 CSS，会触发额外请求，且无法并行解析 —— 它比多个 <link> 更差，应彻底禁用。
立即学习“前端免费学习笔记（深入）”；
Webpack/Vite 中真正安全的合并配置
构建工具默认行为往往不够智能。比如 Webpack 的 MiniCssExtractPlugin 默认把 node_modules 里的 CSS 提取为 vendor.css，但它不会自动合并你 src/ 下的多个入口 CSS —— 你需要显式控制。
- Webpack：用
entry显式聚合基础样式，例如entry: { app: ['./src/index.js', './src/styles/reset.css', './src/styles/utils.css'] }，再配合MiniCssExtractPlugin输出单个app.css - Vite：在
vite.config.js中通过build.rollupOptions.output.manualChunks拆分，把高频基础样式归入common.css，路由级样式单独打包 - 禁止把
async或defer脚本依赖的 CSS 合并进去 —— 执行时序会被打乱，document.body可能还没 ready 就尝试读取样式计算值
示例（Vite 配置片段）：
build: { rollupOptions: { output: { manualChunks: { common: ['src/styles/reset.css', 'src/styles/utils.css'] } } } }
内联关键 CSS 的边界在哪
内联 <style> 确实能消灭首次请求，但只适用于「压缩后 ≤2KB」且「仅当前页面独用」的 CSS。超过这个阈值，HTML 体积膨胀反而抵消收益，还破坏了浏览器对 CSS 文件的独立缓存能力。
- 适合内联：
above-the-fold布局所需的最小规则集，比如body字体、首屏header宽高、骨架屏动画 - 不适合内联：
modal.css、tooltip.css、任何含@keyframes或复杂媒体查询的样式 —— 它们不会影响首屏渲染，却让 HTML 变得臃肿 - 构建时自动生成：用
critical工具提取首屏关键 CSS，再由插件注入 HTML —— 不要手动维护，否则极易过期
最常被忽略的细节：内联 CSS 无法被 CDN 缓存，每次 HTML 更新都会强制用户重下全部样式；而外链 CSS 只要内容不变，即使 HTML 改了，依然能走强缓存。
