Is that suggested to delete .map files from the build generated by ReactJS?

Question

I am developing large scale application in ReactJS and having a concern with huge build size issue.

After generation of build (Production Mode) in ReactJS, I found that build size was too much heavy and after research, I got that you can delete source map files (.map) by having below configuration in package.json file.

 "postbuild": "rimraf build/**/*.map",

Consequently, my build size got reduced by 80% which makes me more than happy.

However, I am still having a doubt that, aforesaid is the best solution or not?

Percipient

source map is better used for the dev env alone. Having it off on prod is a good move. – Obit

@ValerianPereira why? I challenge you to give an exceptionally compelling reason. – Buoyant

Answer 1

What are source maps?

Source maps help debugging your bundle file in the browser by reconstructing the original source from the bundled code.

Should I use source maps in production?

Source maps don't slow down your page load so it's not a problem to include them in your production environments. They will only be downloaded when you open devtools in the browser. However, since source maps enable the browser to reconstruct the original source from the bundled code, anyone with devtools can peak at your source easily (it's not impossible without source maps, just not easy). That's why the common practice is to only include source maps in development environments.

How do I disable source maps?

You can disable source map generation during the build.

If you are using the latest create-react-app, in your webppack.config.prod change this line

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

to

const shouldUseSourceMap = false

and your prod build files won't include source maps.

Note: You should have ejected your create-react-app to access your webpack config files

Articulate

Thank you for you suggestion. Is that good idea to run via postbuild script as an alternative solution? – Percipient

What if I am not using webpack? – Percipient

Even if you are not using webpack, source maps are generated by whatever build tool you are using. There's nothing wrong in removing the source maps via a post build script. But if you can prevent generating the source maps in the first place, then it will save you a few seconds of build time. – Articulate

@KrupalPatel If this answer helped with solving your question, pl mark it as accepted. It will help others stumbling across a similar problem. – Articulate

@DineshPandiyan you have'nt really explained why. The question really asks why, not how. – Buoyant

@DineshPandiyan 'but it's generally a good idea to not include them in the production env if they are too heavy." Why? This answer is still too vague and smells of the screaming monkies with the garden hose story. – Buoyant

Updated the answer for brevity – Articulate

Answer 2

I have found that in commercial reality, having source maps in any environment saves more time than people "fear it costs".

And this is what it comes down to. People fear it.

What is it you're obfuscating anyway? bad practices? insecure code? Not providing sourcemaps won't save you there.

If you're trying to save on peformance? They're only loaded when devtools are opened, at which point... oh look you don't have sourcemaps what a shame, debugging is now magnitudes more difficult.

Buoyant

Answer 3

For Create-React-App, without ejecting. To disable source map in any environment, add GENERATE_SOURCEMAP=false as one of the env vars for that environment.

Leoni

Answer 4

If you come here and are using webpack, simply set devtool to false in your config to disable webpack (currently @5) from generating .map files.

module.exports = {
    devtool: false
}

Nothing else worked for me besides that, even setting mode: "production" did not work.

Holoblastic

@Buoyant Setting the devtool option generates .map files so that you can step through and view line numbers/code if you are using webpack. By setting devtool to false, these .map files are not generated which reduces the build size. – Holoblastic

Downvoted because you didn't answer the question: Is that suggested to delete .map files from the build generated by ReactJS?... the answer is always no. – Buoyant