Recently, the speed of project NPM run build is getting slower and slower, and we started to look for a solution.

The Node package is 646.8 MB in size.

Package. The json as follows

{" name ", "WWW", "version" : "0.1.0 from", "private" : true, "dependencies" : {" antd ":" ^ 4.1.0 ", "braft - editor" : "^ 2.3.9 connected - the react -", "router" : "^ tactical fix packs for 6.5.2", "echarts" : "^ 4.7.0", "history" : "^ 4.10.1", "lodash" : "^ 4.17.15", ""," ^ 2.26.0 ", "prop - types" : "^ 15.7.2", "react" : "^ 16.10.2", "the react - dom" : "^ 16.10.2", "the react - redux" : "^ 7.1.1," "the react - the router" : "^ 5.1.2", "the react - the router - dom" : "^ 5.1.2", "the react - scripts" : "3.2.0", "the react - the transition - group" : "^ 4.3.0 react -", "virtualized" : "^ 9.21.2", "story" : "^ 4.0.4", "the story - thunk" : "^ 2.3.0", "rsuite" : "^ 3.8.13 video -", "react" : "^ 0.14.1"}, "scripts" : {" start ":" the react - scripts start ", "build" : "react-scripts --max_old_space_size=4096 build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [" > 0.2% ", "not dead", "not op_mini all"], "development" : [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": {" Babel - the plugin - react - transform ":" ^ 3.0.0 ", "eslint - plugin - react - hooks" : "^ 2.1.2", "node - sass" : "^ 4.13.1 react - catch -", "errors", "^ 1.1.2", "the react - sortablejs" : "^ 2.0.11", "sass - loader" : "^ 8.0.0"}}Copy the code

Generally speaking, there is not much content.

Json. The build speed is fast. The premise is that there are not many JS or CSS that are easy to package, so we need to check the packed CSS and JS in the project.

There are more than 10 files on the line. Copy SRC content into a new demo, build, and wait a long time. There seems to be some problems with the introduction.

Screen 1:

Import Tagmanage from ‘components/Tagmanage’ and const Tagmanage = lazy(() => import(‘components/Tagmanage’)) The packing speed is 01:37, so it’s independent of the lead-in path.

Screen 2:

Redux, invalid

Screen 3:

Create React App Webpack configuration extension, disable source-map:

** When there is an error in the file and the mode used is Production, the packaged file is in compressed form, so it is difficult to locate the error location. Source-map is a mapping file. If you click on it, the error is the source code, not the compressed format, which is convenient for debugging.

For the current project, set config.devtool = false; , packing time 04:33.86;

Set config.devtool = source-map; , packing time 06:54.96;

2020.08.17 build time

  • "build:tests": "react-scripts build", :npm run build:tests :01:59
  • "build:tests": "react-app-rewired build", :npm run build:tests :01:30
  • "build:tests": "react-app-rewired --max_old_space_size=4096 build",:npm run build:tests :01:30

conclusion

The more you develop your project, the slower your build will be. Turn off mapSource and optimize

Reference Documents:

  • How to extend the Webpack configuration of the Create React App
  • Play with Webpack and increase your packing speed by 90%
  • Webpack building too slow? Try a few things
  • Upgrade to webpack4
  • (Create React App) Refuse to use eject and customize the WebPack configuration