Steve Souders began to describe Web Performance Optimization 10 years ago. WPO is the field of knowledge about increasing the speed in which web pages are downloaded and displayed on the user’s web browser. He wrote and contributed to many books (High Performance Web Sites , Even Faster Web Sites , Web Performance Daybook V2
) to explain us his best practices for performance along with the research and real-world results behind them.
One of the most important rules is to Combine & Minify resources. Bundling combines multiples files into a single file whereas Minification is the process of removing all unnecessary characters from source code without changing its functionality.
It’s impossible to debug the previous script because browsers can’t set breakpoint at character level (only at line-level).
In Firefox (since December 2013)
Here is the result after pretty print.
Fortunately, Source Maps provide a way of mapping the lines & columns of the production source code (bundled & minified), back to their original locations in the corresponding uncompressed source files. This feature is supported by all modern browsers.
An additional file is generated during the minification process and is added at the top of the optimized file.
Source Maps are easily generated by grunt-contrib-uglify or Closure Compiler. Unfortunately, it’s still not supported by Microsoft ASP.NET Web Optimization Framework. For sure, this is something that needs to be done. Web Essentials also offer this feature.
It’s a nice tip for every web developer but the good question may be : Why do you have to debug production code ?