Doing Bundling & Minification with Angular JS App on ASP.NET MVC

Bundling & Minification are techniques that is used in ASP.NET to improve the load time, by cutting short the number of requests to the server and also by scaling down the size of requested assets. Modern web applications have many static resources particularly in CSS and JS files. Therefore to load the page browser you have to load each resource every time. Each resource is requested by the HTTP request. A browser has to make many requests as a page refers to and wait till the process gets completed and it's only after the completion of the process that the page is rendered.

What delays the process is that every HTTP requests take time, does slowing down the process. Therefore, the minimum the request time takes the application loads faster and better. Most of the current major browsers are limited to the number of simultaneous connections per each hostname to six. It implies that of six requests are being processed then additional requests for the assets on a host, are queued by the browser.

Doing the Bundling

To simplify bundle is a logical group of files, that are referred by unique names and gets loaded on the HTTP request. Many of the CSS and JS pages get loaded but that takes time. In doing the bundling, we rewrite simple and easy code. It enables browser caching and if the content of the bundle is not changed then the browser takes it from the cache. That is fast. However, if there are any changes then a new version token is generated and the browser id forced to reload the bundle again.

To install the optimization framework

In using the ASP.NET Web Optimization Framework, bundling and minifying together of all the scripts of Angular JS application hosted within ASP.NET MVC site becomes faster and easier. The Web Optimization Framework apart from dealing with the JS files can also bundle and minify the CSS files. It is for the purpose of bundling and minifying that some developers only stick to JS bundles.

To bundle Angular Application Script

Adding Angular application script to the bundle lets you define new services within the folder of the running application. Now the Web optimization framework can readily pick up on the files automatically. The developer can also register Angular services on the module by creating the module prior to registering the Angular services.

To ensure correct file order in the bundle

An error message is flashed in the browser console and the framework complains, every time an angular service attempts to register itself within the module that does not exist. So the users have to change the file inclusion in order to ensure that the file is included first.

To render the script bundle

After defining a bundle for the Angular application we need to render it appropriately on the ASP.NET MVC. Calls are made to the Scripts. Render, static method within the virtual path identifying the script bundle.

Minification-Safe Angular Services

JS Minifiers shorten the identifiers where possible. They do not modify any string literals in the code. It helps provide dependency, as a separate array of strings that survives through the Minification process. It ensures that your dependencies are resolved correctly inspite of the Minification.

Nikunj Bhanushali is associated with Cogzie as Sales & Operations head with vast experience in microsoft technologies like SharePoint, WWF, EPiServer, ASP.NET, MVC, N2CMS