我的项目是用antD和CRA构建的。但是现在打包速度越来越慢了。我使用speed-measure-webpack-plugin分析构建时间,得到了以下信息:
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.
我使用customize-cra覆盖了一些webpack配置,如下所示:
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'),
));
我的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"
]
}
如您所见,构建速度太慢了,我想让它变快,谢谢。
6条答案
按热度按时间csbfibhn1#
与其他软件包相比,create-react-app已经是相当慢的了。但这还更糟糕。
hwazgwia2#
这个问题已经被自动标记为过时,因为它没有任何最近的活动。如果没有发生任何进一步的活动,它将在5天后被关闭。
k4aesqcs3#
与https://stackoverflow.com/questions/68390349/speed-analysis-and-optimization-of-creat-react-app-build相同。
xxb16uws4#
这个问题已经被自动标记为过时,因为它没有任何最近的活动。如果没有发生任何进一步的活动,它将在5天后被关闭。
lskq00tm5#
这个问题解决了吗?
xurqigkl6#
?