Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I optimize this problem with this build time?

See original GitHub issue

my project built with antD + CRA But now the packaging speed is getting slower.

i use speed-measure-webpack-plugin to analyze the building time,i got the following information:

E:\WinProject\retail-platform>yarn build
yarn run v1.22.5
$ npm-run-all build-css build-js
$ node-less-chokidar src
err [LessError: Unrecognised input] {
  stack: undefined,
  type: 'Parse',
  filename: 'E:\\WinProject\\retail-platform\\node_modules\\base\\index.js',
  index: 0,
  line: 1,
  column: 0,
  callLine: NaN,
  callExtract: undefined,
  extract: [ undefined, "'use strict';", '' ]
}
Wrote 55 CSS files to E:\WinProject\retail-platform\src
$ react-app-rewired --max_old_space_size=5120 build
Creating an optimized production build...
Build completed in 798.15s



 SMP  ⏱
General output time took 13 mins, 18.16 secs

 SMP  ⏱  Plugins
TerserPlugin took 3 mins, 17.46 secs
IgnorePlugin took 2 mins, 40.46 secs
ProgressPlugin took 18.74 secs
OptimizeCssAssetsWebpackPlugin took 9.55 secs
MiniCssExtractPlugin took 0.669 secs
ManifestPlugin took 0.516 secs
HtmlWebpackPlugin took 0.322 secs
GenerateSW took 0.101 secs
InlineChunkHtmlPlugin took 0.081 secs
DefinePlugin took 0.062 secs
InterpolateHtmlPlugin took 0.056 secs
ModuleNotFoundPlugin took 0.05 secs

 SMP  ⏱  Loaders
babel-loader, and
eslint-loader took 7 mins, 12.77 secs
  module count = 1617
babel-loader took 5 mins, 18.64 secs
  module count = 3752
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
resolve-url-loader, and
less-loader took 3 mins, 9.078 secs
  module count = 96
css-loader, and
postcss-loader, and
resolve-url-loader, and
less-loader took 2 mins, 17.21 secs
  module count = 96
modules with no loaders took 21.93 secs
  module count = 61
url-loader took 1.97 secs
  module count = 4
file-loader took 1.006 secs
  module count = 4
mini-css-extract-plugin, and
css-loader, and
postcss-loader took 0.558 secs
  module count = 1
css-loader, and
postcss-loader took 0.449 secs
  module count = 1
html-webpack-plugin took 0.018 secs
  module count = 1



Compiled successfully.

i use customize-cra to override some webpack config ,like following :

config-overrides.js,

/** @format */
const {
    override,
    fixBabelImports,
    addLessLoader,
    useEslintRc,
    addWebpackAlias,
    addWebpackExternals,
    addDecoratorsLegacy,
    addWebpackPlugin,
} = require('customize-cra');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const path = require('path');
module.exports = smp.wrap(override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addDecoratorsLegacy(),
    addWebpackExternals({
        xlsx: 'XLSX',
        'ReactDataGrid': 'react-data-grid',
    }),
    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',
                '@select-border-color': '#d9d9d9',
            },
        },
    }),
    addWebpackPlugin(new ProgressBarPlugin()),
    addWebpackAlias({
        ['@']: path.resolve(__dirname, 'src'),
    }),
    // eslint-disable-next-line
    useEslintRc('.eslintrc.js'),
));

my package.json:

{
    "name": "xxx",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@ant-design/icons": "latest",
        "@antv/data-set": "^0.11.7",
        "antd": "^4.14.1",
        "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",
        "immer": "^9.0.0",
        "immutability-helper": "^3.1.1",
        "less": "^4.1.0",
        "lodash": "^4.17.20",
        "moment": "^2.29.1",
        "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-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-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": "^17.2.1",
        "react-webcam": "^5.2.1",
        "react-window": "^1.8.5",
        "resize-observer-polyfill": "latest",
        "store": "^2.0.12",
        "use-immer": "^0.5.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=5120 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",
        "husky": "^5.2.0",
        "less-loader": "^7.0.2",
        "lint-staged": "^10.4.0",
        "node-less-chokidar": "^0.4.1",
        "npm-run-all": "^4.1.5",
        "path-to-regexp": "^6.2.0",
        "prettier": "^2.2.1",
        "progress-bar-webpack-plugin": "^2.1.0",
        "react-app-rewired": "^2.1.8",
        "react-data-grid": "^6.1.0",
        "source-map-explorer": "^2.5.0",
        "speed-measure-webpack-plugin": "^1.5.0"
    },  
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ]
}

as you can see,the build speed is too slow , i want to make it faster ,thanks