Enable source-map on production?

Have you encountered a situation where you wanted your client-side JS code readable and debuggable without removing the bundling, minification, and uglification? More like a production situation.

I encountered this multiple times.

Source mapfiles solve this problem for us. These files contain the information on how to map our bundled, transpiled, minified and uglified code back to its original form(as we developed). Developer tools(Google Chrome, Firefox debugger) automatically parse the source map files and make it appear you are running original files. Gives debug experience similar to your code editors.

All you need to do is add a source-map file link in your bundled JS file.

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

IMPORTANTto note here is, the source-map file will be only downloaded when you open the debug tool. There will be no performance impact on end customers.

We use Webpack for bundling, transpilation, minification, and uglification. Enabling source-map is just a simple configuration change in the webpack.config.js . Check here how simple it is.

“configure source-map is easy, no performance impact” still it was disabled.

Because

• We don’t want to enable everyone to debug our code.
• We don’t like anyone to judge us based upon our coding style.
• We cannot take the risk of mistakenly exposing the secret information.

The balanced solution is straight forward and simple,

extract-out the source map files, host them with restricted access, update link in the bundled files.

How we did this, is what you will read after this.

Our system design

I feel the necessity to explain our system design before explaining how we implemented this for our case.

Step: 0.a and 0.bIn this step we bundled, minified and uglified our code, upload them to CDN and generates a manifest JSON file, which will contain all the uploaded assets URLs.

Step: 1 and 2Our customers will browse our portal, the server will return HTML page embedded with assets URLs.

Step: 3 and 4Browser will fetch all the assets, mentioned in the HTML file, from CDN.

Finally, the coded solution

Step 1:Following code generates source map files for us.

Above `webpack.config.js` will do

• generate source map files at location ` uploadFolder/js/ ` with name *.map.js
• excludes vendor bundle from source-map file generation
• bundled file will have one line appended
  //# sourceMappingURL= /SOURCEMAP- [url] .
  This comment line has placeholder /SOURCEMAP- which later will help in replacing it with new URL

Step 2:Create URL morphing service which will take URL as an input and return morphed URL as output. This morphed URL should only get resolved within the office network.

https://www.mycdn.com/asd.js :https://internal.mycompany.com/qw34.js

Step 3:While uploading files to CDN

*.map.js
/SOURCEMAP-[[URL]]

Finally

You must have found this useful, “Press clap”.