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?
Source maps help debugging your bundle file in the browser by reconstructing the original source from the bundled code.
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.
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