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

Question

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

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

是否可以使用 webpack 来做到这一点？如何？

谢谢!

Answer 1

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

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

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

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

在 jQuery.ajax() 调用中，我们可以设置一个进度函数。

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

$.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');
});

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