Bundling and minifying static assets like JavaScript and CSS files has been a staple to improve page load time. The goal is to reduce the number of HTTPS request and the size of the files.

HTTP requests are expensive to create, which delays your page from loading. Bundling concatinates files into a single file. CSS and JavaScript files can be combined into a single file, reducing the number of reuqests and eliminating additional delays while the browser evaluates the code.

GruntJS is a web task runner built on top of NodeJS. The grunt ecosystem has thousands of useful plugins that should automate just about every task you might have. Grunt has two plugins to bundle and minify CSS and JavaScript.

In Visual Studio you are probably used to pressing Ctrl + Shift + B to compile a solution and creating a build script for continuous integration tools. That kicks off the process to build your assemblies and executables. But what about that JavaScript and CSS? ASP.NET includes a bundling and minification solution, but it requires compiled C## that can become a bit hectic to maintain. Visual Studio also offers some static analysis of JavaScript and CSS, especially when Web Essentials is installed. Other editors like Sublime also offer plugins to help with the web build process. Grunt shines as an independent, cross-platform command line solution.

Bundling and minification is one of the most overlooked steps for modern web applications. Despite the overwhelming research that shows bundling and minification dramatically improves a web page’s load time, very few web sites implement it. According to HTTPArchive the average web page makes 17 requests for JavaScript files and 5 external CSS files. When I randomly survey sites I rarely encounter sites with more than 50 JavaScript files and most of them are not minimized. Tools like Grunt make this step very easy to implement, eliminating everyone’s excuse.

#gruntjs #bundle #javascript #css