The other day a co-worker noticed something interesting about our production code: You could view our original, perfectly formatted code in the browser. At first I was like, "But I built it for production, and therefore it should be minified and unreadable, right?"
I always thought Create React App (CRA) handled that for me. Have I been lied to the entire time?
Yes, source maps were the reason. So I learned about them and thought it would be nice to shed some light on them so others, like myself, become aware of them and make more informed decisions.
Source maps are just JSON files that essentially rebuild what the bundlers and transpilers changed. Their main purpose is to help debug your built, optimized code.
It makes sense that if you have a bug and view the stack trace, you want to see your code and not the gibberish that webpack and babel spit out.
The browser can then use the .map files to reconstruct the original code, and become viewable in browser dev tools.
In the end, what am I going to do? Leave the source maps in or take them out.
Personally, I believe it depends on your requirements, but mostly yes. I think CRA has it correct (as in by default, they are generated, but can be overwritten).
Below I've identified some points about generating source maps to help make your choice:
For not having them:
- A savvy user could see your source code 😬
For having them:
- So what if they see your code? What are they gonna do with it? 🤷🏽♂️
- It helps debug in production.
Yep, that's basically it. It seems to come down to whether you care if users see your source code and if you want to have the ability to debug in production.
Important Note: If you generate source maps, there are going to be extra .map files created. Although, these do **not* add to the bundle size because these files are only requested by the client when dev tools are open 😏*
Let me know how you feel about generating source maps for production. Do you disable them, or leave them be?
Also, if you want to fact check me, I'm all ears to understand more about source maps.
Check out these resources I used to get learn about source maps:
- Dev.to post by Oyetoke Toby (see the comments too)
- General info about source maps by Ryan Seddon
- Sentry.io docs