如何在Electron/Node.js中实现大文件分片处理的平滑连续进度显示？

我完全懂你现在的痛点——用大chunk处理文件时，进度条跳来跳去的，用户体验特别差，但又不想拆更小的chunk来增加不必要的IO开销，对吧？结合你用Electron、Node.js和fs的技术栈，我给你几个实用的方案，既能实现平滑进度，又完全符合你的需求。

首先，先分析下你现有代码的两个小问题：你现在是每个512MB的chunk读取并写入完成后才更新一次进度，自然会出现大跳变；而且用fs.writeFileSync会阻塞Electron的主进程，导致你的App界面卡顿，这个也得顺便优化下。

方案1：实时跟踪读取进度 + 异步写入（推荐，无额外IO开销） #

这个方案的核心是利用Node.js ReadStream的原生属性跟踪实时读取进度，再配合定时器定期更新显示，完全不用改chunk大小，也没有额外的IO开销。

Node.js的fs.ReadStream实例有一个bytesRead属性，它会实时反映已经从文件中读取的字节数——哪怕是在读取一个512MB的大chunk过程中，这个值也会持续增加。我们可以用一个定时器每隔几十毫秒读取这个值，计算当前进度并显示，这样进度就是连续平滑的。

同时，把同步写入改成异步写入，避免阻塞Electron主进程，让App保持流畅。

修改后的代码如下：

const fs = require("fs").promises; // 用promise版的fs，更适合async/await
const fsSync = require("fs"); // 同步fs用于创建读取流和获取文件信息
const path = require("path");

async function splitFile(filePath, chunkSize) {
  return new Promise(async (resolve, reject) => {
    const chunks = [];
    const stats = await fs.stat(filePath);
    const totalSize = stats.size;
    const stream = fsSync.createReadStream(filePath, { highWaterMark: chunkSize });

    let processedSize = 0;
    let chunkIndex = 0;
    let progressInterval = null;

    // 启动进度更新定时器，每隔100ms更新一次
    progressInterval = setInterval(() => {
      // 用stream.bytesRead获取实时读取的字节数，计算当前进度
      const currentReadProgress = Math.min((stream.bytesRead / totalSize) * 100, 100);
      console.log(`Progress: ${currentReadProgress.toFixed(2)}%`);
    }, 100);

    stream.on("data", async (chunk) => {
      stream.pause(); // 暂停读取，避免同时处理多个chunk导致内存占用过高
      try {
        const chunkFilePath = `${filePath}.chunk_${chunkIndex + 1}`;
        await fs.writeFile(chunkFilePath, chunk);
        chunks.push(chunkFilePath);
        processedSize += chunk.length;
        chunkIndex++;
        stream.resume(); // 恢复读取下一个chunk
      } catch (err) {
        stream.destroy(err);
        clearInterval(progressInterval);
        reject(err);
      }
    });

    stream.on("end", () => {
      clearInterval(progressInterval);
      console.log(`Progress: 100.00%`);
      console.log(`File successfully split into ${chunks.length} chunks.`);
      resolve(chunks);
    });

    stream.on("error", (err) => {
      clearInterval(progressInterval);
      reject(err);
    });
  });
}

async function main() {
  const filePath = path.resolve(__dirname, "largeFile.mkv");
  const chunkSize = 512 * 1024 * 1024; // 512MB
  console.log(`Starting to split file: ${filePath}`);
  try {
    const chunks = await splitFile(filePath, chunkSize);
    console.log("Chunks saved to disk:");
    chunks.forEach((chunkFilePath) => console.log(chunkFilePath));
  } catch (error) {
    console.error("Error:", error.message);
  }
}

main();

这个方案的优势：

• 完全不用减小chunk size，没有额外的IO开销
• 进度是真实的读取进度，不是模拟的，平滑且准确
• 异步写入避免阻塞Electron主进程，App界面不会卡顿

方案2：模拟平滑进度（适合不想改动太多现有代码的情况） #

如果你不想改写入逻辑，只想让进度显示更平滑，可以用**“显示进度追赶真实进度”**的思路：维护一个displayProgress变量，它会以小步长逐步逼近真实的actualProgress（也就是你原来代码中每个chunk完成后的进度）。这样视觉上是平滑的增长，完全不影响真实的文件处理逻辑。

修改后的关键代码片段：

const fs = require("fs");
const path = require("path");

async function splitFile(filePath, chunkSize) {
  return new Promise((resolve, reject) => {
    const chunks = [];
    const stream = fs.createReadStream(filePath, { highWaterMark: chunkSize });

    let totalSize = 0;
    let processedSize = 0;
    let actualProgress = 0;
    let displayProgress = 0;
    let progressInterval = null;

    fs.stat(filePath, (err, stats) => {
      if (err) return reject(err);
      totalSize = stats.size;

      // 启动平滑进度定时器
      progressInterval = setInterval(() => {
        if (displayProgress < actualProgress) {
          // 每次增加0.5%，可以根据需要调整步长
          displayProgress = Math.min(displayProgress + 0.5, actualProgress);
          console.log(`Progress: ${displayProgress.toFixed(2)}%`);
        }
        // 进度到100%时清理定时器
        if (actualProgress >= 100) {
          clearInterval(progressInterval);
          console.log(`Progress: 100.00%`);
        }
      }, 100);

      let chunkIndex = 0;

      stream.on("data", (chunk) => {
        const chunkFilePath = `${filePath}.chunk_${chunkIndex + 1}`;
        fs.writeFileSync(chunkFilePath, chunk); // 保留你原来的同步写入
        chunks.push(chunkFilePath);

        processedSize += chunk.length;
        actualProgress = ((processedSize / totalSize) * 100);
        chunkIndex++;
      });

      stream.on("end", () => {
        clearInterval(progressInterval);
        console.log(`File successfully split into ${chunks.length} chunks.`);
        resolve(chunks);
      });

      stream.on("error", (err) => {
        clearInterval(progressInterval);
        reject(err);
      });
    });
  });
}

这个方案的优势：

• 几乎不用改动你原来的文件处理逻辑
• 视觉上进度是平滑连续的，用户体验好
• 没有额外的IO开销，完全符合你的要求

额外的Electron优化建议 #

如果你需要在Electron的渲染进程中显示进度（而不是只在控制台打印），可以用Electron的IPC机制把进度从主进程发送到渲染进程：

1. 在主进程中，把console.log(Progress: ...)改成win.webContents.send('update-file-split-progress', displayProgress)
2. 在渲染进程中，监听这个事件并更新UI：

const { ipcRenderer } = require('electron');
ipcRenderer.on('update-file-split-progress', (event, progress) => {
  // 更新你的进度条UI，比如：
  document.getElementById('progress-bar').style.width = `${progress}%`;
  document.getElementById('progress-text').textContent = `${progress.toFixed(2)}%`;
});

最佳实践总结 #

1. 避免同步IO操作：在Electron主进程中用同步fs方法会阻塞事件循环，导致界面卡顿，尽量用异步版本。
2. 区分真实进度和显示进度：真实进度由业务逻辑跟踪，显示进度可以做平滑处理，兼顾性能和用户体验。
3. 利用Node.js流的原生属性：比如bytesRead，不用自己造轮子跟踪进度，既准确又无开销。

备注：内容来源于stack exchange，提问作者SideJS