Bundling and minification in ASP.NET MVC

Bundling and minification an important part of your deployment process. It ensures all JavaScript files are bundled into 1 single file so only 1 HTTP request is required to download all your JS. It also minifies all JS files so they are significantly reduced in size. It does this by removing all comments, whitespace, renaming variables to single letters and rearranging some syntax and functions into to far smaller and far less human readable code.

This improves performance and will speed up your pages as there is less data for client browsers to download.

However, minification can causes problems with your development unless you separate it out correctly. The last thing you want is to be debugging minified JavaScript.

In this tutorial, I’ll be showing you how to best introduce bundling and minification into your ASP.NET MVC Web Application.

First thing you need to do is download the following extension by Mads Kristensen Called "Bundler & Minifier" you can view it here

Once installed you can start adding which JS files you want it to minify and update on each save. This works by adding a .json file into your solution called bundleconfig.json. Initially you need to add your JS files manually by highlighting your file in solution explorer and using the shortcut "Shift + Alt + F" This will add a new entry into your bundleconfig.json file and create a new min.js file of the same name. Unfortunalty there is now way at time of writing to select multiple JS files and add all at once, annoying I know, especially if you have a lot of files.

Once you have added all your files into your bundleconfig.json you can open the Task Runner Explorer window in Visual Studio and manage your minification from here. This allows you to clear all .min.js files and update them all in one hit. There is a command window to the right that gives you an insight into any errors or files that cannot be minified.

So you now have .min.js files for all your JavaScript. Now you need to set it up so only your .min.js files are called on your production server and not your dev/local environment. This is so you can debug and develop your JS without it automatically referencing the minified versions.
To set this up we need to create a new AppSetting in Web.Config. This is an environment setting which has a value of "DEV" or "LIVE" for your development and live environments.

 

    <!--App settings-->
    <add key="Environment" value="DEV" />

 

We can use this setting in the BundleConfig.cs, RegisterBundles method. All we are doing is setting up an IF statement to test the Environment. If its live all the bundle JS files are .min.js. If its Dev then we are referencing the non-minified versions. See the code below...

 

    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            if (ConfigurationManager.AppSettings["Environment"] == "LIVE")
            {
                bundles.Add(new ScriptBundle("~/bundles/appscripts").Include(
                    "~/Scripts/AppScripts/ArticleScript.min.js",
                    "~/Scripts/AppScripts/IBScript.min.js",
                    "~/Scripts/AppScripts/LoginScript.min.js",
                    "~/Scripts/AppScripts/SearchScript.min.js",
                    "~/Scripts/AppScripts/SignUp.min.js",
                    "~/Scripts/AppScripts/UserProfile.min.js"
                    ));
            }
            else
            {
                bundles.Add(new ScriptBundle("~/bundles/appscripts").Include(
                    "~/Scripts/AppScripts/ArticleScript.js",
                    "~/Scripts/AppScripts/IBScript.js",
                    "~/Scripts/AppScripts/LoginScript.js",
                    "~/Scripts/AppScripts/SearchScript.js",
                    "~/Scripts/AppScripts/SignUp.js",
                    "~/Scripts/AppScripts/UserProfile.js"
                    ));
            }

 

So now we have set up bundling and minification. Awesome! Final thing we need to so is reference the bundle URL references. It most apps, you can simple add this to your layout page, which is the case for IntermittentBug.

 

@Scripts.Render("~/bundles/appscripts")

 

To test it, simply open your browser and F12 to the dev tools. If you invert the if statement in register Bundles to be != "Live" you can see your app referencing all your minified JS files. This will also show how much data is being downloaded. For IntermittentBug at time of writing, it got it down from 488kb down to just 81kb an 83% decrease.

 

 Above - shows that all JS files are non minified. this is with != "LIVE" set in BundleConfig.cs

 Above - shows that all JS files are minified.


JGilmartin Profile Image

JGilmartin

Technical Architect at Pinewood Technologies

Rating: 2890

C# Expert

Offline


Tutorial Statistics
  • Views: 802
  • Comments: 0
  • Author: JGilmartin (2890)
  • Date: 22/1/2017 19:59
Tags
C# .NET ASP.NET MVC JavaScript Visual Sudio

© 2016 - 2018 - IntermittentBug