应减少CSS请求数量但避免过度合并，优先合并非关键CSS并异步加载，内联关键CSS（≤14KB）提升LCP，HTTP/2+下可适度拆分，结合构建工具自动分包、缓存与CDN压缩优化。
CSS 文件太多会增加 HTTP 请求次数，拖慢页面加载速度，尤其在弱网环境下更明显。核心思路是减少请求数量，同时避免过度合并导致单个文件过大或阻塞关键渲染。
优先合并非关键 CSS
把不影响首屏渲染的样式（比如打印样式、媒体查询中大屏幕专用样式、页面底部模块样式）抽离出来，和主样式表合并成一个非关键 CSS 文件，在 DOM 加载完成后异步加载。
- 用 @import 或构建工具（如 Webpack、Vite）的 CSS 提取插件统一打包
- 确保合并后的文件仍按语义分组，便于后期维护
- 避免把所有 CSS 塞进一个文件——可能让首屏白屏时间变长
内联关键 CSS（Critical CSS）
提取首屏必需的样式（如导航栏、标题、首屏按钮），直接写在 HTML 的 <style> 标签里。这样无需额外请求就能渲染首屏，显著提升 LCP（最大内容绘制）指标。
- 可用工具自动生成：critical（Node.js）、Penthouse 或 Vite 插件 vite-plugin-critical-css
- 注意控制内联体积，建议不超过 14KB（避免触发浏览器分块解析）
- 配合 media 属性做条件内联，比如只内联
screen and (max-width: 768px)的关键响应式规则
启用 HTTP/2 或 HTTP/3
如果服务器支持 HTTP/2+，多个小 CSS 文件的请求开销大幅降低（多路复用、头部压缩）。此时“合并”不再是强需求，反而可按功能/路由拆分，提升缓存利用率和按需加载灵活性。
立即学习“前端免费学习笔记（深入）”；
- 检查是否已启用：浏览器开发者工具 → Network → 协议列显示 h2 或 h3
- 搭配 preload 提前拉取关键 CSS：
<link rel="preload" href="main.css" as="style"> - 仍建议将同一路由/模块的 CSS 合并，避免一个页面发 10+ 个 CSS 请求
利用现代构建与部署策略
不靠手工合并，而是通过自动化流程智能处理：
- Vite / Webpack 构建时开启 CSS code splitting，按动态 import 或路由自动分包
- 使用 Cache-Control 和长期哈希命名（如
main.a1b2c3.css），让浏览器高效复用缓存 - CDN 开启 Brotli 压缩，减小合并后文件的实际传输体积
