React

React 是一個用於建構使用者介面的 JavaScript 函式庫。Create React App 是學習 React 的舒適環境，也是開始在 React 中建構新的單頁應用程式 (SPA) 的最佳方式。

本指南假設您使用 create-react-app 來建構您的 React 單頁應用程式。

方法 1：使用 craco

使用 craco 可以將自訂的 PostCSS 外掛程式 (包括 PurgeCSS) 加入 Create React App 應用程式。請遵循 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：eject create-react-app

您需要eject才能公開原始 create-react-app 提供的 webpack 組態

安裝 PurgeCSS 的 webpack 外掛

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

現在，修改檔案 config/webpack.prod.conf.js，在其他匯入項目中加入以下程式碼

// import PurgeCSS webpack plugin and glob-all
const { PurgecssPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob-all");

...並在 plugins 清單中的 new ManifestPlugin(...) 正上方加入以下內容

    // Remove unused css with PurgeCSS. See https://github.com/FullHuman/purgecss
    // for more information about PurgeCSS.
    // Specify the path of the html files and source files
    new PurgecssPlugin({
      paths: [paths.appHtml, ...glob.sync(`${paths.appSrc}/**/*`, { nodir: true })]
    }),