我们计划在 ionic 2 应用程序中使用网络 worker 。然而,ionic 2 使用 ionic-app-scripts(https://github.com/ionic-team/ionic-app-scripts,我们使用的是 1.0.0 版)和 webpack。我们需要一个编译为 JS 的 webworker typescript 文件,但不与其他文件捆绑为 main.js。
我们的想法是采用如下格式的文件名
servicetest.worker.ts,其中“.worker”文件扩展名部分将被识别并从 typescript 编译为 javascript,但不会与其他文件捆绑在一起。
非常感谢关于此的任何建议,因为我们似乎必须自定义应用程序脚本。
最佳答案
有点迟到的答案,但也许它可以帮助其他人。 看看https://www.javascripttuts.com/how-to-use-web-workers-with-ionic-in-one-go/
我按照那篇文章做了一些调整,因为我必须按需调用辅助方法,而不是在构造函数上。
在 ./src/assets
文件夹中创建一个名为 workers 的新文件夹,您的 worker.JS 文件将存放在该文件夹中。是的,JS 而不是 TS,据我所知,TypeScript 文件不会编译为可用的网络 worker 。
创建网络 worker 。我将粘贴我的 fuzzySearch 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');
})
};
}
最后,在您的“操作函数”上,让我们说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 内部解决。
希望对您有所帮助。 最好的问候。
关于javascript - ionic 2 中的 Webpack 和 Web Workers,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44884159/