如何在webpack加载单个捆绑的javascript文件时显示进度条？

Question

问题是关于webpack.在将几乎所有内容打包到index.html中加载的单个bundle.js之后,bundle.js文件大约为2M并且需要几秒钟才能加载.

我想显示一个进度条,指示加载进度同时隐藏所有内容.只有在加载完成后才启用用户交互并显示内容,这正是Gmail正在使用的内容.

是否可以使用webpack来做到这一点？怎么样？

谢谢!

Answer 1

由于下载a 的源代码JS并将其附加DOM到 a可能会非常痛苦，因此您通常会使用jQuery.getScript(url [, success ]). 但您无法在该调用上设置进度函数。

我们很幸运： https: //api.jquery.com/jquery.getscript/

这是一个简写的 Ajax 函数，相当于：

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

在jQuery.ajax()调用时我们可以设置进度函数。

如果服务器在 http 标头中包含响应大小，我们就可以计算进度百分比。否则，我们只能使用每次进度事件调用时接收到的总字节数。

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

$.ajax({
  url: 'https://cdnjs.cloudflare.com/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');
});