Bundling and Minification
There is a lot of buzz now a days around this and definitely
it is worth to know about this fabulous concept introduced by Microsoft which
drastically improves the performance of the page. Even though it is bit late to
come up with this but still it is good that Microsoft has come up with this
concept.
As a developer we always see or have many number of Javascript
and Style sheet files that we use in our pages and we always have these in
multiple files which is recommended to have better maintainability.
But this also adds up to performance issue because of no
round trips that needs to be made to server in order to fetch the data from
server.
Now a days all the browsers are restricting their browsers
to serve only 6 requests at a time per host. If you observe the below figure
you can observe that first 6 resources are been requested and others are under
waiting to get their turn to perform the request.
Red Bars indicate that the request is queue by browser
waiting for the six connections to be completed.
Bundling
Bundling is a new concept that’s has come up now which
drastically reduces the no of hits made to server and proportionately the time
taken to perform the request. It converts the chunk of files to one file and
you see that it makes a single request to acquire entire folder data. The following
sample is based on MVC application but the same can be achieved in normal
ASP.Net web application.
public class BundleConfig
{
// For
more information on Bundling, visit
http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use
the development version of Modernizr to develop with and learn from. Then, when
you're
// ready
for production, use the build tool at http://modernizr.com to pick only the
tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
So if you observe the above code we have a class by name
BundleConfig(Could be named anything) and we have a static method saying
RegisterBundles which takes existing bundle collection as input and updated the
new bundles.
If you
observe the following code line
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
You
can notice that we have class called ScriptBundle and in which we are passing ("~/Scripts/jquery-{version}.js”) this notates that we are create a bundle by name "~/bundles/jquery" and we are including all the files in scripts folder which
matches the pattern “jquery-{version}.js”
Similar
logic with all other bundles. Once we are done creating bundles we need to include
them to application to access them where ever we want. In Global.asax we need
to register this bundles as shown below.
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
}
}
And once it
is done we can use them where we want to call them. As shown below this can be
used in cshtml
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
Also note
that you need make compilation debug attribute set to false if bundling to be
active.
<system.web>
<compilation debug="true" targetFramework="4.0" />
Look at the
screen shot below which gives clear picture about how it reduced drastically
the no of hits made to server.
Minification
I create a sample function as shown
below
function TestFunction(BigVariable, VeryBigVariable) {
return BigVariable + VeryBigVariable;
}
And when you execute the page and look at developer tools
search for TestFunction you can see that it minifies the variable names to
smaller ones like as shown in the screen shot is has converted BigVariable to “n”
and VeryBigVariable to “t” and also reduces the extra spaces as shown below.
This way it really redcues the size of file and also
makes it very lighter weight to download.
Hope this helps.