React

React 是一个用于构建用户界面的 JavaScript 库。Create React App 是学习 React 的舒适环境，也是开始构建新的单页应用程序的最佳方式。

本指南假设你正在使用 create-react-app 构建单页 React 应用程序。

方法 1：使用 craco

可以使用 craco 在 Create React App 应用程序中添加自定义 PostCSS 插件（包括 PurgeCSS）。按照 craco 安装说明进行操作，然后安装 PurgeCSS PostCSS 插件并将其添加到 craco 配置中：

npm i --save-dev @fullhuman/postcss-purgecss

// craco.config.js
const purgecss = require("@fullhuman/postcss-purgecss");

module.exports = {
  style: {
    postcss: {
      plugins: [
        purgecss({
          content: ["./src/**/*.html", "./src/**/*.tsx", "./src/**/*.ts"],
        }),
      ],
    },
  },
};

方法 2：在 postbuild 中运行 PurgeCSS CLI

在 package.json 中添加以下代码：

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

方法 3：弹出 create-react-app

你需要弹出以公开原始 create-react-app 提供的 webpack 配置

安装 PurgeCSS 的 webpack 插件：

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

现在，修改 config/webpack.prod.conf.js 文件，在其他导入代码中添加以下代码：

// 导入 PurgeCSS webpack 插件和 glob-all
const { PurgecssPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob-all");

...并直接在 new ManifestPlugin(...) 之前的插件列表中添加以下内容：

    // 使用 PurgeCSS 删除未使用的 CSS。请参阅 https://github.com/FullHuman/purgecss
    // 了解有关 PurgeCSS 的更多信息。
    // 指定 HTML 文件和源文件的路径
    new PurgecssPlugin({
      paths: [paths.appHtml, ...glob.sync(`${paths.appSrc}/**/*`, { nodir: true })]
    }),