Rspack 如何处理 CSS？

Rspack 的 CSS 处理能力是其前端构建功能的重要组成部分，提供了强大的 CSS 处理和优化功能。以下是 Rspack CSS 处理的详细说明：

CSS 处理方式

Rspack 提供了多种 CSS 处理方式，可以根据项目需求选择合适的方案：

1. CSS Modules：

   • 支持模块化的 CSS
   • 自动生成唯一的类名
   • 避免样式冲突

2. CSS-in-JS：

   • 支持各种 CSS-in-JS 库
   • 如 styled-components、emotion 等
   • 保持样式和组件的紧密关联

3. 原生 CSS：

   • 支持标准 CSS 文件
   • 支持 CSS 预处理器
   • 支持 PostCSS

CSS 配置

基本配置

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

提取 CSS 到单独文件

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[id].[contenthash].css'
    })
  ]
}

CSS Modules 配置

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            }
          }
        ]
      }
    ]
  }
}

CSS 预处理器支持

Rspack 支持多种 CSS 预处理器：

Sass/SCSS

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

Less

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

Stylus

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  }
}

PostCSS 集成

PostCSS 是一个强大的 CSS 处理工具，Rspack 可以轻松集成：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer'),
                  require('cssnano')
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

PostCSS 配置文件

创建 postcss.config.js：

javascript
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['> 1%', 'last 2 versions']
    }),
    require('cssnano')({
      preset: 'default'
    })
  ]
}

CSS 优化

Rspack 提供了多种 CSS 优化功能：

1. 代码压缩：

   • 使用 cssnano 压缩 CSS
   • 移除注释和空格
   • 优化选择器

2. 去重：

   • 移除重复的样式规则
   • 合并相同的声明
   • 减少最终体积

3. Tree Shaking：

   • 移除未使用的 CSS
   • 分析 JavaScript 中的类名引用
   • 只保留使用的样式

CSS 优化配置

javascript
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
              normalizeWhitespace: false
            }
          ]
        }
      })
    ]
  }
}

CSS-in-JS 支持

Rspack 对各种 CSS-in-JS 库提供了良好的支持：

styled-components

javascript
// 安装依赖
// npm install styled-components babel-plugin-styled-components

// 配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              transform: {
                react: {
                  runtime: 'automatic'
                }
              }
            }
          }
        }
      }
    ]
  }
}

emotion

javascript
// 安装依赖
// npm install @emotion/react @emotion/styled

// 配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              transform: {
                react: {
                  runtime: 'automatic',
                  importSource: '@emotion/react'
                }
              }
            }
          }
        }
      }
    ]
  }
}

CSS 加载优化

1. 按需加载：

   • 使用动态导入加载 CSS
   • 减少初始加载的 CSS 体积
   • 提升首屏加载速度

2. 关键 CSS：

   • 提取关键 CSS 内联到 HTML
   • 非关键 CSS 异步加载
   • 优化渲染性能

3. CSS 缓存：

   • 使用 contenthash 生成文件名
   • 利用浏览器缓存
   • 减少重复下载

最佳实践

1. 选择合适的 CSS 方案：

   • 小型项目：使用原生 CSS 或 CSS Modules
   • 中型项目：考虑使用 CSS Modules 或 CSS-in-JS
   • 大型项目：推荐使用 CSS-in-JS 或设计系统

2. 优化 CSS 体积：

   • 移除未使用的 CSS
   • 压缩 CSS 文件
   • 合并重复的样式

3. 提升加载性能：

   • 按需加载 CSS
   • 内联关键 CSS
   • 使用 CDN 加速

4. 维护性考虑：

   • 使用 CSS Modules 避免冲突
   • 使用预处理器提高可维护性
   • 建立统一的 CSS 规范

Rspack 的 CSS 处理功能为开发者提供了灵活而强大的样式处理能力，通过合理的配置和优化，可以构建出高性能、易维护的前端应用。