1

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.

user6099216
  • 95
  • 1
  • 1
  • 8
  • 1
    `I believe this is caused because the "~/bundles/Page1" starts execution before "~/bundles/SiteLevelScripts" finishes.` This is not possible as the scripts are loaded synchronously as you have not used the `async` attribute. It's more likely that minification has caused some issues. Try ensuring that you place a `;` as the first character in every JS file to be bundled/minified so that it explicitly ends the last command in the previous script file. – Rory McCrossan Sep 07 '17 at 07:06
  • https://stackoverflow.com/a/11981271/26259 – harley.333 Sep 07 '17 at 07:10
  • Also note that you can just use `@Scripts.Render("bundle/name/here.js")` – Rory McCrossan Sep 07 '17 at 07:12
  • There's no guarantee that the scripts loading in desired order (JS are loaded synchronously). Even jQuery requires a check with `$(document).ready()` to check its availability on view, so you need to use similar check & run if the required script instance is available. – Tetsuya Yamamoto Sep 07 '17 at 07:17
  • @Tetsuya Yamamoto Within the bundles I force them to load in the desired order. Moreover, all worked well before adding the 'defer' to the bundles – user6099216 Sep 07 '17 at 07:22
  • @Rory McCrossan, I can do this. But if this was indeed the problem wouldn't it occur also without the defer? – user6099216 Sep 07 '17 at 07:27
  • @TetsuyaYamamoto The document.ready handler has nothing to do with the loading of JS files - it's to ensure the DOM has finished loading – Rory McCrossan Sep 07 '17 at 07:46
  • 2
    @user6099216 If it worked before adding `defer`, I'd just remove it. It will offer very little benefit anyway - especially after the first load when the JS files have been cached. – Rory McCrossan Sep 07 '17 at 07:47
  • @Rory McCrossan - I can do this (actually this is the way the site works in production) but I want to optimize for speed and ranking. Google's page speed insights tool specifically suggests to defer these bundles. If I will not find a solution, omitting the defer is my fallback. – user6099216 Sep 07 '17 at 07:53

0 Answers0