项目包变得越来越慢,我想了解发生了什么,然后想优化它。
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"
]
}
我使用 react-app-rewired
覆盖一些配置。config 看起来像这样:
/** @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'),
);
如您所见,在当前情况下,npm run build
需要 15 分钟。我需要找到一些优化方法;
谢谢。
1条答案
按热度按时间7vux5j2d1#
尝试这个解决方案 #10249 ,但更好的是等待 4.0.2 版本。