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

Question

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

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

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

谢谢！

Answer 1

由于下载 JS和追加的来源，DOM可能会非常痛苦，您通常会使用{{1 }}。但是您无法在该通话中设置进度功能。

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

  

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

jQuery.getScript(url [, success ])

在$.ajax({ url: url, dataType: "script", success: success }); 来电时，我们可以设置进度功能。

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

＆＃13;

＆＃13;

jQuery.ajax()

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我试图解决同样的问题，最终编写了引导加载程序和 webpack 插件。 webpack 插件收集有关 js、css 及其大小的元数据，并将这些元数据注入 index.html。引导加载程序加载资产并使用注入的元数据计算当前进度。

查看demo app的源代码。 这是我的article。

它的样子：