Monday 14 January 2013

Minification and Bundling of CSS and JavaScript Files ASP.NET

Minification can be applied to both CSS and JavaScript files and it simply involves removing any unnecessary whitespace within the code. It might also involve trimming long variable and method names. However, your code will still run exactly as intended, but, due to the fact that it has been drastically reduced in size, it will run a lot faster. It is important to understand that, while humans might struggle to read this minified code, the browser will have no trouble at all processing the code. This is a necessary evil because the removal of whitespace and the obfuscation that needs to take place will ultimately help the file load faster. The built-in support for minification that comes with Visual Studio 2012 is also intelligent enough that, while you are in development, you will be able to see the full, un-minified code. When you run your website in release mode, the code will automatically get minified on the fly for you.

Bundling CSS and JavaScript is an effective way to reduce the number of HTTP requests that a web page needs to make. The more HTTP requests that a browser needs to make, the longer it takes for a web page to load. This is because each HTTP requests takes time and, quite often, your browser will only be able to download a certain number of files in parallel. By combining all JavaScript files into a single script and similarly combining all CSS into a single StyleSheet, you can severely reduce the number of HTTP requests that your web page makes. For example, if there are two CSS files on a webpage, simply by combining the two files into one you are effectively reducing the number of HTTP requests that a browser needs to make from 2 to 1. There is no reason why combining two JavaScript files together into one should stop them from working just as effectively as if they were two separate files.

No comments:

Post a Comment