Added Bundling and Minification... When I look at the source, it still looks like it's not bundlnig and minifying

Question

I added bundling to my MVC 3 app. I downloaded the nugetpackage for Microsoft.Web.Optiminization.1.1.3 I added this to my Globals.asax

public static void RegisterBundles(BundleCollection bundles)
    {

        BundleTable.EnableOptimizations = true;
        //CSS  
        var styles = new StyleBundle("~/Bundling/bundledcss").Include(
                                                                         "~/Content/site.css",
                                                                         "~/Content/ASPNetSpellInclude/themes/bright/*.css",
                                                                         "~/Content/ASPNetSpellInclude/themes/buttons/*.css",
                                                                         "~/Content/ASPNetSpellInclude/themes/classic/*.css",
                                                                         "~/Assets/CSS/*.css",
                                                                         "~/Assets/CSS/blue/*.css",
                                                                         "~/Assets/CSS/cupertino/*.css",
                                                                         "~/Assets/JQGrid/css/cupertino/*.css"
                                                                     );
        INetLog log = ObjectFactory.GetInstance<INetLog>();
        log.Debug("done mini and budle css");
        //JS  
        var js = new ScriptBundle("~/Bundling/bundledjs").Include(
                                                                    "~/Scripts/*.js",
                                                                    "~/Content/*.js",
                                                                    "~/Content/ASPNetSpellInclude/*.js",
                                                                    "~/Content/ASPNetSpellInclude/core/*.js",
                                                                    "~/Content/ASPNetSpellInclude/debugging-test-scripts/*.js",
                                                                    "~/Content/ASPNetSpellInclude/translations/*.js",
                                                                    "~/Content/ASPNetSpellInclude/*.js",
                                                                    "~/Assets/JavaScript/*.js",
                                                                    "~/Assets/JavaScript/i18n/*.js",
                                                                    "~/Assets/JQGrid/js/*.js",
                                                                    "~/Assets/JQGrid/js/i18n/*.js"
                                                                 );

        log.Debug("done minify and bundle script");
        bundles.Add(styles);
        bundles.Add(js);
        BundleTable.EnableOptimizations = true;
        log.Debug("done generating bundles");
    }

Which is called from Application_Start

protected void Application_Start
{
     <snip>                
     RegisterBundles(BundleTable.Bundles);
}

On my root layout page I have these

        <link rel="stylesheet" type="text/css" href="@Styles.Url("~/Assets/CSS/Jcdc.css")" />
<script type="text/javascript" src="@Scripts.Url( "~/Assets/JavaScript/jquery-1.4.2.min.js")"></script>

and my web.config has debug = false

<compilation debug="false" targetFramework="4.0">

but when I run and view source on the page... I still see this.

<link rel="stylesheet" type="text/css" href="/CIS3G/Assets/CSS/Jcdc.css" />
  ...
 <script type="text/javascript" src="/CIS3G/Assets/JavaScript/jquery-1.4.2.min.js"></script>

That means that minification and bundling is not working, right?

This article

http://www.dotnet-tricks.com/Tutorial/mvc/c72b040113-Asp.net-MVC-4-performance-optimization-with-bundling-and-minification.html

Shows that I should expect

enter image description here

So it's aparently not working...

Anybody see what I've missed, everything I've read tells me it should be working?

You missed part of that article: `@Styles.Render("~/bundling/bundledcss")` for example. — wgraham, Mar 25 '15 at 18:34

score 2 · Accepted Answer · answered Mar 25 '15 at 18:47

2

The code in your root layout seems to be wrong. You are still adding a reference to your js and css directly.

You need to add these two lines in the head tag of your root layout file.

<head>
    @Scripts.Render("~/Bundling/bundledjs")
    @Styles.Render("~/Bundling/bundledcss")
</head>

answered Mar 25 '15 at 18:47

Praveen Paulose

5,741
1
15
19

I need to be able to add them in different orders in different layout pages (i know, not my decision) so i have to add them one at a time, not all at once... The code in the layout is suppsoed to do that. I may wind up makign seperate bundles for each one and do it that way, but I'm trying to avoid it. see the descdription of the Scripts.Url method https://msdn.microsoft.com/en-us/library/system.web.optimization.scripts.url(v=vs.110).aspx – Eric Brown - Cal Mar 25 '15 at 19:06
1

If you need the functionality of the bundles, which is the version-stamped URL, you need to split the bundles as per your need. And as mentioned in the description, if you are directly pointing to the Url, it will not return a version stamp on the Url. The exact reason, why you cannot see a version stamp in yours. You are not pointing to the the virtual bundle path. – Praveen Paulose Mar 25 '15 at 19:18
I see, I misunderstood it when i read it the first time. Can i add more than one bundle to a layout? @Scripts.Render("~/Bundling/bundledjs") and @Scripts.Render("~/Bundling/othersmallerbundledjs") ? – Eric Brown - Cal Mar 25 '15 at 19:40
1

Yes you can. You can even add it in different sections like the head and the body of the page to control its load sequence. – Praveen Paulose Mar 25 '15 at 19:48
I'm getting confusing asnwers reading about ordering.. one place said that if you add them via wild card they are alpha sorted(with a few bubbled to the top),but if you add them one at time they are in the order you add them (which i'd prefer) other articles say that it's alpha order ever time (once a few common libraries are bubbled to the top) so i'd need a custom IBundleOrderer ..which is true if you add the files to the bundle one at a time in order. – Eric Brown - Cal Mar 25 '15 at 19:58
I was referring to the order in which you put the bundles E.g. In your head tag you could have @Scripts.Render("~/bundles/modernizr") and in the body tag before the closing you could have @Scripts.Render("~/bundles/jquery") followed by @Scripts.Render("~/bundles/knockout"). This will load modernizr, jquery and bootstrap in sequence. – Praveen Paulose Mar 25 '15 at 20:03

score 1 · Answer 2 · edited Mar 25 '15 at 18:41

Did you enable optimization, reference:https://msdn.microsoft.com/en-us/library/system.web.optimization.scripts.render(v=vs.110).aspx

To enable bundling and minification, set the debug value to "false". You can override the Web.config setting with the EnableOptimizations property on the BundleTable class. The following code enables bundling and minification and overrides any setting in the Web.config file.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
             "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
    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.

BundleTable.EnableOptimizations = true; is set at the top and the bottom of the first function above, RegisterBundtles — Eric Brown - Cal, Mar 25 '15 at 19:09

Added Bundling and Minification... When I look at the source, it still looks like it's not bundlnig and minifying

2 Answers2