css 页面样式加载慢怎么办_通过 css 工具优化打包体积_技术教程

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

浏览器渲染时，是阻塞资源：它下载、解析完成前，不会触发页面首次绘制（FP）和首次内容绘制（FCP）。如果打包后生成的 main.css 有 800KB，且未做拆分或压缩，用户在弱网下可能等 2–3 秒才看到内容。

常见原因包括：@import 嵌套过深、未删的 console 或 debug 类名、重复引入同一 UI 库的多个主题 CSS、PostCSS 插件配置不当导致未移除未使用样式。

尤其适用于 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，否则开发热更新时样式会丢失

把首屏可见区域（如 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 部分

很多团队开了 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' }，绕过转换