在React项目中使用PurgeCSS优化CSS体积-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00365/article/details/148441678

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

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

什么是PurgeCSS

PurgeCSS是一款强大的工具，它能够通过分析项目中的HTML、JavaScript等文件内容，自动移除未使用的CSS样式。对于React项目来说，随着组件数量的增加，CSS文件往往会包含大量未使用的样式规则，使用PurgeCSS可以显著减少最终打包的CSS文件体积。

准备工作

本文假设你正在使用create-react-app创建React单页应用。create-react-app是React官方推荐的脚手架工具，提供了开箱即用的开发环境配置。

方法一：使用craco配置

craco(Create React App Configuration Override)是一个无需eject就能修改create-react-app配置的工具。这是最推荐的方式，因为它既保持了create-react-app的便利性，又允许我们自定义配置。

实施步骤

首先安装craco和PurgeCSS插件：

npm install @craco/craco @fullhuman/postcss-purgecss --save-dev

在项目根目录创建craco.config.js文件：

const purgecss = require("@fullhuman/postcss-purgecss");

module.exports = {
  style: {
    postcss: {
      plugins: [
        purgecss({
          content: [
            "./src/**/*.html",
            "./src/**/*.tsx", 
            "./src/**/*.ts",
            "./src/**/*.jsx",
            "./src/**/*.js"
          ],
          // 安全选项，避免误删动态加载的类名
          safelist: {
            standard: [/^slick-/], // 保留所有以slick-开头的类名
            deep: [/^some-module/] // 保留模块中的特定类名
          }
        }),
      ],
    },
  },
};

修改package.json中的scripts部分：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

注意事项

content配置项需要包含所有可能使用CSS的文件类型
对于动态加载的类名，需要使用safelist进行保护
建议在开发环境中禁用PurgeCSS，只在生产构建时启用

方法二：使用postbuild脚本

如果你不想修改构建配置，可以在构建完成后运行PurgeCSS。

实施步骤

安装PurgeCSS CLI工具：

npm install purgecss --save-dev

修改package.json：

"scripts": {
  "build": "react-scripts build",
  "postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"
}

优缺点分析

优点：

无需修改构建配置
实现简单

缺点：

需要额外构建步骤
无法与CSS源映射(source map)完美配合

方法三：eject后配置

如果你需要完全控制webpack配置，可以选择eject create-react-app。

实施步骤

运行eject命令：

npm run eject

安装所需依赖：

npm install purgecss-webpack-plugin glob-all --save-dev

修改config/webpack.config.js：

const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');
const glob = require('glob-all');

// 在生产环境配置中添加插件
plugins: [
  new PurgeCSSPlugin({
    paths: [
      paths.appHtml,
      ...glob.sync(`${paths.appSrc}/**/*`, { nodir: true })
    ],
    safelist: function() {
      return {
        standard: [/^slick-/],
        deep: [/^some-module/]
      }
    }
  })
]