如何在不暫停 UI 的情況下在 NodeJS 中讀取大文件（Excel）

Question

我目前正在使用ExcelJS將大型 Excel 文件（10,000 多行）讀取到NodeJS /Angular/Electron 應用程序中。 它可以很好地讀取較小的文件，但讀取較大的文件需要 3.9 到 5 秒的時間，並且在此期間，CSS 根本不會更新。

我目前正在使用 async/await 加載文件，因為我認為這將允許在等待文件加載時發生其他操作，因為我認為 Node 中的 I/O 操作有自己的線程。 我還讀到 CPU 密集型任務會阻塞所有其他 Node 進程。

這是當前加載工作簿的代碼：

async openWorkbook(filename: string) {
    this.loading = true;
    const workbook = new Workbook();
    const promise = workbook.xlsx.readFile(this.path + '/sheets/' + filename)
      .then(() => {
        // use workbook
        workbook.getWorksheet(1).name = workbook.getWorksheet(1).name.slice(0, 31);
        const excelFile: ExcelFile = { workbook: workbook, filename: filename };
        this.wbSource.next(excelFile);
      });

    const read = await promise;
  }

此代碼與回調實現的工作方式相同，它們都阻止應用程序的 CSS。 我將如何在不阻塞 UI 的情況下讀取文件（或執行任何 CPU 密集型任務）？

Answer 1

在這種情況下，我要做的第一件事是通過根本不“打開”大文件來防止內存開銷。

所以這樣的事情應該有效：

const stream = fs.createReadStream(filePath);
const workbook = new Excel.Workbook();
stream.pipe(workbook.xlsx.createInputStream());

並且由於這些塊會在短時間內阻塞循環，因此您甚至可以在 javascript 事件循環中使用它；)

Answer 2

JavaScript 是一種單線程語言。 如果您的一項任務需要很長時間才能完成，則渲染等其他任務將被阻止。 我無法為您編寫完整的代碼，但 Web Worker 似乎是您想要做的事情的完美解決方案。 （哪些人已經在評論中提出了建議）

你可以參考：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

此外，還可以查看https://github.com/GoogleChromeLabs/comlink ，它是 Web Worker API 的包裝器。 這將使您更輕松地將現有代碼遷移到工作人員，而不會那么麻煩。

Answer 3

我將使用評論中的Thread函數將我的解決方案留在這里。

 async openWorkbook(filename: string) { this.loading = true; var path = this.path + '/sheets/' + filename; const excelFile = await Thread(path, function(path, exit) { // You'll need to import excel again since it's a new thread import Excel from 'exceljs'; const workbook = new Excel.Workbook(); workbook.xlsx.readFile(path).then(() => { workbook.getWorksheet(1).name = workbook.getWorksheet(1).name.slice(0, 31); const excelFile: ExcelFile = { workbook: workbook, filename: filename }; exit(excelFile); }); }); this.wbSource.next(excelFile); }