reactjsproduction-environment

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


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?


Solution

  • 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