While writing my website I have read many blog posts how to do this the best way.

Couple targets I had in mind

• Create bundle that will create smaller file to download
• Almost everyone is using cdn, unless they are living behind firewall
• And if cdn fails, provide file from local source

Key points:

• Bundling is simply getting multiple files under one.
• Minification is making files smaller

In my example I have java script files.

To render the bundle i need script in my page such as

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

How to create a bundle

In your ASP.NET application you will have to find file: BundleConfig.cs

inside you will be able to find default setup, which might not be used in your template. 

     bundles.Add(new ScriptBundle("~/bundles/jquery")
                .Include("~/Scripts/jquery-{version}.js")); 

You might need to enable optimizations with code

 BundleTable.EnableOptimizations = true;

in order to see the efect on your page once run it.

   

Now to CDN

1. A content delivery network (CDN) is a system of distributed servers (network) that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.

Is supposed to offload some of the traffic, but what if I cannot access it?

We can create backup configuration, so I a case that cdn is unreachable we do not get down with our application.

How to achieve it?

First we need to tell bundle configuration that we are going to use cdn

  bundles.UseCdn = true;

And then we need to provide code with cdn first

  bundles.Add(new ScriptBundle("~/bundles/jquery", "https://code.jquery.com/jquery-{version}.min.js")
                .Include("~/Scripts/jquery-{version}.min.js"));

Notice the include after the path to cdn. This defacto says if you cannot get the file from here look to this alternative location

Example of the code is here:

One of many sources:

http://www.asp.net/mvc/overview/performance/bundling-and-minification

www.stackoverflow.com

Using MVC 4 bundles & missing scripts

I have been working on page which is using MVC 4 and I thought that I will use build in feature that come out of box with System.Web.Optimization. Bundles make live easier as we can register our scripts in code and get nice minified file with all in one. There fore there is not so many trips from client to server to get one script one, next script etc.

From design we have to include many scripts such as:

<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/jquery.isotope.min.js"></script>
<script src="/Scripts/jquery.prettyPhoto.js"></script>
<script src="/Scripts/easing.js"></script>
<script src="/Scripts/jquery.lazyload.js"></script>
<script src="/Scripts/jquery.ui.totop.js"></script>
<script src="/Scripts/selectnav.js"></script>
<script src="/Scripts/ender.js"></script>
<script src="/Scripts/responsiveslides.min.js"></script>
<script src="/Scripts/custom.js"></script>

Next conversion is to razor:

    @Scripts.Render("~/Scripts/jquery.min.js")
    @Scripts.Render("~/Scripts/bootstrap.min.js")
    @Scripts.Render("~/Scripts/jquery.isotope.min.js")
    @Scripts.Render("~/Scripts/jquery.prettyPhoto.js")
    @Scripts.Render("~/Scripts/easing.js")
    @Scripts.Render("~/Scripts/jquery.lazyload.js")
    @Scripts.Render("~/Scripts/jquery.ui.totop.js")
    @Scripts.Render("~/Scripts/selectnav.js")
    @Scripts.Render("~/Scripts/ender.js")
    @Scripts.Render("~/Scripts/responsiveslides.min.js")
    @Scripts.Render("~/Scripts/custom.js")

Bundles are different:

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

code in app_start / bundle config

 var scriptBundle = new ScriptBundle("~/bundles/site")
        "~/Scripts/jquery.min.js",
        "~/Scripts/bootstrap.min.js",
        "~/Scripts/jquery.isotope.min.js",
        "~/Scripts/jquery.prettyPhoto.js",
        "~/Scripts/easing.js",
        "~/Scripts/jquery.lazyload.js",
        "~/Scripts/jquery.ui.totop.js",
        "~/Scripts/selectnav.js",
        "~/Scripts/ender.js",
        "~/Scripts/responsiveslides.min.js",
        "~/Scripts/custom.js");
 bundles.Add(scriptBundle);

This will include all files in no specific order. Also will exclude all allready minified files.
And result will look like:

<script src="/Scripts/jquery.prettyPhoto.js"></script>
<script src="/Scripts/easing.js"></script>
<script src="/Scripts/jquery.lazyload.js"></script>
<script src="/Scripts/jquery.ui.totop.js"></script>
<script src="/Scripts/selectnav.js"></script>
<script src="/Scripts/ender.js"></script>
<script src="/Scripts/custom.js"></script>

I my case I do want to include minified files and order of scripts is important to me, as all depend on each other with specific order.

Final solution is:

bundles.IgnoreList.Clear();

Clears ignore list which contain definition for minified scripts.

bundles.FileSetOrderList.Clear();

Clears file set order list, will be displayed as they are registered.

 BundleTable.EnableOptimizations = true;

Force minification of the files registered.

        bundles.FileSetOrderList.Clear();
        bundles.IgnoreList.Clear();
            
            var scriptBundle = new ScriptBundle("~/bundles/site")
                   .Include("~/Scripts/jquery.min.js")
                   .Include("~/Scripts/bootstrap.min.js")
                   .Include("~/Scripts/jquery.isotope.min.js")
                   .Include("~/Scripts/jquery.prettyPhoto.js")
                   .Include("~/Scripts/easing.js")
                   .Include("~/Scripts/jquery.lazyload.js")
                   .Include("~/Scripts/jquery.ui.totop.js")
                   .Include("~/Scripts/selectnav.js")
                   .Include("~/Scripts/ender.js")
                   .Include("~/Scripts/responsiveslides.min.js")
                   .Include("~/Scripts/custom.js");
            bundles.Add(scriptBundle);
            BundleTable.EnableOptimizations = true;