npm run build is not minifying the reactJs project

Question

I executed the npm command "npm run build" from the reactJs App root folder and "build' folder is generated with the below output in the console.

    File sizes after gzip:

  646.8 KB  build\static\js\2.d370d4e1.chunk.js
  12.46 KB  build\static\js\main.fec451dd.chunk.js
  823 B     build\static\css\main.fc109ae9.chunk.css
  772 B     build\static\js\runtime-main.83c3e0c4.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Then I executed the command "serve -s build" and got the below output in the console.

INFO: Accepting connections at http://localhost:5000

I could see all the *.tsx files not minified in developer tools. Not sure what am I doing wrong and why the files in the below mentioned "js" folder are not minified .

package.json

 {
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.68",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "node": "^15.4.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "3.4.3",
    "typescript": "^3.7.5",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prod": "webpack --mode production"
  },
  "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": {
    "ts-loader": "^8.0.12",
    "typescript": "^3.7.5",
    "webpack-cli": "^4.3.0"
  }
}

tmhao2005 · Answer 1 · 2020-12-27T05:31:43.093

9

The setup is obviously right. The thing you have seen was just the sourcemap which is to map to the source code (for debug purpose) that's why you can search under browser devtool.

Basically sourcemap is generated by default setup of cra in webpack configuration file.

However, if you wish to stop generating it, you can do it via CLI:

package.json

{
  "scripts": {
    // ...
   "build": "GENERATE_SOURCEMAP=false react-scripts build",
    // In case of using Windows:
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
  }
}

Then you would no longer see you code under devtool.

edited Dec 27 '20 at 05:31

answered Dec 27 '20 at 05:26

tmhao2005

14,776
2
37
44

i added "build": "GENERATE_SOURCEMAP=false react-scripts build". When I do "npm run build" getting error "'GENERATE_SOURCEMAP' is not recognized as an internal or external command," – Nofi Dec 27 '20 at 05:30
Looks like you're using Windows, the command then would be a bit different. Have a look again on my updated answer – tmhao2005 Dec 27 '20 at 05:34
Yes I am using windows. Even after using "GENERATE_SOURCEMAP=false" as per your updated answer the files are not minified. In developer tools I could find all the full files inside "localhost:5000->static->js – Nofi Dec 27 '20 at 05:40
1

Did you check your `build/static/js` to make sure there is no files `.map` (if there's still map files, your command doesn't work properly)? Also please keep one `build` command script. – tmhao2005 Dec 27 '20 at 06:05
you are right, I could still see 3 map files inside js folder. I manually deleted those 3 map files and now in developer tools I am not seeing any raw tsx files. Thanks a lot for pointing out map files!. Still no clue why map file is getting generated even with "GENERATE_SOURCEMAP=false" – Nofi Dec 28 '20 at 03:42
worked for me as well for windows, finally – codmitu Jan 31 '23 at 08:16

score 0 · Answer 2 · answered Dec 27 '20 at 05:26

Install the React Developer Tools extension. Hover over the extension if it says you are using production build then your files are minified. As you can see the image below. Also read about production build from official docs from react.

https://reactjs.org/docs/optimizing-performance.html

npm run build is not minifying the reactJs project

2 Answers2