Execution order of script bundles

Question

While optimizing site speed by deferring scripts I came across the issue of sequencing the order of bundles (NOT the order of scripts within a bundle).

I am reading threads for the last several hours without luck.

All worked well before adding the defer to bundles, so this is the only cause for my problems.

In my Layout page I have:

@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/SiteLevelScripts")

@RenderSection("scripts", required: false)

In the specific pages I render the scripts in the scripts section:

@section scripts
{
     @Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/Page1")
}

All worked fine until I have added the defer for the two bundles.

The problem now is that I have an uncaught error:

Uncaught TypeError: Cannot read property 'Init' of undefined
at HTMLDocument.<anonymous> (one-of-page1.js:2)
at fire (jquery-1.12.4.js:3233)
at Object.add [as done] (jquery-1.12.4.js:3292)
at jQuery.fn.init.jQuery.fn.ready (jquery-1.12.4.js:3543)
at layout-page.js:1

I believe this is caused because the "~/bundles/Page1" starts execution before "~/bundles/SiteLevelScripts" finishes.

And in such case my question is:

How to force "~/bundles/Page1" to execute only after the first site level bundle completes its execution ?

**EDIT -> **The following sentence is not accurate:

I believe this is caused because the "~/bundles/Page1" starts execution before "~/bundles/SiteLevelScripts" finishes.

since the problem happens without async for the bundles. (thank you @ Rory McCrossan)

So my question is: How to solve this problem since without the defer for the bundles all works well.