Question

我想区分两个大文本，所以我决定使用diffjs（https://www.npmjs.com/package/diff）。不幸的是，这对于javascript处理来说太繁琐了，导致该页面在15秒钟内变得无用。

我有一个角度应用程序，因此我决定尝试ngx-web-worker（https://www.npmjs.com/package/ngx-web-worker）可能有帮助。最后，我可能不理解Web Worker的这种实现，因为它无法运行。：（

最小示例：

import * as diff from 'diff';
import { WebWorkerService } from 'ngx-web-worker';

@Component({...}) ... {
  constructor(
    private _webWorker: WebWorkerService
  ){}
  ...
  ngOnInit() {
        this._webWorker.run(diff.diffTrimmedLines, this.texts).then((result) => {
          let changes:number = 0;
          result.forEach((part) => {
            if(part.added || part.removed){ changes++; }
          });
          console.log(changes);
        });
  }
}

感谢您的帮助和时间。：）

Answer 1

我将其添加到angular.json中的资产中：

{ "glob": "diff.min.js", "input": "node_modules/diff/dist", "output": "assets/js"}

这样，我将在构建后在我的Assets文件夹中获取脚本。接下来，我更改了代码：

this._webWorker.run((input:any) => { 
   importScripts(`${input.protocol}//${input.host}/path/assets/js/diff.min.js`);
   return Diff.diffTrimmedLines(input.texts[0], input.texts[1]);
 }, {
    texts: texts,
    protocol: window.location.protocol,
    host: window.location.host
 }).then(...);

因此，使用importScripts可以从资产中加载js。

希望这对其他人有帮助：）

Answer 2

Angular official doc

要将 Web Worker 添加到现有项目，请使用 Angular CLI ng generate 命令。

ng generate web-worker <location>

该命令执行以下操作。

配置您的项目以使用网络工作者（如果尚未使用）。
在src/app/app.worker.ts添加如下脚手架代码以接收消息。
<块引用>
addEventListener('message', ({ data }) => { const response = "worker 对 ${data} 的响应"; postMessage（响应）； });
将以下脚手架代码添加到 src/app/app.component.ts 以使用 worker。

<块引用>

  if (typeof Worker !== 'undefined') {
  // Create a new
  const worker = new Worker('./app.worker', { type: 'module' });
  worker.onmessage = ({ data }) => {
    console.log(`page got message: ${data}`);
  };
  worker.postMessage('hello');
} else {
  // Web workers are not supported in this environment.
  // You should add a fallback so that your program still executes correctly.
}

如何在角度使用网络工作者（ngx-web-worker）？

2 个答案: