Why jquery loads second even it is defined at the first place in mvc bundle config file?

Question

As the question says all about it, I included the jquery file in the first place in my bundle config in a asp.net mvc application as below:

bundles.Add(new ScriptBundle("~/bundles/ozhay").Include(
                        "~/Scripts/jquery.min.js",
                        "~/Scripts/jquery-migrate.min.js",
                        "~/Scripts/jquery.slimscroll.min.js",
                        "~/Scripts/jquery.fancybox.pack.js",
                        "~/Scripts/jquery.owl.carousel.min.js",
                        "~/Scripts/jquery.zoom.min.js",
                        "~/Scripts/bootstrap.min.js",
                        "~/Scripts/back-to-top.js",
                        "~/Scripts/bootstrap.touchspin.js",
                        "~/Scripts/layout.js",
                        "~/Scripts/bs-carousel.js"
                ));

But when i view the source code on firefox or IE i see the jquery in the second position loaded, the picture below shows the detail:

Here is how i rendered the script bundle in my layout page after the RenderBody() :

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

Note: I have two different versions of jquery in my application, V1.10.2 and V1.11.2. The version 1.10.2 is installed by MVC template and the second version 1.11.2 I added it to the scripts because i am using it for pre made template (design).

Thanks!

score 0 · Answer 1 · edited May 23 '17 at 12:32

Your problem has nothing to do with bundles. Bundle config is just for minification,optimization your scripts and styles. This issue is caused by the browser because Your script isn’t seen until it downloads all your HTML, CSS, images and other content.

For quick workaround You should try some naming convention for script files such as:

      "~/Scripts/jquery.min1.js",
      "~/Scripts/jquery-migrate.min2.js",
      "~/Scripts/jquery.slimscroll.min3.js"

or (works better,but it's confusing )

      "~/Scripts/1.js",
      "~/Scripts/2.js",
      "~/Scripts/3.js"

For more complex way to force loading order of Your scripts files You should load it with Javascript, but the disadvantage of this solution is the fact that Scripts will launch slower, because all Your files must be loaded by JS first. For more check this thread load and execute order of scripts

Why jquery loads second even it is defined at the first place in mvc bundle config file?

1 Answers1