在Razzle项目中使用PurgeCSS优化CSS体积-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00358/article/details/148441674

在Razzle项目中使用PurgeCSS优化CSS体积

purgecss Remove unused CSS 项目地址: https://gitcode.com/gh_mirrors/pu/purgecss

什么是PurgeCSS

PurgeCSS是一款强大的工具，它能够通过分析项目中的HTML、JavaScript等文件内容，自动移除未使用的CSS样式。这对于现代前端项目特别有价值，因为随着项目规模的增长，CSS文件往往会积累大量不再使用的样式规则，导致不必要的体积膨胀。

为什么要在Razzle中使用PurgeCSS

Razzle是一个优秀的服务端渲染(SSR)框架，它结合了React的最佳实践和灵活的配置选项。在Razzle项目中使用PurgeCSS可以带来以下好处：

显著减少CSS文件体积，提升页面加载速度
避免发送无用CSS到客户端，优化网络传输
保持样式表的整洁，便于维护
特别适合生产环境构建优化

安装与配置

第一步：安装依赖

在已有的Razzle项目中，首先需要安装PurgeCSS插件：

# 使用npm
npm install --save-dev razzle-plugin-purgecss

# 或使用yarn
yarn add --dev razzle-plugin-purgecss

第二步：修改配置文件

在项目根目录下的razzle.config.js文件中添加PurgeCSS插件配置：

const path = require('path');

module.exports = {
  plugins: [
    {
      name: 'purgecss',
      options: {
        // 指定需要分析的文件路径
        path: path.resolve(__dirname, 'src/**/*'),
      }
    }
  ],
};

这个基本配置会让PurgeCSS分析src目录下的所有文件，并根据实际使用情况优化CSS。

高级配置选项

PurgeCSS提供了多种配置选项来满足不同项目的需求，下面介绍几个常用的高级配置：

1. 指定入口文件

如果只想针对特定的入口文件进行优化，可以使用only选项：

module.exports = {
  plugins: [
    {
      name: 'purgecss',
      options: {
        path: path.resolve(__dirname, 'src/**/*'),
        only: ['bundle', 'vendor'], // 只优化这些入口文件
      }
    }
  ],
};

2. 白名单功能

有时我们需要保留某些特定的CSS类，即使它们看起来没有被使用。这时可以使用白名单功能：

module.exports = {
  plugins: [
    {
      name: 'purgecss',
      options: {
        path: path.resolve(__dirname, 'src/**/*'),
        whitelist: ['active', 'disabled', 'loading'], // 保留这些类
        whitelistPatterns: [/^btn-/, /^text-/], // 保留匹配这些模式的类
      }
    }
  ],
};

3. 动画关键帧处理

如果你的项目使用了CSS动画库，可以启用关键帧优化：

module.exports = {
  plugins: [
    {
      name: 'purgecss',
      options: {
        path: path.resolve(__dirname, 'src/**/*'),
        keyframes: true, // 优化未使用的关键帧
      }
    }
  ],
};

4. 字体声明优化

优化未使用的@font-face规则：

module.exports = {
  plugins: [
    {
      name: 'purgecss',
      options: {
        path: path.resolve(__dirname, 'src/**/*'),
        fontFace: true, // 移除未使用的字体声明
      }
    }
  ],
};

5. 查看被移除的样式

开发阶段，你可能想查看哪些样式被移除了：

module.exports = {
  plugins: [
    {
      name: 'purgecss',
      options: {
        path: path.resolve(__dirname, 'src/**/*'),
        rejected: true, // 输出被移除的样式列表
      }
    }
  ],
};