Nginx Question posted in
The official documentation can be found here.

How could I make react-create-app to minify my code? – Nginx

I need to minify my code on server.
It tells me that npm run build do all the minifying stuff
npm run build
but on my server (of course I access it not via localhost) it shows all the code.
I am doing npm run build in pom.xml in maven.
My package json contains actual ver of react-scripts.
package.json

All code is served with nginx.

Ok, I’ve seen this
When does create-react-app obfuscate or minify code?
and this GENERATE_SOURCEMAP=false Issue
and read this https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-howgenerate
where it tells me that Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files.
So it tells me that source maps is the reason I see my code as is.

And there is a Firefox Browser without devTools where I turned off source maps

here I turned off source maps

and…
It shows me the code as is!

here I marked red the div in the FF browser with turned off Source maps

Why it still shows me the code despite "npm run build makes build as minified"?
Please tell me where I’m bad and how could I fix it? And BTW, everywhere it is written that *.env should be in the root directory. Root directory of whole project or only frontend folder?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Well,

    1. How could we check if we see the code or not, is code minimized or not?

    We should go on server and in sources type js like file extension. If they are plain to see - minimizing (obfuscating and uglifying) is not working (that was my case)

    1. We need to delete source maps to forbid user to see our code.

    Another solution is to create a new file in your project's root directory named .env and include the following inside the file. This will remove any .map files from your build/static/js folder the next time you run build.

    doesn't work for me. I've created permission.env and added

    GENERATE_SOURCEMAP=false

    into it and then run

    npm run build

    I've attached screenshot where I searched in generated build for *.map extension files. They are here even we created the *.env file.

    here we see that maps files are generated

    So I've added

      },
  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

    in my package.json and run npm run build once again. We can see there are no map files - so that command helped us.

    now there are no map files


  2. 0

    I get the sense that most of your question is actually related to confusion over what minifying code actually means.

    Definition

    Minification, also known as minimization, is the process of removing all unnecessary characters from JavaScript source code without altering its functionality. This includes the removal of whitespace, comments, and semicolons, along with the use of shorter variable names and functions. Minification of JavaScript code results in compact file size.

    Source: Why Minify JavaScript Code?

    Applied to Create React App

    In your case, the npm run build command will execute react-scripts build which is provided by Create React App. The documentation explains what this does:

    Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

    The build is minified and the filenames include the hashes. If necessary, classnames and function names can be enabled for profiling purposes. See the production build section for more information.

    Source: Create React App: npm run build

    When npm run build is run, it will create a build folder. Inside ./build/static you’ll typically find your minified code (javascript, css, media, …).

    In ./build/static/js you’ll likely find the following files:

    - [hash].chunk.js
- [hash].chunk.js.map
- main.[hash].chunk.js
- main.[hash].chunk.js.map
- runtime-main.[hash].chunk.js
- runtime-main.[hash].chunk.js.map

    Note: the exact output will vary on your version of Create React App.

    What are Source Maps?

    As you’ll have noticed above, the build folder contains a *.js.map file for each .js file, these are source maps.

    The reason these are generated is for debugging purposes.
    If you were to try and debug your code using the developer tools of your browser, you’d have a hard time understanding your minified (and possibly uglified code). By adding these .map-files, your browser can load these (by using an HTTP header) and represent your code as if you were looking at the original code.

    You can find more information here: MDN – Use a source map

    Developer tools "Inspector"

    Every major browser has a way of viewing or debugging your application using "developer tools". These developer tools usually show a version of your code that is modified to be easier to read as a developer.

    If you wanted to verify if your HTML code is minified or not, there are 2 things you could check:

    • Check your ./build/index.html file and ensure that only the build folder is being hosted by your web server
    • Instead of using the "Inspector", view the page source instead (usually you can see this via right-click on the page and selecting "View Page Source")
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search