直接拆分css文件不一定减少首屏加载时间，因浏览器会并行下载所有head内link的样式表并阻塞渲染；真正有效的是按需加载——依据是否被当前页使用、是否参与首屏渲染，结合media属性条件加载、preload动态注入或构建时按路由/组件提取最小css包。
为什么直接拆分 CSS 文件不一定能减少首屏加载时间
很多人以为把 style.css 拆成 header.css、list.css、detail.css 就能“按需加载”，但浏览器遇到多个 <link rel="stylesheet">，默认会阻塞渲染并并行下载——只要它们都在 里，就依然全量加载。真正起作用的是「是否被当前页面用到」+「是否参与首屏渲染」。
用 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>，避免阻塞。
ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键
- 必须用
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 文件，而不是一股脑全扔进 。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
