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"
  }
}

Shoemaker

Answer 1

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.

Myrilla

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," – Shoemaker

Looks like you're using Windows, the command then would be a bit different. Have a look again on my updated answer – Myrilla

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 – Shoemaker

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. – Myrilla

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" – Shoemaker

worked for me as well for windows, finally – Dharna

Answer 2

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

Traynor