Bundling & Minification

Web Optimization in ASP.NET MVC 4

Agenda

Need Bundling Minification Controlling Bundling & Minification

Bunding & Minification

in MVC Debugging

Need

Why ?

Need for OPtimization

Browser limit simultaneous connections

6 simultaneous connection per hostname

Six request processed at a time

Additional request queued by browser

Bundling

What ?

Bundling

New Feature of ASP.NET 4.5

Combine or Bundle multiple files into a single file

Create CSS/JavaScript & other bundles

Fewer file = Fewer HTTP calls

Improves first page load experience

Minification

What ?

Minification

Minification = Optimizations to CSS/JS

Removes White Space, Comments

Shortens variable names to 1 character

Minification

Controlling

How ?

Controlling Bundling & Minification

Compilation Element

Set Debug=false

BundleTable

Set EnableOptimizations=true

Overrides Web.Config

Bundling & Minification in ASP.NET

MVC

Use

Using in ASP.NET MVC

Configure Bundles on App_Start

Add Bundles to BundleCollection

Common Convention:

Selecting “.min” file for release when “XYZ.min.js” and “XYZ.js” exist

Selecting the non “.min” for debug

Ignore “-vsdoc” files

Can you use wild cards matching

E.g. jquery-{version}.js – will use appropriate version. Helps update using JQuery using Nuget

Use Styles.Render() and Scripts.Render() to reference the bundles

Demo

Lets see the magic

Debug

Breakpoints

Debugging

USE IE Developer Tools to debug Minified & Bundled JS file

Steps:

Fire IE Developer Tools

Select Scripts Tab

Start Debugging & Select Bundle

Format the minified file

Breakpoint and Debug

Q & A

Thank You