Bundle and minification has scripts out of order

Question

I have my scripts and css in bundles

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

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/initialization").Include(
            "~/Scripts/Custom/Common/CustomEventURLS.js",
            "~/Scripts/Custom/Common/CommonFunctions.js",
            "~/Scripts/Custom/Common/GlobalVariables.js"
            ));

bundles.Add(new ScriptBundle("~/bundles/custom").Include(
    "~/Scripts/Custom/kendoNotification.js",
    "~/Scripts/Custom/Common/CommonControlsJS.js",
    "~/Scripts/Custom/Reporting/Reporting.js",
    "~/Scripts/Custom/Common/Base64ToBinary.js",
    "~/Scripts/Custom/Plugins/Custom_Plugins.js",
    "~/Scripts/2c_Combined_JS.js",
    "~/Scripts/2c_Administration_JS.js",
    "~/Scripts/Custom/Administration/FirstTimeLogin.js"
    ));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
            "~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
          "~/Scripts/bootstrap.min.js",
          "~/Scripts/respond.js"));

//BundleTable.EnableOptimizations = true;

If I have BundleTable.EnableOptimizations = true; commented out then everything loads properly, but once I uncomment it out then I start getting errors about it not finding certain functions. So this leads me to believe that when I enable the optimizations to true, that it throws all my scripts out of order.

In the header of my layout page

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/initialization")

and just before the closing of the body brace is

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

The reason why the custom is at the bottom is because I need the dom to be loaded before those scripts fire.

If I don't use bundling and minification then everytime the app gets published I have to always do a ctrl+f5 and thats not good.

How can I fix this so that my scripts don't get reordered?

You can try this one if you want a strict order of loading of your scripts: https://stackoverflow.com/questions/11979718/how-can-i-specify-an-explicit-scriptbundle-include-order/11981271#11981271 — Willy David Jr, Jun 12 '19 at 15:07

score 1 · Accepted Answer · answered Jun 12 '19 at 14:45

1

In the RegisterBundles function add the following as the first line:

bundles.IgnoreList.Clear();

Also make sure all your min files are valid files (css and js).

answered Jun 12 '19 at 14:45

Rahatur

3,147
3
33
49

Just tried and still getting uncaught reference errors on 3 functions plus a Lexical declaration cannot appear in a single-statement context error – Chris Jun 12 '19 at 14:55
I just fixed the lexical error and with your answer, things are working properly now. No errors – Chris Jun 12 '19 at 15:14
@Chris good to know it resolved the issue. Hope you don't mind up voting! :) – Rahatur Jun 13 '19 at 02:17

score 1 · Answer 2 · answered Jun 12 '19 at 15:11

1

Review and see the the Bundling and Minification - ASP.NET MVC Demystified written by Matthew Jones one of my favorite web developer.

answered Jun 12 '19 at 15:11

Shahzad Khan

432
2
14

Bundle and minification has scripts out of order

2 Answers2