直接拆分CSS文件不一定减少首屏加载时间，因浏览器会并行下载所有head内link的样式表并阻塞渲染；真正有效的是按需加载——依据是否被当前页使用、是否参与首屏渲染，结合media属性条件加载、preload动态注入或构建时按路由/组件提取最小CSS包。
为什么直接拆分 CSS 文件不一定能减少首屏加载时间
很多人以为把 style.css 拆成 header.css、list.css、detail.css 就能“按需加载”，但浏览器遇到多个 <link rel="stylesheet">，默认会阻塞渲染并并行下载——只要它们都在 <head> 里，就依然全量加载。真正起作用的是「是否被当前页面用到」+「是否参与首屏渲染」。
用 media 属性做轻量级条件加载
适用于有明确设备或上下文区分的样式，比如打印样式、宽屏布局、暗色模式。浏览器只在匹配条件时才下载并解析对应 CSS，不匹配则跳过（注意：仍会发起请求，但不会阻塞渲染）。
-
media="print"：仅打印时生效，不影响页面渲染 -
media="(min-width: 768px)"：仅在 ≥768px 宽度时加载，小屏设备不下载 -
media="(prefers-color-scheme: dark)"：仅系统设为深色模式时加载
<link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="desktop.css" media="(min-width: 768px)"> <link rel="stylesheet" href="dark-theme.css" media="(prefers-color-scheme: dark)">
用 rel="preload" + onload 动态注入非关键 CSS
适合那些不参与首屏渲染、但后续交互会用到的样式（如模态框、图表组件、编辑器主题）。核心思路是：先预加载资源，等 DOM 就绪后再插入 <link>，避免阻塞。
- 必须用
rel="preload"且as="style"，否则浏览器不识别为样式资源 - 注入后要手动设置
onload，否则老版 Edge 和部分 iOS Safari 会忽略该样式 - 失败时建议 fallback 到
link[rel=stylesheet]同步加载，避免样式丢失
<link rel="preload" href="modal.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="modal.css"></noscript>
服务端配合：根据路由或组件依赖生成最小 CSS 包
纯前端动态加载无法解决「同一页面引入了未使用的 CSS 规则」问题。真正减体积要靠构建时提取——比如用 Webpack 的 MiniCssExtractPlugin 配合 splitChunks，或 Vite 的 build.rollupOptions.output.manualChunks。
立即学习“前端免费学习笔记（深入）”；
- 按路由拆包：
login.css只含登录页相关规则，由/login页面引入 - 按组件拆包：第三方富文本编辑器的样式单独打包，仅在编辑页 import
- 警惕
@import：它会导致串行加载，且无法被现代打包工具有效分析和拆分
关键点在于：拆分后必须确保 HTML 中只 link 当前页面实际需要的 CSS 文件，而不是一股脑全扔进 <head>。
