React

Reactはユーザーインターフェース構築のためのJavaScriptライブラリです。Create React AppはReact学習のための快適な環境であり、新しいシングルページアプリケーションをReactで構築する最良の方法です。

このガイドでは、シングルページReactアプリケーションの構築にcreate-react-appを使用していることを前提としています。

方法1：cracoを使用する

カスタムPostCSSプラグイン（PurgeCSSを含む）は、cracoを使用して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：create-react-appをejectする

元のcreate-react-appが提供するwebpack設定を公開するには、ejectする必要があります。

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");

…そして、プラグインリストの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 })]
    }),