如何优化CSS框架在移动端的首屏加载时长？

根本原因是默认打包将整套未用CSS（如.sm:hidden、.lg:p-8）全塞入main.css，导致移动端弱网下200KB文件卡渲染1.5秒以上；须通过critters自动提取首屏真实用到的纯结构/颜色/间距类名规则，并异步加载非关键CSS。

为什么 Tailwind 或 Bootstrap 会让移动端首屏变慢

不是框架本身写得差，而是默认打包方式把整套 CSS（含未用的 .sm:hidden、.lg:p-8 等）全塞进 main.css，导致浏览器必须下载、解析、构建整个 CSSOM 才能渲染首屏。移动端弱网下，一个 200KB 的 CSS 文件可能卡住渲染 1.5 秒以上。

提取关键 CSS 时必须避开的三类规则

内联前若没过滤掉这些，反而会触发额外请求或阻塞解析：

• @import 语句：会同步发起新请求，彻底破坏内联意义
• @font-face 声明：字体文件 URL 会被提前触发加载，且无法控制优先级
• 含 url() 的声明（如 background-image: url(logo.png)）：首屏图若走 CSS 加载，既不支持 loading="lazy"，也无法用 srcset 做响应式降级

正确做法是只保留纯结构/颜色/间距类名对应的规则，比如 .header、.text-lg、.bg-blue-500 —— 且确保它们实际出现在首屏 HTML 中。

用 critters 插件自动提取 + 动态注入剩余 CSS

手动维护关键 CSS 几乎不可行，尤其当 class 名动态拼接（如 class="text-${color}"）时。推荐在构建流程中接入 critters（Vite/Webpack 插件），它基于 Puppeteer 模拟首屏渲染路径抓取真实用到的规则。

立即学习“前端免费学习笔记（深入）”；

非关键 CSS 不要直接写 <link rel="stylesheet">，改用：

<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="non-critical.css"></noscript>

这样既预加载资源，又不阻塞初始渲染；onload 回调确保样式在 DOM 就绪后才应用，避免 FOUC。

移动端特别要注意的 class 名陷阱

Tailwind 默认生成所有响应式变体（sm:、md:、lg:），但移动端首屏几乎只用 sm: 及以下断点。若未配置 purge 或 content 路径，大量未用的 lg:p-6 类会进入关键 CSS，徒增体积。

检查点：

• 确认 tailwind.config.js 中 content 字段精确指向首屏模板文件（如 src/pages/home.vue），而非整个 src/
• 禁用不必要的插件（如 @tailwindcss/aspect-ratio 若首屏无宽高比需求）
• 避免在首屏元素上写 class="hidden md:block" —— md:block 属于非首屏样式，应移出关键路径

真正难的不是“怎么加优化”，而是每次发版后重新验证关键 CSS 是否仍精准覆盖首屏结构——尤其当产品同学临时加了个 class="xl:text-4xl" 到 banner 上时。