Powered by Blogger.

Saturday, March 1, 2014

What is Bundling and Minification in ASP.Net 4.5?



Bundling is a process of combining JavaScript and CSS files into a bundle that can be treated like a single file. Minification condenses JavaScript and CSS files by removing whitespace and other characters that are not required. These features work with Web Forms, ASP.NET MVC, and Web Pages.

Also check out:

- Restore database in sql server 2008 using management studio

- Singleton class in C#.Net

- Constructor and Destructors in C#.Net

Bundles are created using the Bundle class or one of its child classes say ScriptBundle and StyleBundle. After configuring an instance of a bundle, the bundle is made available to incoming requests by simply adding it to a global BundleCollection instance. In the default templates, bundle configuration is performed in a BundleConfig file. This default configuration creates bundles for all of the core scripts and css files used by the templates.

Bundles are referenced from within views by using one of a couple possible helper methods. In order to support rendering different markup for a bundle when in debug vs. release mode, the ScriptBundle and StyleBundle classes have the helper method, Render. When in debug mode, Render will generate markup for each resource in the bundle. When in release mode, Render will generate a single markup element for the entire bundle. Toggling between debug and release mode can be accomplished by modifying the debug attribute of the compilation element in web.config as shown below:

<system.web>
 <compilation targetframework="4.5" debug="true" />
 ...</system.web>

Additionally, enabling or disabling optimization can be set directly via the BundleTable.EnableOptimizations property.
BundleTable.EnableOptimizations = true;

When files are bundled, they are first sorted alphabetically (the way they are displayed in the  Solution Explorer). Then they are organized so that known libraries and their custom extensions (such as jQuery, MooTools, and Dojo) are loaded first. For example, the final order for the bundling of the Scripts folder as shown above will be:
1. jquery-1.6.2.js
2. jquery-ui.js
3. jquery.tools.js
4. a.js

CSS files are also sorted alphabetically and then reorganized so that reset.css and normalize.css come before any other file. The final sorting of the bundling of the Styles folder shown above will be this:
1. reset.css
2. content.css
3. forms.css
4. globals.css
5. menu.css
6. styles.css





0 comments

Post a Comment