DEV Community

hmintoh
hmintoh

Posted on

React obfuscate: Hiding source code from developer tools

When you run yarn build in a create-react-app application, React minifies the code during the build and generates source maps. JS code thus becomes obfuscated as a byproduct of minification.

If you take a look inside build/static/js, you will see that with each .js file, there is an accompanying .js.map file. The JS files are loaded with your website, and the .map sourcemap files are loaded on demand, when developer tools are opened, so that you are able to navigate around the original code.

To disable sourcemap generation, run your build with GENERATE_SOURCEMAP=false. This will ensure that .map files will not end up in the bundled build.

"scripts": {
    "build": "GENERATE_SOURCEMAP=false react-scripts build"
}  

learned

Top comments (1)

Collapse
 
kenara profile image
kenara

If using Webpack, this is an easy way to deal with source maps, as suggested by @Timer here:

You can modify your package.json file and append "&& rm build/**/*.map" to your build command.