One
of the new features in ASP.NET MVC 4 is the ability to easily bundle and minify
your JavaScript and CSS. With .NET 4.5, Microsoft introduced a new featured
called Bundling and Minification which bundle multiple
JavaScript and CSS files in one requests and minify it by removing white spaces
and characters which is not required. Microsoft introduced a new class called
BundleTable which take care of Bundling and Minification. BundleTable class is
shipped with two inbuilt Bundle for JavaScript and CSS respectively. However
one can easily create their own custom Bundle as per requirements.
Example
To
get started, create new MVC 4 application, build it and open it in Firefox or
any other browser. And inspect (IE F-12 or open Firebug at Mozilla) the loaded
JavaScript information with the help of developer tools of browser you are
using.
In
IE select the Script tab or in Mozilla open “Net è
JS” to view JavaScript files
To view CSS files, in IE select the CSS tab or in
Mozilla open “Net è CSS”.
You can see there are lots of JavaScript files and CSS
files are used.
Bundling
The process of combining all of your JavaScript
and CSS files into one file (one for js and one for css). This is a new feature in ASP.NET 4.5 that makes it easy to combine
or bundle multiple files into a single file. You can create CSS, JavaScript and
other bundles. Fewer files means fewer HTTP requests and that can improve first
page load performance.
Minification
The process of shrinking the js and css
content. Minification performs a variety of different
code optimizations to scripts or css, such as removing unnecessary white space
and comments and shortening variable names to one character.
Creating the Bundles
Simply add
jQuery, jQuery.UI, jQuery validation etc to the BundleConfig.cs class in the
App_Start folder.
Note: ScriptBundle is used to
bundle the JavaScript files & StyleBundle used for CSS files bundle.
Note: Make sure the application should have the Microsoft ASP.NET Web Optimization Framework. To install the package from nuget, go to "Tools" --> "Library Package Manager" --> "Package Manager Console".
Install the package from nuget: Install-Package Microsoft.AspNet.Web.Optimization
Class below:
using System.Web.Optimization;
public class BundleConfig
{
public static void RegisterBundles(BundleCollection
bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.6.2.js",
"~/Scripts/common.js",
"~/Scripts/modernizr-1.7.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui*"));
bundles.Add(new
ScriptBundle("~/bundles/validation").Include(
"~/Scripts/jquery.validate_min.js",
"~/Scripts/jquery.validate.unobtrusive.min.js"));
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"));
}
}
Register the Bundles
Now the
created templates of bundle registration need to register in the “Application_Start” method in Global.asax file in the following way.
protected void
Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
Reference the Bundles
Add the bundles in the following code:
For
JavaScript bundle: @Scripts.Render("~/bundles/jquery")
For CSS bundle: @Styles.Render("~/Content/themes/base/css",
"~/Content/css")
Controlling Bundling and Minification
Bundling and minification is enabled or
disabled by setting the value of the debug attribute in the compilation
Element in the Web.config file,
debug is set to true so bundling and minification is disabled.
<compilation debug="true" targetFramework="4.0" />
To enable bundling and minification, set the
debug value to "false".
<compilation debug="false" targetFramework="4.0" />
We
can override the Web.config setting with the
“EnableOptimizations” property on the BundleTable class.
BundleTable.EnableOptimizations = true;
Note: Unless EnableOptimizations
is true or the debug attribute in the compilation Element in the Web.config file is set to false, files
will not be bundled or minified. Additionally, the .min version of files will
not be used, the full debug versions will be selected.EnableOptimizations
overrides the debug attribute in the compilation Element in the Web.config file
After bundle
we get the following “CSS” and “JavaScript” bundle.
Conclusion
With .NET 4.5, it is easier to implement
Bundling and Minification with very less effort and without major changes.
No comments:
Post a Comment