2

I have a large javascript from a webpack build being loaded as such: <script src="application.bundle.js"></script>

I want to add a progress bar while the script loads. In chrome dev tools timeline, I can see that most of the load time is spent here: "Evaluate Script", understandably so. Is there any way to get progress or at the very least a done event to know when the script is done evaluating?

I could do something in the application script like window.appLoaded = true and look for that periodically. Is there a way to do this without modifying the application script?

meta-meta
  • 926
  • 5
  • 11

1 Answers1

1

If you want a callback after the file is loaded, I suggest you load it asynchronously with a function call that uses a callback function upon completion.

You could put up a progress spinner before calling the loader function, with the callback taking it down. Something like this:

function myLoadScript( ) {
    showMyProgress();
    loadScript( 'application.bundle.js', hideMyProgress );
}

This page shows a few ways to load scripts asynchronously. A generic loadScript() function is shown there.

Community
  • 1
  • 1
terrymorse
  • 6,771
  • 1
  • 21
  • 27
  • 1
    Assuming he's done his metrics right, it looks like the majority of the time is in evaluating the script, not downloading it; would asynchronicity still take effect during the compile step? – Katana314 Feb 18 '16 at 18:58
  • 1
    Using the loadScript function from that link appears to invoke the callback after the script is evaluated... at least in Chrome. Thank you @terrymorse. – meta-meta Feb 18 '16 at 19:40
  • @meta-meta glad I could help, do you accept my answer? – terrymorse Feb 19 '16 at 17:09