Some doubts about CRA construction, my project build is getting slower and slower; I can't stand that it takes nearly 15 minutes to build every time; Can someone help me analyze or improve the build speed? thanks you
package.json
{
....
"dependencies": {
"@ant-design/icons": "latest",
"@antv/data-set": "^0.11.7",
"antd": "^4.16.1",
"axios": "^0.21.1",
"bizcharts": "^3.5.8",
"classnames": "^2.3.1",
"compressorjs": "^1.0.6",
"dayjs": "^1.10.5",
"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",
"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"
},
"devDependencies": {
"@ant-design/compatible": "^1.0.8",
"antd-dayjs-webpack-plugin": "^1.0.6",
"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",
"http-proxy-middleware": "^2.0.0",
"husky": "^5.2.0",
"hard-source-webpack-plugin": "^0.13.1",
"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",
"uglifyjs-webpack-plugin": "^2.2.0"
},
}
i use
customize-craoverwrite some webpack config,look likes:
/** @format */
const {
override,
fixBabelImports,
addLessLoader,
useEslintRc,
addWebpackAlias,
addWebpackExternals,
addDecoratorsLegacy,
addWebpackPlugin,
} = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HardWebPackPlugin = require('hard-source-webpack-plugin');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const path = require('path');
const smp = new SpeedMeasurePlugin({
outputFormat: "humanVerbose",
loaderTopFiles: 10,
compareLoadersBuild: {
filePath: "./buildInfo.json",
},
});
module.exports = smp.wrap(override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addDecoratorsLegacy(),
addWebpackExternals({
xlsx: 'XLSX',
react: 'React',
'react-dom': 'ReactDOM',
'react-data-grid': 'ReactDataGrid',
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: {
'@form-item-margin-bottom': '10px',
},
},
}),
addWebpackPlugin(new ProgressBarPlugin()),
addWebpackPlugin(
new AntdDayjsWebpackPlugin({
plugin: [
'isSameOrBefore',
'isSameOrAfter',
'advancedFormat',
'customParseFormat',
'weekday',
'weekYear',
'weekOfYear',
'isMoment',
'localeData',
'localizedFormat',
'relativeTime',
],
replaceMoment: true,
preset: 'antdv3'
}),
),
addWebpackPlugin(
new ProgressBarPlugin(),
new UglifyJsPlugin({
uglifyOptions: {
warning: false,
compress: {
drop_debugger: true,
drop_console: true,
},
},
}),
new HardWebPackPlugin(),
),
addWebpackAlias({
['@']: path.resolve(__dirname, 'src'),
}),
// eslint-disable-next-line
useEslintRc('.eslintrc.js'),
));
i got some information:
Creating an optimized production build...
Build completed in 696.055s
Build completed in 696.057s
SMP ⏱
General output time took 696,063 ms
SMP ⏱ Plugins
TerserPlugin took 235,034 ms
IgnorePlugin took 93,928 ms
ProgressPlugin took 30,087 ms
OptimizeCssAssetsWebpackPlugin took 25,939 ms
MiniCssExtractPlugin took 987 ms
ManifestPlugin took 613 ms
HtmlWebpackPlugin took 284 ms
GenerateSW took 190 ms
InlineChunkHtmlPlugin took 50 ms
InterpolateHtmlPlugin took 50 ms
DefinePlugin took 44 ms
ModuleNotFoundPlugin took 35 ms
SMP ⏱ Loaders
babel-loader, and
eslint-loader took 235,293 ms
median = 3,320 ms
mean = 2,909 ms
s.d. = 1,800.252 ms
range = (336 ms --> 10,715 ms)
module count = 1722
E:\winproject\retail-platform\src\manufacturer\product\attrs\original-factory-code\batch-upload\index.jsx = 10,715 ms
E:\winproject\retail-platform\src\wholesale\purchase\officedispatch\in-officedispatch\InStorage.jsx = 9,632 ms
E:\winproject\retail-platform\src\manufacturer\branch-manager\transfers\SearchForm.jsx = 9,518 ms
E:\winproject\retail-platform\src\manufacturer\branch-manager\transfers\transfers-plan\SearchForm.jsx = 9,490 ms
E:\winproject\retail-platform\src\manufacturer\system-setting\org\branch-office\EditModal.jsx = 9,338 ms
E:\winproject\retail-platform\src\manufacturer\system-setting\org\branch-office\SearchForm.jsx = 9,199 ms
E:\winproject\retail-platform\src\wholesale\client\wholesale\adjustment-record\index.jsx = 8,802 ms
E:\winproject\retail-platform\src\wholesale\sales-strategy\task\group\GroupTargetTask.jsx = 8,800 ms
E:\winproject\retail-platform\src\manufacturer\report-center\analysis-report\purchase-analysis\util.js = 8,761 ms
E:\winproject\retail-platform\src\wholesale\product\allocate\tune-in\index.jsx = 8,724 ms
babel-loader took 232,233 ms
median = 532 ms
mean = 874 ms
s.d. = 724.903 ms
range = (18 ms --> 6,347 ms)
module count = 3766
E:\winproject\retail-platform\node_modules\lodash-es\_cloneArrayBuffer.js = 6,347 ms
E:\winproject\retail-platform\node_modules\lodash-es\throttle.js = 6,151 ms
E:\winproject\retail-platform\node_modules\react-color\es\helpers\checkboard.js = 6,019 ms
E:\winproject\retail-platform\node_modules\lodash-es\_baseCreate.js = 5,862 ms
E:\winproject\retail-platform\node_modules\react-color\es\helpers\hue.js = 5,828 ms
E:\winproject\retail-platform\node_modules\lodash-es\_baseIsArguments.js = 5,810 ms
E:\winproject\retail-platform\node_modules\react-color\es\helpers\saturation.js = 5,750 ms
E:\winproject\retail-platform\node_modules\lodash-es\_createBaseEach.js = 5,449 ms
E:\winproject\retail-platform\node_modules\lodash-es\_baseForOwn.js = 5,434 ms
E:\winproject\retail-platform\node_modules\lodash-es\_isPrototype.js = 5,382 ms
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
resolve-url-loader, and
less-loader took 115,946 ms
median = 2,825 ms
mean = 2,207 ms
s.d. = 1,929.007 ms
range = (208 ms --> 12,518 ms)
module count = 96
E:\winproject\retail-platform\node_modules\antd\es\transfer\style\index.less = 12,518 ms
E:\winproject\retail-platform\node_modules\antd\es\cascader\style\index.less = 8,148 ms
E:\winproject\retail-platform\node_modules\antd\es\collapse\style\index.less = 8,093 ms
E:\winproject\retail-platform\node_modules\antd\es\table\style\index.less = 7,085 ms
E:\winproject\retail-platform\node_modules\antd\es\notification\style\index.less = 5,599 ms
E:\winproject\retail-platform\node_modules\antd\es\steps\style\index.less = 5,254 ms
E:\winproject\retail-platform\node_modules\antd\es\result\style\index.less = 5,023 ms
E:\winproject\retail-platform\src\washing\washing-management\process-flow\index.less = 4,870 ms
E:\winproject\retail-platform\node_modules\antd\es\badge\style\index.less = 4,348 ms
E:\winproject\retail-platform\node_modules\antd\es\avatar\style\index.less = 4,344 ms
css-loader, and
postcss-loader, and
resolve-url-loader, and
less-loader took 91,030 ms
median
= 266 ms
mean
= 1,600 ms
s.d.
= 1,710.916 ms
range
= (102 ms --> 10,564 ms)
module count
= 96
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\node_modules\antd\es\transfer\style\index.less = 10,564 ms
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\node_modules\antd\es\cascader\style\index.less = 7,508 ms
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\node_modules\antd\es\collapse\style\index.less = 7,076 ms
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\node_modules\antd\es\table\style\index.less = 5,649 ms
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\node_modules\antd\es\notification\style\index.less = 5,039 ms
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\node_modules\antd\es\steps\style\index.less = 4,312 ms
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\node_modules\antd\es\result\style\index.less = 4,280 ms
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\node_modules\antd\es\avatar\style\index.less = 3,950 ms
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\node_modules\antd\es\badge\style\index.less = 3,855 ms
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-7-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\resolve-url-loader\index.js??ref--6-oneOf-7-3!E:\winproject\retail-platform\node_modules\less-loader\dist\cjs.js??ref--6-oneOf-7-4!E:\winproject\reta
il-platform\src\washing\washing-management\process-flow\index.less = 3,596 ms
modules with no loaders took 11,860 ms
median = 489 ms
mean = 331 ms
s.d. = 353.374 ms
range = (0 ms --> 1,703 ms)
module count = 64
E:\winproject\retail-platform\node_modules\@babel\runtime\helpers\esm\objectWithoutProperties.js = 1,703 ms
E:\winproject\retail-platform\node_modules\@babel\runtime\helpers\esm\objectSpread2.js = 1,623 ms
E:\winproject\retail-platform\node_modules\@babel\runtime\helpers\esm\superPropBase.js = 1,105 ms
E:\winproject\retail-platform\node_modules\babel-preset-react-app\node_modules\@babel\runtime\helpers\esm\objectDestructuringEmpty.js = 962 ms
E:\winproject\retail-platform\node_modules\babel-preset-react-app\node_modules\@babel\runtime\helpers\esm\createForOfIteratorHelper.js = 914 ms
E:\winproject\retail-platform\node_modules\@babel\runtime\helpers\esm\get.js = 883 ms
E:\winproject\retail-platform\node_modules\@babel\runtime\helpers\esm\createClass.js = 641 ms
E:\winproject\retail-platform\node_modules\@babel\runtime\helpers\esm\classCallCheck.js = 640 ms
E:\winproject\retail-platform\node_modules\@babel\runtime\helpers\esm\iterableToArrayLimit.js = 621 ms
E:\winproject\retail-platform\node_modules\@babel\runtime\helpers\esm\createSuper.js = 549 ms
file-loader took 838 ms
median = 758 ms
mean = 412 ms
s.d. = 401.261 ms
range = (64 ms --> 761 ms)
module count = 4
E:\winproject\retail-platform\src\static\img\prompt-wholesale.svg = 761 ms
E:\winproject\retail-platform\src\static\img\prompt-retail.svg = 758 ms
E:\winproject\retail-platform\src\static\img\prompt-manufurer.svg = 65 ms
E:\winproject\retail-platform\src\static\img\prompt-washing.svg = 64 ms
babel-loader, and
antd-dayjs-webpack-plugin took 748 ms
median = 748 ms
mean = 748 ms
range = (748 ms --> 748 ms)
module count = 1
E:\winproject\retail-platform\node_modules\antd-dayjs-webpack-plugin\src\init-dayjs-webpack-plugin-entry.js = 748 ms
mini-css-extract-plugin, and
css-loader, and
postcss-loader took 380 ms
median = 380 ms
mean = 380 ms
range = (380 ms --> 380 ms)
module count = 1
E:\winproject\retail-platform\node_modules\@ant-design\compatible\assets\index.css = 380 ms
css-loader, and
postcss-loader took 302 ms
median
= 302 ms
mean
= 302 ms
range
= (302 ms --> 302 ms)
module count
= 1
E:\winproject\retail-platform\node_modules\css-loader\dist\cjs.js??ref--6-oneOf-3-1!E:\winproject\retail-platform\node_modules\postcss-loader\src\index.js??postcss!E:\winproject
\retail-platform\node_modules\@ant-design\compatible\assets\index.css = 302 ms
url-loader took 184 ms
median = 65 ms
mean = 75 ms
s.d. = 22.316 ms
range = (59 ms --> 108 ms)
module count = 4
E:\winproject\retail-platform\src\static\img\HDQRCode.jpg = 108 ms
E:\winproject\retail-platform\src\static\img\notregister.png = 68 ms
E:\winproject\retail-platform\src\static\img\sanCode.jpg = 65 ms
E:\winproject\retail-platform\src\static\img\expired.png = 59 ms
html-webpack-plugin took 22 ms
median = 22 ms
mean = 22 ms
range = (22 ms --> 22 ms)
module count = 1
E:\winproject\retail-platform\node_modules\html-webpack-plugin\lib\loader.js!E:\winproject\retail-platform\public\index.html = 22 ms
--------------------------------------------
Build No 1
--------------------------------------------
┌─────────┬────────────────────────────────────────────────────────────────────────────────────┬───────────┬───────┬────────────┐
│ (index) │ Name │ Time (ms) │ Count │ Comparison │
├─────────┼────────────────────────────────────────────────────────────────────────────────────┼───────────┼───────┼────────────┤
│ 0 │ 'html-webpack-plugin' │ 22 │ 1 │ '' │
│ 1 │ 'babel-loader,eslint-loader' │ 235293 │ 1722 │ '' │
│ 2 │ 'babel-loader,antd-dayjs-webpack-plugin' │ 748 │ 1 │ '' │
│ 3 │ 'modules with no loaders' │ 11860 │ 64 │ '' │
│ 4 │ 'babel-loader' │ 232233 │ 3766 │ '' │
│ 5 │ 'mini-css-extract-plugin,css-loader,postcss-loader,resolve-url-loader,less-loader' │ 115946 │ 96 │ '' │
│ 6 │ 'css-loader,postcss-loader,resolve-url-loader,less-loader' │ 91030 │ 96 │ '' │
│ 7 │ 'mini-css-extract-plugin,css-loader,postcss-loader' │ 380 │ 1 │ '' │
│ 8 │ 'css-loader,postcss-loader' │ 302 │ 1 │ '' │
│ 9 │ 'url-loader' │ 184 │ 4 │ '' │
│ 10 │ 'file-loader' │ 838 │ 4 │ '' │
└─────────┴────────────────────────────────────────────────────────────────────────────────────┴───────────┴───────┴────────────┘
Compiled with warnings.
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip: