CSS压缩优化实战从入门到精通

优化前：卡得不行

最近接手了一个老项目，CSS文件直接给我干到了800KB，没压缩过的原始文件。打开页面那叫一个卡，Chrome DevTools显示CSS解析时间居然要3-4秒，首屏渲染慢得要命。用户反馈页面打开特别慢，特别是移动端，有时候样式还没加载完就开始闪动，用户体验简直没法看。

我一看这代码，里头全是各种冗余样式，重复的选择器，还有注释和空格，简直是CSS的大杂烩。这种历史遗留问题最麻烦，不能大刀阔斧地重构，只能想办法在构建流程里做文章。

找到瓶颈了！

用Chrome DevTools分析了一下，CSS文件太大导致的问题主要有几个：

• CSS解析时间长，阻塞渲染
• 网络传输时间久，特别是弱网环境下
• 浏览器内存占用高

我当时试了几种方案，包括Gulp、Webpack的CSS压缩插件，还有在线压缩工具，最后选择了PostCSS + cssnano这个组合，效果最好。

核心压缩方案来了

说实话，CSS压缩这事儿看起来简单，做起来坑还挺多的。光是压缩算法就有好多选项，有的会把兼容性给砍掉，有的会误删一些必要的样式。

我的最终方案是基于PostCSS + cssnano，配置文件如下：

// postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: [
        'default', {
          discardComments: {
            removeAll: true
          },
          reduceInitial: false,
          normalizeWhitespace: true,
          minifySelectors: true,
          minifyParams: true,
          discardDuplicates: true,
          zindex: false,
          calc: false
        }
      ]
    })
  ]
}

这里有几个配置要点我踩过坑：

• discardComments：注释全部删除，减少文件体积
• reduceInitial：设为false避免某些兼容性问题
• zindex：设为false防止层级关系被改变
• calc：设为false避免计算值被误压缩

然后配合Autoprefixer自动添加浏览器前缀，这样既保证兼容性又不影响压缩效果：

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: [
        'default', {
          discardComments: { removeAll: true },
          normalizeWhitespace: true,
          minifySelectors: true
        }
      ]
    })
  ]
}

Webpack配置也很关键

为了确保生产环境自动压缩，我在webpack.config.js里加了相应的loader配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: process.env.NODE_ENV === 'production'
        ? '[name].[contenthash].css'
        : '[name].css'
    })
  ]
}

压缩前后对比

优化前的CSS是这样的：

/* 这是头部样式 */
.header {
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* 这是菜单样式 */
.menu-item {
  display: inline-block;
  margin-left: 15px;
  margin-right: 15px;
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
}

/* 这是按钮样式 */
.btn-primary {
  background-color: #007bff;
  border: 1px solid #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

经过压缩后变成：

.header{width:100%;height:60px;background:#fff;border-bottom:1px solid #e5e5e5;padding:0 20px;box-sizing:border-box}.menu-item{display:inline-block;margin:0 15px;color:#333;font-size:16px;line-height:1.5;text-decoration:none}.btn-primary{background:#007bff;border:1px solid #007bff;color:#fff;padding:10px 20px;border-radius:4px;cursor:pointer;transition:all .3s ease}

肉眼可见的体积缩小！

性能数据对比

优化前后的数据对比让人惊喜：

• 原文件大小：800KB
• 压缩后大小：180KB
• CSS解析时间：从3.5秒降低到0.8秒
• 首屏渲染时间：从5.2秒缩短到2.1秒
• Gzip后大小：约30KB

压缩率达到了77.5%，这个效果相当不错。用户访问速度明显提升，特别是移动端体验改善了很多。

这里需要注意几个坑

在实施过程中遇到几个问题：

兼容性问题：有些老的CSS属性在压缩时会被误处理，比如IE的filter属性。我专门在配置里排除了这些特殊情况。

调试困难

压缩后的CSS没有格式化，出问题很难定位。我在开发环境保持原样，在生产环境才启用压缩。