Whether the tool can analyze the compilation time？

[flyingcrp]

The Project bundle becomes slower and slower,I want to know what happened，And then want to optimize it。

package.json

{
    "name": "retail-platform",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@ant-design/icons": "latest",
        "@antv/data-set": "^0.11.7",
        "antd": "^4.10.2",
        "axios": "^0.21.1",
        "bizcharts": "^3.5.8",
        "classnames": "^2.2.6",
        "compressorjs": "^1.0.6",
        "decimal.js-light": "^2.5.1",
        "file-saver": "^2.0.2",
        "husky": "^4.3.0",
        "immer": "^8.0.0",
        "immutability-helper": "^3.1.1",
        "js-cookie": "^2.2.1",
        "less": "^4.1.0",
        "lint-staged": "^10.4.0",
        "lodash": "^4.17.20",
        "moment": "^2.29.1",
        "node-less-chokidar": "^0.4.1",
        "npm-run-all": "^4.1.5",
        "path-to-regexp": "^6.2.0",
        "prop-types": "^15.7.2",
        "qrcode.react": "^1.0.0",
        "react": "^16.14.0",
        "react-color": "^2.19.3",
        "react-copy-to-clipboard": "^5.0.2",
        "react-data-grid": "^6.1.0",
        "react-data-grid-addons": "^6.1.0",
        "react-dnd": "^11.1.3",
        "react-dnd-html5-backend": "^11.1.3",
        "react-document-title": "^2.0.3",
        "react-dom": "^16.14.0",
        "react-highlight-words": "^0.16.0",
        "react-hot-keys": "^2.6.0",
        "react-loadable": "^5.5.0",
        "react-resizable": "^1.11.0",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "3.4.3",
        "react-use": "^15.3.4",
        "react-webcam": "^5.2.1",
        "react-window": "^1.8.5",
        "resize-observer-polyfill": "latest",
        "source-map-explorer": "^2.5.0",
        "store": "^2.0.12",
        "use-immer": "^0.4.1",
        "wolfy87-eventemitter": "^5.2.9"
    },
    "scripts": {
        "analyze": "source-map-explorer build/static/js/*.js",
        "build-css": "node-less-chokidar src",
        "watch-css": "npm run build-css && node-less-chokidar src --watch --recursive",
        "start-js": "react-app-rewired start",
        "start": "npm-run-all -p watch-css start-js",
        "build-js": "react-app-rewired --max_old_space_size=8192 build",
        "build": "npm-run-all build-css build-js",
        "test": "react-app-rewired test --env=jsdom",
        "eject": "react-scripts eject"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "devDependencies": {
        "@ant-design/compatible": "^1.0.8",
        "babel-plugin-import": "^1.13.1",
        "babel-preset-latest": "^6.24.1",
        "customize-cra": "^1.0.0",
        "eslint-plugin-react": "^7.21.4",
        "eslint-plugin-react-hooks": "^4.1.2",
        "less-loader": "^7.0.2",
        "prettier": "^2.1.2",
        "react-app-rewired": "^2.1.8"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ]
}

and i use react-app-rewired to overwrite some config .config look like :

/** @format */

const {
    override,
    fixBabelImports,
    addLessLoader,
    useEslintRc,
    addWebpackAlias,
    addWebpackExternals,
    addDecoratorsLegacy,
} = require('customize-cra');
const path = require('path');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addDecoratorsLegacy(),
    addWebpackExternals({
        xlsx: 'XLSX',
        react: 'React',
        'react-dom': 'ReactDOM',
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@form-item-margin-bottom': '10px',
                '@text-color': '#000',
                '@item-hover-bg': 'rgb(56, 154, 229)',
                '@item-active-bg': 'rgb(56, 154, 229)',
                '@select-item-selected-bg': 'rgb(56, 154, 229)',
                '@select-item-active-bg': 'rgb(56, 154, 229)',

                '@layout-footer-padding': '0px',
                '@layout-header-height': '50px',
                '@layout-sider-background': '#242e38',
                '@layout-trigger-background': '#286abc',
                '@layout-header-padding': '0 25px',

                '@tabs-card-height': '25px',
                '@tabs-bar-margin': '0 0 8px 0',
                '@tabs-active-color': 'white',

                '@btn-height-base': '25px',
                '@list-item-padding': '3px 0',

                '@card-padding-base': '5px',
                '@card-padding-wider': '5px',
                '@card-head-padding': '5px',
                '@card-head-height': '30px',

                '@table-header-sort-bg': '#1890ff',
                '@table-header-icon-color': '#f5f5f5',
                '@table-row-hover-bg': 'rgb(122, 191, 255)',
                '@table-padding-vertical': '5px',
                '@table-padding-horizontal': '10px',

                '@input-height-base': '25px',
                '@border-color-base': '#5ba8e4',
                '@menu-dark-bg': '#242e38',
                '@menu-dark-submenu-bg': '#242e38',
                '@menu-dark-item-active-bg': '#286abc',
            },
        },
    }),
    addWebpackAlias({
        ['@']: path.resolve(__dirname, 'src'),
    }),
    // eslint-disable-next-line
    useEslintRc('.eslintrc.js'),
);

As you can see，In the current situation， npm run build needs 15min.

I need to find some optimization methods；

thanks .

[marvelsrp]

try this solution #10249. but better await 4.0.2...