如何在 create-react-app 中使用 purgeCSS 删除未使用的 css 和 javascript答案

【问题标题】：How to use purgeCSS in create-react-app to remove unused css and javascript如何在 create-react-app 中使用 purgeCSS 删除未使用的 css 和 javascript
【发布时间】：2021-06-11 19:04:46
【问题描述】：

我有一个使用 create-react-app 构建的单页应用程序。我正在使用各种 npm 包，例如 antd、reactstrap 等。有很多未使用的 CSS 和 javascript 正在减慢我的应用程序的速度。我阅读了有关 purgeCSS 的实现以响应删除它们。根据document 我无法在我的应用程序中找到config/webpack.prod.conf.js 并且无法继续前进。我可以只使用CLI 而不添加任何配置吗？是否有任何类似且可靠的 npm 包可以做同样的事情。

我尝试实现第一个答案，我的配置如下：

    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] : []),
    ])
    );

仍然得到未使用的 javascript，如下所示：我没有弹出，因为它没有在提供的link.中给出

【问题讨论】：

标签： javascript reactjs optimization antd css-purge

【解决方案1】：

最简单的方法是使用本文建议的craco 配置层：

Using PurgeCSS in CRA Env

【讨论】：

【解决方案2】：

您需要弹出应用程序才能找到 webpack 文件。参考：https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject

您可以在 package.json 中使用 postbuild 脚本

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

参考：https://purgecss.com/guides/react.html#run-purgecss-cli-in-postbuild

【讨论】：

我尝试了构建后脚本但没有弹出，但仍然得到未使用的 JS 和 CSS。
你在使用 css 模块吗？
在我的应用程序中，每个组件都有单独的 CSS 文件分配给它们。未使用的 JS 和 CSS 来自 antd 和 bootstrap 未使用的代码。
另外，我使用"postbuild": "find /path/to/build/static -type f \\( -name \\*.js -o -name \\*.css \\) -exec gzip {} \\; -exec mv {}.gz {} \\;" 进行文本压缩。我不能有两个 postbuild。
您可以&& 并在其中添加新脚本。