How to use purgeCSS in create-react-app to remove unused css and javascript

Question

I have a single-page application build with create-react-app. I'm using various npm packages such as antd, reactstrap etc. There is a lot of unused CSS and javascript which is slowing my application down. I read about purgeCSS implementation in react to remove them. As per the document I'm unable to find config/webpack.prod.conf.js in my application and cannot move forward. Can I just use the CLI without adding any configuration? Is there any similar and reliable npm packages to do the same.

I tried implementing the first answer and my config is as follows:

    const glob = require("glob-all");
    const paths = require("react-scripts/config/paths");

    const { override, addPostcssPlugins } = require("customize-cra");

    const purgecss = require("@fullhuman/postcss-purgecss")({
    content: [
        paths.appHtml,
        ...glob.sync(`${paths.appSrc}/antd/es/button/**/*.js`, { nodir: true }),
        ...glob.sync(`${paths.appSrc}/antd/es/collapse/**/*.js`, { nodir: true }),
        ...glob.sync(`${paths.appSrc}/antd/es/dropdown/**/*.js`, { nodir: true }),
        ...glob.sync(`${paths.appSrc}/antd/es/form/**/*.js`, { nodir: true }),
        ...glob.sync(`${paths.appSrc}/antd/es/menu/**/*.js`, { nodir: true }),
        ...glob.sync(`${paths.appSrc}/antd/es/modal/**/*.js`, { nodir: true }),
        ...glob.sync(`${paths.appSrc}/antd/es/input/**/*.js`, { nodir: true }),
        ...glob.sync(`${paths.appSrc}/antd/es/tabs/**/*.js`, { nodir: true }),
        ...glob.sync(`${paths.appSrc}/antd/es/select/**/*.js`, { nodir: true }),
        ...glob.sync(`${paths.appNodeModules}/antd/es/button/**/*.css`, {
        nodir: true,
        }),
        ...glob.sync(`${paths.appNodeModules}/antd/es/collapse/**/*.css`, {
            nodir: true,
        }),
        ...glob.sync(`${paths.appNodeModules}/antd/es/dropdown/**/*.css`, {
            nodir: true,
        }),
        ...glob.sync(`${paths.appNodeModules}/antd/es/form/**/*.css`, {
            nodir: true,
        }),
        ...glob.sync(`${paths.appNodeModules}/antd/es/menu/**/*.css`, {
            nodir: true,
        }),...glob.sync(`${paths.appNodeModules}/antd/es/modal/**/*.css`, {
            nodir: true,
        }),
        ...glob.sync(`${paths.appNodeModules}/antd/es/input/**/*.css`, {
            nodir: true,
        }),...glob.sync(`${paths.appNodeModules}/antd/es/tabs/**/*.css`, {
            nodir: true,
        }),
        ...glob.sync(`${paths.appNodeModules}/antd/es/select/**/*.css`, {
            nodir: true,
        }),
        ...glob.sync(`${paths.appNodeModules}/antd/dist/antd.css`, {
            nodir: true,
        })
    ],
    extractors: [
        {
        extractor: (content) => content.match(/([a-zA-Z-]+)(?= {)/g) || [],
        extensions: ["css"],
        },
    ],
    });

    module.exports = override(
    addPostcssPlugins([
        ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
    ])
    );

still getting unused javascript as follows: I have not ejected as it was not given in the provided link.

score 5 · Accepted Answer · answered Mar 14 '21 at 08:17

5

you need to eject the app in order to find webpack files. Refer: https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject

Instead you can use postbuild script in package.json

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

Refer: https://purgecss.com/guides/react.html#run-purgecss-cli-in-postbuild

answered Mar 14 '21 at 08:17

Shyam

1,364
7
13

I tried the post-build script without ejecting but still getting unused JS and CSS. – era s'q Mar 14 '21 at 08:19
are you using css modules? – Shyam Mar 14 '21 at 08:22
In my application, each component has separate CSS files assign to them. The unused JS and CSS is coming from antd and bootstrap unused code. – era s'q Mar 14 '21 at 08:27
Also, I'm using `"postbuild": "find /path/to/build/static -type f \\( -name \\*.js -o -name \\*.css \\) -exec gzip {} \\; -exec mv {}.gz {} \\;"` for text-compression. I can't have two postbuild. – era s'q Mar 14 '21 at 08:30
you can `&&` and add new script in there. – Shyam Mar 14 '21 at 08:37
here is some info about antd. https://purgecss.com/ant_design.html where app is ejected and uses `react-app-rewired` instead of `react-scripts` – Shyam Mar 14 '21 at 08:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229881/discussion-between-era-sq-and-shyam). – era s'q Mar 14 '21 at 09:20

score 0 · Answer 2 · answered May 22 '21 at 15:25

0

Most simplest way to do it is to use craco configuration layer as suggested in this article:

Using PurgeCSS in CRA Env

answered May 22 '21 at 15:25

Sumit Wadhwa

2,825
1
20
34

How to use purgeCSS in create-react-app to remove unused css and javascript

2 Answers2