Source maps create a map from these compressed asset files back to the source files.
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.
Pretty cool, huh?