17370845950

CSS打包体积大会阻塞首屏渲染，因是阻塞资源；主因包括@import嵌套、冗余类名、重复引入UI库、PostCSS配置不当；可用purgecss按源码类名双向比对删除未用样式，需正确配置content路径与白名单。

为什么 css 打包体积大，页面首屏会卡住

浏览器渲染时， 是阻塞资源：它下载、解析完成前，不会触发页面首次绘制（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-/:]+(?

• 保留动态类名需加白名单：whitelist: ['html', 'body', 'active']；若用 className={\`btn-\${type}\`} 这类拼接，要写成 whitelistPatterns: [/^btn-/]
• Vite 用户注意：vite-plugin-purgecss 已不维护，改用 unplugin-purgecss，否则开发热更新时样式会丢失

拆分 critical CSS 内联首屏关键样式

把首屏可见区域（如 header、hero section）用到的 CSS 提取出来，内联进 ，其余非关键 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{}）会让白名单失效。