MVC5 bundles does not work for some resources

Question

This is very curious. I have these bundles in BundleConfig.cs:

           bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/font-awesome.css",
                      "~/Content/nprogress.css",
                      "~/Content/iCheck/flat/green.css",
                      "~/Content/daterangepicker.css",
                      "~/Content/bootstrap-dialog.css",
                      "~/Content/Tooltipster/css/tooltipster.css",
                      "~/Content/custom.css"));

            bundles.Add(new ScriptBundle("~/bundles/gentelella").Include(
                        "~/Scripts/fastclick.js",
                        "~/Scripts/nprogress.js",
                        "~/Scripts/jquery.icheck.js",
                        "~/Scripts/date.js",
                        "~/Scripts/moment-with-locales.js",
                        "~/Scripts/daterangepicker.js",
                        "~/Scripts/validator/validator.js",
                        "~/Scripts/bootstrap-dialog.js",
                        "~/Scripts/jquery.tooltipster.js",
                        "~/Scripts/custom.js"));

See that I have CSS bundles and script bundles. See specially the last one in both bundles, custom.css and custom.js.

The curious thing is that from all files, only custom.css and custom.js are not rendered when publishing the site. When I debug, all works correctly. The problem happens only at the production site.

Both custom.css and custom.js are not minimized. You can see custom css here and custom.js here.

When rendered, All CSS are loaded with this URL: http://demo.relojelectronico.cl/Content/css?v=l7FFCONJaEcRHBZMIAQIwzM3XkNczNlgWBYwjHtrumM1

And all JS are rendered with: http://demo.relojelectronico.cl/bundles/gentelella?v=vBQcZjDbD_j0oRIktzJoqND9pbeEqe-jNtQFHZ9YfMM1

Any help will be appreciated.

EDIT:

I have noticed that the CSS file is correctly rendered. The problem is only custom.js.

To test it, I have bundled it separated, this way:

        bundles.Add(new ScriptBundle("~/bundles/custom").Include(
                "~/Scripts/custom.js"
            ));

That way, you can see the bundled version here.

the curious thing, is that the original JS starts with the following:

/**
 * Resize function without multiple trigger
 * 
 * Usage:
 * $(window).smartresize(function(){  
 *     // code here
 * });
 */
(function ($, sr) {
    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function (func, threshold, execAsap) {
        var timeout;

        return function debounced() {
            var obj = this, args = arguments;
            function delayed() {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            }

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    };

    // smartresize 
    jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery, 'smartresize');
/**
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
    $BODY = $('body'),
    $MENU_TOGGLE = $('#menu_toggle'),
    $SIDEBAR_MENU = $('#sidebar-menu'),
    $SIDEBAR_FOOTER = $('.sidebar-footer'),
    $LEFT_COL = $('.left_col'),
    $RIGHT_COL = $('.right_col'),
    $NAV_MENU = $('.nav_menu'),
    $FOOTER = $('footer');



// Sidebar
function init_sidebar() {
    // TODO: This is some kind of easy fix, maybe we can improve this
    var setContentHeight = function () {
        // reset height
        $RIGHT_COL.css('min-height', $(window).height());

        var bodyHeight = $BODY.outerHeight(),
            footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
            leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
            contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

        // normalize content
        contentHeight -= $NAV_MENU.height() + footerHeight;

        $RIGHT_COL.css('min-height', contentHeight);
        $RIGHT_COL.css('height', contentHeight);
    };

(I have just placed the start of it). As you can note, when the bundled is created, it starts from init_sidebar function. the same happens with a lot of functions inside the JS file. They are removed from the file after bundling.

How can this be possible?

I have tested with BundleTable.EnableOptimizations = false; in BundleConfig and that way, custom.js is rendered as it is. The problem only occurs when optimizing.

jstuardo · Accepted Answer

I answer my question if this helps other people facing this problem.

This is not documented but I have found out what the problem was.

It turned out that in both folders (Content and Script) minified versions of custom.css and custom.js existed (with the name of custom.min.css and custom.min.js, respectively). Those minified versions were not the corresponding minified versions of custom.css and custom.js, but they were the original ones.

So, I have used an online minifier (for CSS and for JS) and replaced the min versions of the site, and it worked.

This is the conclusion. When optimization is enabled in ASP.NET MVC, optimizer first look for the equivalent ".min." file if it exists in the folder. If it does, that file is sent to the browser. If it doesn't, it performs minification.

That may be also the reason why if the ".min." version of the file is added in the bundling, it does not work and the file is not sent at all.

Perhaps all of this is documented somewhere but I have not found it.

Cheers,

Jaime

MVC5 bundles does not work for some resources

Answers (2)

Related Questions