Save and Share:
即使经过 tree-shaking，当 CSS 打包成一个文件时，仍然会包含大量由于不同 @media 上下文（移动设备、平板电脑、桌面设备、暗黑/明亮/其他主题等）而未使用的 CSS 代码。
这对 Core Web Vitals 指标不利：首次输入延迟 (FID)、最大内容渲染时间 (LCP)、累积布局偏移 (CLS)，以及其他重要的性能和可用性指标：首次内容渲染时间 (FCP)、总阻塞时间 (TBT)、可交互时间 (TTI) 和 DOMContentLoaded 事件。
有一种方法可以通过将 CSS 分割成不同的文件来显著改善 CSS 的加载和渲染，每个文件只包含该上下文所需的代码。
将你的 CSS 分割成不同的文件：
📄main.css - 包含所有 @media 条件下都需要的 CSS
📄screen.css - 仅包含 screen @media 条件下需要的 CSS
📄print.css - 仅包含 print @media 条件下需要的 CSS
📂breakpoints
📄x-small.css - 仅包含 X-Small 断点下需要的 CSS
📄sm.css - 仅包含 Small 断点下需要的 CSS
📄md.css - 仅包含 Medium 断点下需要的 CSS
📄lg.css - 仅包含 Large 断点下需要的 CSS
📄xl.css - 仅包含 Extra large 断点下需要的 CSS
📄xxl.css - 仅包含 Extra extra large 断点下需要的 CSS
📂themes
📄light.css - 仅包含 light 主题下需要的 CSS
📄dark.css - 仅包含 dark 主题下需要的 CSS然后，像这样引入 CSS 文件：
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">通过这种方法，现代浏览器会优先加载当前 @media 条件下的 CSS，因此页面渲染速度会快得多，因为用户无需等待加载未使用的 CSS 部分。
在所有 CSS 都捆绑在一个文件中，并且你没有在 link 标签的 media 属性中指定条件的情况下，浏览器会等待加载整个 CSS 集合，然后才开始页面渲染。这会大大减慢页面渲染速度。
此示例中的断点基于 Bootstrap 5。鉴于 Bootstrap 即将增加对明亮/暗黑/其他主题的支持，这种方法将变得更加重要。
如果你想让网络变得更好更快，请：
- 分享这篇文章，
- 将这篇文章发送给你使用的框架的开发者，
- 在你的网站上实现这种 CSS 分割。
在社交媒体上分享或稍后保存：
如果你想阅读更多关于此优化以及浏览器行为的信息，请参阅以下内容：
- Vadim Makeev 的文章“有条件自适应 CSS。可能提升性能的浏览器行为”。本文的封面截图取自他的优秀文章，其中有更多截图和实验。
- MDN Web Docs：CSS 性能优化。