zip.js seekEOCDR running slow on chrome

[udaymandava]

i have scenario where I am uploading 2.7 GB file Chrome & Edge browser take around 10 mins to read the contents of the file where as on FF it is taking around 2 mins. This happens for most of the users.. any specific things to check for these users?

[gildas-lormeau]

Besides the fact that the file weighs 2.7 GB, is there anything else specific about this scenario? How many entries does the zip file contain?

[nagarjunag123]

I have tried the demo for large file (2.7 GB) in Chrome. It took around 8 min and the browser got hanged at this time. version 2.x of zip.js is being used in this demo.It looks like the issue is still exists for large files even with version 2.x of zip.js.

[gildas-lormeau]

@nagarjunag123 I'm sorry but I cannot reproduce the issue on my end. It never takes minutes to display zip entries in the demo on my 2 machines.

[abhisheks12]

@gildas-lormeau we tried to take the latest zip.js file and tested the file, from localhost its working fast but after deploying it to server its taking ~5 mins, we have seen the network traffic and memory allocation, there is not much difference in there, could you please suggest

[gildas-lormeau]

@abhisheks12 Make sure the HTTP server supports range requests, see https://developer.mozilla.org/docs/Web/HTTP/Range_requests for more information.

[gildas-lormeau]

You can also set the option forceRangeRequests to true to force zip.js to use range requests when creating HttpReader or HttpRangeReader objects.

[gildas-lormeau]

When I run the code below on my machine in Chrome, I see that zipReader#getEntries which calls the function seekSignature takes less than 30ms, cf. the "Result" value in the page. The generated zip file weights ~ 3 GB and has 2,000 files.

https://jsfiddle.net/cj3szr7e/

/* eslint-disable no-console */
/* global zip, document, Blob, setTimeout, Intl, URL, alert, console */

"use strict";

document.body.innerHTML = "Creating zip file..." + "<br>";
test().catch(error => console.error(error));

async function test() {
  const blobWriter = new zip.BlobWriter("application/zip");
  const zipWriter = new zip.ZipWriter(blobWriter);
  const promises = [];
  const max = 2000;
  const data = new Uint8Array(1500 * 1024);
  for (let indexBlob = 0; indexBlob < max; indexBlob++) {
    const reader = new zip.Uint8ArrayReader(data);
    const promiseAdd = zipWriter.add("test_" + indexBlob, reader, { level: 0 });
    promises.push(promiseAdd);
  }
  await Promise.all(promises);
  await zipWriter.close();
  const blob = blobWriter.getData();
  const zipReader = new zip.ZipReader(new zip.BlobReader(blob));
  document.body.innerHTML += "File size: " + new Intl.NumberFormat().format(blob.size) + " bytes<br>";
  document.body.innerHTML += "Download zip file".link(URL.createObjectURL(blob)) + "<br>";  
  alert("Click OK to launch the test");
  document.body.innerHTML += "Read entries..<br>";
  const startTime = Date.now();
  const entries = await zipReader.getEntries();
  document.body.innerHTML += "Result: " + (Date.now() - startTime) + "ms<br>";
  document.body.innerHTML += "Number of files: " + new Intl.NumberFormat().format(entries.length) + "<br>";  
  await zipReader.close();
}