Question

我们计划在离子2应用程序中使用Web worker。然而，离子2使用离子应用程序脚本（https://github.com/ionic-team/ionic-app-scripts，我们使用版本1.0.0）与webpack。我们需要有一个webworker打字稿文件，该文件被编译为JS但不与其他文件捆绑为main.js。

我们想到的是拥有文件名格式，例如

servicetest.worker.ts＆＃34; .worker＆＃34;文件扩展部分将被识别并从typescript编译为javascript，但不与其他文件捆绑在一起。

对此的任何建议都非常感激，因为我们似乎必须自定义应用脚本。

Answer 1

这是一个非常晚的答案，但也许它可以帮助其他人。看看https://www.javascripttuts.com/how-to-use-web-workers-with-ionic-in-one-go/

我遵循了那篇文章，但不得不做一些调整，因为我必须按需调用worker方法，而不是构造函数。

在./src/assets文件夹中创建一个名为workers的新文件夹，其中 worker JS 文件将存在。是 JS 而非 TS ，据我所知，TypeScript文件无法编译为可用的网络工程师。

创建一个webworker。我将粘贴模糊搜索网络工程师的主要代码（./assets/workers/fuzzysearch-worker.js）：

'use strict';

var pattern, originalList;
self.onmessage = function(event) {
    // Receive a message and answer accordingly
    pattern = event.data.pattern;
    originalList = event.data.originalList;
    self.doFuzzySearch();
};

self.doFuzzySearch = function() {
    var filteredList;

    console.time('internalFastFilter');
    filteredList = self.fastFilter(originalList, (item) => self.hasApproxPattern(item.searchField, pattern));
    console.timeEnd('internalFastFilter');

    // Send the results back 
    postMessage({ filteredList: filteredList });    
};

// The code above is purposely incomplete

在。 ts 文件中声明worker变量（通常在构造函数上方）：

private readonly searchWorker: Worker = new Worker('./assets/workers/fuzzysearch-worker.js');

在构造函数上：

constructor(/* Other injected dependencies here */
    public ngZone: NgZone) {       

        this.searchWorker.onmessage = (event) => {
          // Inside ngZone for proper ChangeDetection
          this.ngZone.run(()=> {                        
            this.dataList = event.data.filteredList;
            console.timeEnd('searchWorker');
          })
        };        

  }

最后，在您的＆＃34; 动作功能＆＃34;上，让我们说doSearch：

doSearch(event) {
    // ... extra code to do some magic

    console.time('searchWorker');
    this.searchWorker.postMessage({ command: 'doFuzzySearch', originalList: this.realList, pattern: searchFilter });

    // ... extra code to do some other magic
}

this.searchWorker.postMessage拨打电话。所有重载操作都在webworker内解决。

希望它有所帮助。最好的问候。

离散2中的Webpack和Web Workers

1 个答案: