The question is concerning webpack. After packing almost everything into a single bundle.js which is loaded in index.html, the bundle.js file is about 2M and requires several seconds to load.

I'd like to display a progress bar indicating loading progress while hiding all the content. Only enable user interaction and show the content after loading is done, exactly the one that Gmail is using.

Is it possible to use webpack to do that? How?

Thanks!

The question is concerning webpack. After packing almost everything into a single bundle.js which is loaded in index.html, the bundle.js file is about 2M and requires several seconds to load.

I'd like to display a progress bar indicating loading progress while hiding all the content. Only enable user interaction and show the content after loading is done, exactly the one that Gmail is using.

Is it possible to use webpack to do that? How?

Thanks!

• javascript
• webpack

• it could be possible to do, but I don't think it's possible if bundle.js is loaded in a <script> tag ... I mean, the page can be "hidden" until bundle.js is loaded that way, but progress bar is not possible – Jaromanda X Commented Feb 4, 2016 at 8:39
• 1 Possible duplicate of How can I get the progress of a downloading <script>? – Jaromanda X Commented Feb 4, 2016 at 8:41
• Since downloading and appending a JS file while assessing progress is not really trivial, I don't think this is duplicate, see the answer below. – Viktor Tabori Commented May 6, 2017 at 21:05

2 Answers 2

Since downloading the source of a JS and appending it to the DOM could be quite painful, you normally would use jQuery.getScript(url [, success ]). But you can't set a progress function on that call.

Lucky for us: https://api.jquery./jquery.getscript/

This is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

And on an jQuery.ajax() call we can set a progress function.

We can calculate the progress percentage if the server includes the response size in http headers. Otherwise we can only use the total received bytes at each progress event call.

$.ajax({
  url: 'https://cdnjs.cloudflare./ajax/libs/angular.js/1.6.1/angular.js', // unminified angular is 1.2mb, perfect for demonstration :)
  dateType: 'script',
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Download progress
    xhr.addEventListener("progress", function(evt){
      // do something with progress info
      if (evt.lengthComputable) {
        // we can calculate the percentage
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      } else if (evt.loaded)
        // we only know the received amount and not the total amount
      	console.log('downloaded:',evt.loaded);
    }, false);
    return xhr;
  }
}).done(function( data, textStatus, jqXHR ) {
  console.log('finished');
}).fail(function( jqXHR, settings, exception ) {
  console.log('could not load');
});

<script src="https://code.jquery./jquery-1.12.4.min.js"></script>

I tried to solve the same problem and ended up writing bootloader and webpack plugin. The webpack plugin collects metadata about js, css and its sizes, inject this metadata into index.html. Bootloader loads assets and calculate current progress using the injected metadata.

Check out the source code of demo app. Here is my article about this.

What it looks like: