What are source maps?
It’s generally a good practice to minify and combine your assets (JS & CSS) when deploying to production. This process reduces the size of your assets and dramatically improves your website’s load time.
Source maps create a map from these compressed asset files back to the source files.
This map allows you to debug and view the source code of your compressed assets, as if you were actually working with the originals.
How do you use source maps?
To install Uglify JS with NPM:
npm install uglify-js -g
Minify the files and generate source maps:
uglify-js file1.js file2.js -o output.js --source-map output.map.js
The code above tells UglifyJS to:
- Take file1.js and file2.js as input
- Compress input files and output them to output.js
- Generate the source map for the compressed file and output it to output.map.js
Marrying source maps and Django Compressor
Django Compressor is a great Django plugin to mark assets for minification right inside your templates:
Behind the scenes you can develop logic to combine and minify the files with any algorithm or third party tools of your choosing.
Source maps are a new addition to the developer toolbox. Although the source maps spec lives in Google docs (no kidding), they’re supported by all major browsers: Chrome, Safari, Firefox, and IE11. By default, source maps are disabled so your users will not incur any unnecessary bandwidth overheads.
Now, each compressed asset file contains a link pointing to its source map, and we’ve just told Chrome not to ignore them.
If you’d like to see source maps in action, sign up for a FREE Logentries account and take a look at our source code.
Pretty cool, huh?