Bundling and Minification Feature in MVC

On this post we will see how to implement CSS and JavaScript files bundling and minification feature in MVC.

1. Add files
First, we need to add the files inside RegisterBundles() method of App_Start\BundleConfig.cs class. Make sure that our web project has installed Microsoft.AspNet.Web.Optimization library. If not then we can use NuGet to install it.

1.1. Adding CSS files
We use StyleBundle class to add the CSS files. First we specify the bundle name and the relative path where it is going to be generated from. Then we add the intended files to it using relative path url.

StyleBundle cssBundle = new StyleBundle("~/Styles/bundledcss");
cssBundle.Include(
 "~/Styles/mystylesheet1.css",
 "~/Styles/mystylesheet2.css",
 . . .
 );
bundles.Add(cssBundle);

1.2. Adding JavaScript files
This time we use ScriptBundle class. The process is similar as adding CSS files above.

ScriptBundle scriptsBundle = new ScriptBundle("~/Scripts/bundlescripts"); 
scriptsBundle.Include(
 "~/Scripts/myscript1.js",
 "~/Scripts/myscript2.js",
 . . .
);
bundles.Add(scriptsBundle);

We can also use -{version} syntax when including a file. For example; ~/Scripts/jquery-{version}.js
When using this, the '.min' version will be used in release mode and normal version will be used in debug mode. The '-vsdoc' version for IntelliSense will be ignored.

In addition, wildcard character '*', can be used as well when including files to include all matching files.


2. If using Debug mode, set BundleTable.EnableOptimizations
If we want to see bundling and minification in action in debugging mode ('compilation debug="true"' is set in web.config file) then we need to set

BundleTable.EnableOptimizations = true;

otherwise each file will be called individually like before.

In my development environment, I set up a release and a debug build configurations with 'compilation debug="true"' in my web.config. In the Build section of the project properties, the debug build configuration has 'Define DEBUG constant' checked. Then I do

#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif

so that I could have the bundling and minification work when I use release build configuration and off when using debug build configuration.

Below are the complete codes from the steps above.

public class BundleConfig
{
 public static void RegisterBundles(BundleCollection bundles)
 {
  StyleBundle cssBundle = new StyleBundle("~/Styles/bundledcss");
  cssBundle.Include(
   "~/Styles/mystylesheet1.css",
   "~/Styles/mystylesheet2.css",
   . . .
   );
  bundles.Add(cssBundle);

  ScriptBundle scriptsBundle = new ScriptBundle("~/Scripts/bundledscripts"); 
  scriptsBundle.Include(
   "~/Scripts/myscript1.js",
   "~/Scripts/myscript2.js",
   . . .
  );
  bundles.Add(scriptsBundle);

  #if !DEBUG
  BundleTable.EnableOptimizations = true;
  #endif
 }
}

3. Include that method in Application_Start() in Global.asax.cs

protected void Application_Start()
{
 . . .
 BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);
 . . .
}

4. Render the bundle on the view
We render the styles bundle with Styles.Render() method and JavaScript files bundle with Scripts.Render() method, passing the same bundle name and path as when it was created.

@Styles.Render("~/Styles/bundledcss")

@Scripts.Render("~/Scripts/bundledscripts")

Files ordering
The optimisation library uses some predefined rules for ordering the files that we include. If we found that our site breaks because of the files were ordered differently from the ones we specify then we need to do a little tweak to override the default ordering. To do this, we need to implement a custom class inherited from IBundleOrderer, then just simply return the files as they are in its OrderFiles() method.

public class AsListedOrderer : IBundleOrderer
{
 public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
 {
  return files;
 }
}

Then set the custom orderer in our bundle. For example:

public class BundleConfig
{
 public static void RegisterBundles(BundleCollection bundles)
 {
  ScriptBundle scriptsBundle = new ScriptBundle("~/Scripts/bundledscripts"); 
  scriptsBundle.Orderer = new AsListedOrderer();
  scriptsBundle.Include(
   . . .
  );
  . . .
 }
}

What about the minification?
When we are using StyleBundle or ScriptBundle type to create a bundle, the minification feature is already included in it. However if there is a syntax error in one of our files then the minification might not be applied and we could see the warning when we open the bundle uri on a browser to see the content.

If for a reason, we do not want to apply minification in our bundle, then we could use Bundle type instead. In fact, StyleBundle and ScriptBundle types inherit from Bundle type.


Bundle versioning
When the library creates a bundle, it will add calculated hash result of the files content as a querystring. For example; "/Scripts/bundledscripts?v=8mW7h5gn2CgW9MkumYwMSzClMgRORVfdSNBsizgxyoU1"
So if we make a change in our files, the generated hash value will be different. This is another good benefit for us so that we do not need to worry about our content being cached by browsers thus the latest changes will always be rendered.