使用JSZip时遇RangeError: Array buffer allocation failed问题求助

开发了一款允许用户按项目ID下载关联图片的应用，每个项目包含多张图片。当前采用JSZip将图片打包后通过浏览器下载，小量图片时运行正常，但当项目包含大量图片时，调用zip.generateAsync会抛出RangeError: Array buffer allocation failed错误，导致应用崩溃，需要解决该问题以确保用户能获取所有图片。

相关代码：

//Iterate through all files found
for (let i = 0; i < filesArr.length; i += 2) {
    zip.file(filesArr[i], filesArr[i + 1], { base64: true });
    await timers.setTimeout(100);
}

console.log('files zipped')
let z = await zip.generateAsync({ type: "nodebuffer" })
//code is not making it past zip.generateAsync() when there are too many results
console.log('zip generated')
filesArr = [];
return res.send(z)

解决方案 #

1. 改用流式输出避免内存过载 #

当前使用nodebuffer类型生成压缩包时，会将整个压缩包加载到内存中，大文件场景下直接触发内存分配失败。改用generateNodeStream流式输出，将压缩数据分段发送给客户端，完全避免内存堆积：

// 替换原有的generateAsync和res.send逻辑
const stream = await zip.generateNodeStream({ type: 'nodebuffer', streamFiles: true });
stream.pipe(res);
stream.on('end', () => {
    filesArr = [];
    console.log('压缩包已流式发送完成');
});

流式处理会逐段生成压缩数据并立即输出到响应，不会在内存中存储完整的压缩包。

2. 优化内存占用与处理效率 #

• 移除不必要的100ms延迟，该延迟会拖慢处理速度且无实际意义
• 在添加图片到压缩包后，及时清空数组中的数据，减少内存占用：

for (let i = 0; i < filesArr.length; i += 2) {
    zip.file(filesArr[i], filesArr[i + 1], { base64: true });
    // 清空数组中已处理的元素，释放内存
    filesArr[i] = null;
    filesArr[i + 1] = null;
}
// 立即清空数组
filesArr = [];

3. 分卷压缩（可选） #

如果流式输出仍无法满足超大文件场景需求，可以将压缩包拆分为多个固定大小的分卷，让用户下载后自行合并解压：

const stream = zip.generateNodeStream({
    type: 'nodebuffer',
    streamFiles: true,
    chunkSize: 1024 * 1024 * 50, // 每个分卷50MB
    compression: 'STORE' // 图片本身已压缩，用STORE模式避免重复压缩浪费CPU
});
// 后续处理流式输出，同时需告知用户分卷数量及解压方式

4. 环境与依赖优化 #

• 升级JSZip到最新版本，新版本对内存管理和流式处理有更多优化
• 确保Node.js版本在14.x以上，新版本的V8引擎内存管理更高效

内容的提问来源于stack exchange，提问作者Omi in a hellcat