CSS打包体积大会阻塞首屏渲染，因<link>是阻塞资源；主因包括@import嵌套、冗余类名、重复引入UI库、PostCSS配置不当；可用purgecss按源码类名双向比对删除未用样式，需正确配置content路径与白名单。
为什么 css 打包体积大，页面首屏会卡住
浏览器渲染时，<link rel="stylesheet"> 是阻塞资源：它下载、解析完成前，不会触发页面首次绘制（FP）和首次内容绘制（FCP）。如果打包后生成的 main.css 有 800KB，且未做拆分或压缩，用户在弱网下可能等 2–3 秒才看到内容。
常见原因包括：@import 嵌套过深、未删的 console 或 debug 类名、重复引入同一 UI 库的多个主题 CSS、PostCSS 插件配置不当导致未移除未使用样式。
用 purgecss 删除未使用的 CSS 规则
尤其适用于 Vue/React 项目中大量使用类名但实际只用到其中一部分的场景。它不是简单正则匹配，而是基于源码中的类名字符串 + CSS 选择器双向比对。
- 必须显式配置
content路径，漏掉.vue或.tsx文件会导致误删 —— 示例：module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx,vue}'], css: ['./dist/*.css'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] } - 保留动态类名需加白名单：
whitelist: ['html', 'body', 'active']；若用className={\`btn-\${type}\`}这类拼接，要写成whitelistPatterns: [/^btn-/] - Vite 用户注意：
vite-plugin-purgecss已不维护，改用unplugin-purgecss，否则开发热更新时样式会丢失
拆分 critical CSS 内联首屏关键样式
把首屏可见区域（如 header、hero section）用到的 CSS 提取出来，内联进 <head>，其余非关键 CSS 异步加载。这能直接跳过一次 HTTP 请求。
立即学习“前端免费学习笔记（深入）”；
-
工具推荐：
critters（Vite/Webpack 插件），比手写extract-critical-css更稳 —— 它会自动处理@font-face、@keyframes和媒体查询嵌套 - 避免手动复制粘贴：内联内容超过 10KB 会触发 Chrome 的“内联 CSS 警告”，反而影响 Lighthouse 评分
- Webpack 用户慎用
mini-css-extract-plugin默认配置：它默认把所有 CSS 合并为一个文件，必须配合splitChunks按路由或组件拆分，再单独提取 critical 部分
postcss 配置里哪些插件真能减体积
很多团队开了 autoprefixer + cssnano 就以为优化完了，其实默认配置下 cssnano 不启用最激进压缩，postcss-discard-comments 也未必生效。
- 必须显式开启：
cssnano({ preset: ['default', { discardComments: { removeAll: true }, normalizeWhitespace: true, reduceTransforms: true }] }) -
postcss-import要关掉resolve的冗余路径扫描，否则会把node_modules里没用到的依赖 CSS 全读一遍 - 慎用
postcss-preset-env：它会把color-mix()等新语法转成大量 fallback 规则，体积可能翻倍 —— 新项目建议直接设targets: { chrome: '90' }，绕过转换
真正影响体积的往往不是单个规则，而是构建流程中「谁读了谁」「谁删了谁」的顺序。比如 purgecss 必须在 cssnano 之前运行，否则压缩后的类名（如 .a{}）会让白名单失效。
