Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bundling with MVC4 not working after I publish to azure

Hi I am trying to bundle my scripts for my application. My debug is working and if I publish with the Web.debug every thing works fine. But when I publish with the Web.releas my scripts don't load. Everything works locally it only stops when I publish to Azure from VS2012. Here is how I create my bundles.

namespace BAT.App_Start
{
  public class BundleConfig
  {
    public static void RegisterBundles(BundleCollection bundles)
    {
        //BundleTable.EnableOptimizations = true;

        bundles.Add(new ScriptBundle("~/Content/MasterCss")
                .Include("~/Content/bootstrap.css")
                .Include("~/Content/bootstrap-responsive.css")
                .Include("~/Content/CSS/site.css"));

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

        bundles.Add(new ScriptBundle("~/Scripts/Validation")
                .Include("~/Scripts/jquery.validate.js")
                .Include("~/Scripts/jquery.validate.unobtrusive.js"));
        }
    }
}

The un-commented line breaks the debug build

This is my layout where I call the bundles

@using System.Web.Optimization
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title Business Analysis Tool </title>

    @Styles.Render("~/Content/MasterCss")
</head>

<body>
    <div class="container-fluid">
        <div class="row-fluid"> @RenderPage("~/Views/Shared/_Header.cshtml") </div>
        <div class="row-fluid"> @RenderBody() </div>
        <div class="row-fluid"> @RenderPage("~/Views/Shared/_Footer.cshtml") </div>
    </div>
    @Scripts.Render("~/Scripts/MasterScripts")    
    @RenderSection("scriptholder", false)
</body>
</html>

This is my Release.Config

<?xml version="1.0"?>
    <configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform"> 
    <system.web>
        <compilation xdt:Transform="RemoveAttributes(debug)" />
    </system.web>
    </configuration>

Here is a link to the error when I check the bundled script with CTRL+U on the page http://bat.azurewebsites.net/Content/MasterCss?v=htASNz4hgFFA40tt0CVZdpwQudN8ZW4429UjRQZQJms1

It seems to be something to do with minification. I've followed some tutorials and have read other posts here but their solutions arn't working for me

like image 388
Jeff Finn Avatar asked Jun 03 '13 13:06

Jeff Finn


People also ask

What must be done to enable 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. In the following XML, debug is set to true so bundling and minification is disabled. To enable bundling and minification, set the debug value to "false".

How do I bundle a script in .NET core?

In ASP.NET MVC Core the BundleConfig class -- where, in ASP.NET MVC, you used code to create script bundles in ASP.NET MVC -- is gone. Instead, you use a configuration file called bundleconfig. json to name your bundles and assign files to them.

How does bundling use browser cache capability?

Busting Browser's Cache by Bundling Thus, when a Web page requests a resource, it checks in cache first. If the resource is found in cache, use cached copy rather than retrieving the resources from the Server. Hence, whenever you change the content of CSS and JS, files will not reflect on the Browser.

How does bundling work in MVC?

Bundling and Minification are two performance improvement techniques that improves the request load time of the application. Most of the current major browsers limit the number of simultaneous connections per hostname to six. It means that at a time, all the additional requests will be queued by the browser.


1 Answers

In my case of missing stylesheets, the problem was not due to the vagaries of publication to Azure, failures during minification or conflicting virtual and real paths.

It was due to the different behaviours of BundleCollection.Add(Bundle) between Debug and Release.

If you manage to do the following (for example, because you're using Durandal from NuGet and have multiple BundleConfig's initialized by WebActivator, and you didn't really write any of them yourself)

bundles.Add(new StyleBundle("/foo").Include("/a.css")); 
bundles.Add(new StyleBundle("/foo").Include("/b.css"));

Basically, if the bundles don't minify, this works: you get elements in your Razor page for both /foo/a.css and /foo/b.css.

But if minification is engaged, then b.css doesn't make it into the resulting minified resource. (or is a.css replaced ... I wasn't paying attention ... just trying to get it to work).

You can work around this by understanding the order of loading and using:

bundles.Add(new StyleBundle("/foo").Include("/a.css")); 
bundles.Add(bundles.GetBundleFor("/foo").Include("/b.css"));

... or by using a different named path (if that's really your intention), or refining your strategy to bundling initialization (which may potentially break NuGet updates).

If only the stupid 'documentation' for System.Web.Optimization classes actually bothered to specify the behaviour of adding multiple bundles with the same virtual path, we need not be having this discussion.

like image 148
David Bullock Avatar answered Oct 14 '22 18:10

David Bullock