title: How can JSZip compress large files
body: <p>I'm using JSZip to make download page(file download, show progress bar, compress files) in Electron, and It works fine unless I compress large files...</p>
  
  <p>For small files(less than around 25mb) it starts right after i click a button and shows progress of compress well!</p>
  
  <p>but when I try to compress 100mb, 500mb or more</p>
  
  <p>it starts and showing progress quite late after I click a button</p>
  
  <p>Is this JSZip problem? or Do I need put more code? </p>
  
  <pre><code> var Promise = window.Promise;
        if (!Promise) {
          Promise = JSZip.external.Promise;
        }
    /**
         * Fetch the content and return the associated promise.
         * @param {String} url the url of the content to fetch.
         * @return {Promise} the promise containing the data.
         */
        function urlToPromise(url) {
          return new Promise(function(resolve, reject) {
            JSZipUtils.getBinaryContent(url, function(err, data) {
              if (err) {
                reject(err);
              } else {
                resolve(data);
              }
            });
          });
        }
  
        var $form = $("#download_form").on("submit", function() {
  
          var zip = new JSZip();
  
          // find every checked item
          $(this).find(":checked").each(function() {
            var $this = $(this);
            var url = $this.data("url");
            console.log(url);
            var filename = url.replace(/.*\//g, "");
            console.log(filename);
  
            zip.file(filename, urlToPromise(url), {binary: true, createFolders: true});
          });
  
          // when everything has been downloaded, we can trigger the dl
          // by streamFiles:true
          zip.generateAsync({type: "blob", streamFiles:true}, function updateCallback(metadata) {
             console.log(metadata.percent);
              updateprocess(metadata.percent);
              var msg = "progression : " + metadata.percent.toFixed(2) + " %";
              if (metadata.currentFile) {
                msg += ", current file = " + metadata.currentFile;
              }
              showMessage(msg);
              updatePercent(metadata.percent | 0);
            })
            .then(function callback(blob) {
              // see FileSaver.js
              saveAs(blob, "test.zip");
              showMessage("done !");
            }, function(e) {  showError(e);
            });
  
          return false;
        });
  
      });
    }
    function updateprocess(val){
          $("#progress_bar").removeClass("hide")
             .find(".progress-bar")
             .attr("aria-valuenow", val)
             .css({
                 width : val + "%"
             });
          $("#progress33").attr("value",val)
          var progressBar = document.querySelector("#progress33");
          progressBar.max=100;
          progressBar.value=val.toFixed(2);
        }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div class="progress hide" id="progress_bar"&gt;
        &lt;div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;p class="hide" id="result"&gt;&lt;/p&gt;
  
    &lt;/div&gt;
    &lt;progress id="progress33" value="0" class="progress-bar"&gt;
  
    &lt;/progress&gt;
  </code></pre>