Open flyingcrp opened 3 years ago
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 :
react-app-rewired
/** @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.
npm run build
I need to find some optimization methods;
thanks .
try this solution https://github.com/facebook/create-react-app/pull/10249. but better await 4.0.2...
The Project bundle becomes slower and slower,I want to know what happened,And then want to optimize it。
package.json
and i use
react-app-rewired
to overwrite some config .config look like :As you can see,In the current situation,
npm run build
needs 15min.I need to find some optimization methods;
thanks .