如何通过合并CSS文件优化大量引入的样式文件？

本文共计905个文字，预计阅读时间需要4分钟。

• 首屏关键 CSS 应内联或极小体积合并，避免阻塞 HTML 解析
• 非关键 CSS（如打印样式、主题切换、后台管理页专用）可延迟加载或按需引入
• 注意：HTTP/2 虽支持多路复用，但合并仍有助于减少 TLS 握手、服务器磁盘 I/O 和缓存粒度问题

哪些 CSS 文件适合合并，哪些不该动

盲目合并所有 CSS 可能导致缓存失效率上升、首屏体积膨胀。要区分场景：

• 应该合并：基础重置（reset.css）、通用工具类（utils.css）、全局组件样式（button.css, card.css）——这些在多数页面都会用到
• 不应合并：单页应用中某路由专属样式（/admin/dashboard.css）、A/B 测试分支样式、用户主题（dark-theme.css）——它们只在特定条件生效，合并后浪费带宽
• 可拆分+按需注入：媒体查询较多的响应式样式，可提取为 print.css 或 prefers-reduced-motion.css，用 media 属性懒加载

构建时合并 CSS 的实操方式（以主流工具为例）

不推荐手动拼接，容易出错且无法处理 @import、路径重写、Source Map 等问题。