| React Environment Setup and Build Tools Overview
|
Showing posts with label SourceMap. Show all posts
Showing posts with label SourceMap. Show all posts
Friday, May 22, 2020
Source Map
Source Map helps us debug JavaScript code in production.
Source Map creates a mapping between the original development version of the JavaScript / JSX files and the compiled and bundles production version of the
JavaScript files, thereby allowing us to debug in production.
In the previous posts we saw how Bable compiles the ES6 & JSX code and transforms them into JavaScript and how webpack bundles the individual files into a common bundle.js file. As a result of the transpilation, minification and bundling process we are left with a large JavaScript file which is almost impossible to debug, but we cannot avoid these steps since they are required to make the JavaScript application secure and performance efficient in the production environment. If so then how do we debug issues in production environment, the answer to this is Source Map.
In the previous posts we saw how Bable compiles the ES6 & JSX code and transforms them into JavaScript and how webpack bundles the individual files into a common bundle.js file. As a result of the transpilation, minification and bundling process we are left with a large JavaScript file which is almost impossible to debug, but we cannot avoid these steps since they are required to make the JavaScript application secure and performance efficient in the production environment. If so then how do we debug issues in production environment, the answer to this is Source Map.
Subscribe to:
Posts (Atom)
