ウェブパックとウェブワーカーのイオン2

Question

私たちはionic 2アプリケーションでウェブワーカーを使用する予定です。しかし、ionic 2は、webpackでionic-app-scripts（https://github.com/ionic-team/ionic-app-scripts、バージョン1.0.0を使用しています）を使用しています。 JSにコンパイルされていて他のファイルとmain.jsにバンドルされていないwebworkerのtypescriptファイルが必要です。私たちが考えていたもの

は、ファイル名の形式を持っていたように「.worker」ファイルの拡張子部分を特定し、コンパイルtypescriptですからJavaScriptにはなく一緒にバンドルされていないことになる

servicetest.worker.tsとして他のファイル。

私はappscriptsをカスタマイズする必要があるように思われるので、これに関するアドバイスは非常に感謝しています。

Answer 1

本当に遅い回答の種類が、おそらく他の人を助けるかもしれません。 https://www.javascripttuts.com/how-to-use-web-workers-with-ionic-in-one-go/

私はそのコンビネーションではなく要求に応じてワーカーメソッドを呼び出す必要があったため、その記事に従っていましたが、調整が必要でした。

./src/assetsフォルダには、あなたのワーカーという名前の新しいフォルダを作成します。 JSファイルが有効になります。はいJSTS私が知る限り、タイプスクリプトファイルは使用可能なウェブワーカーにはコンパイルされません。

ウェブワーカーを作成します。あなたに

'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 

：私は私のfuzzySearchのwebworker（./assets/workers/fuzzysearch-worker.js）のメインコードを貼り付けます。コンストラクタで

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

：TSファイルは、（通常はコンストラクタ上記の）労働者の変数を宣言

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を呼び出します。すべての負荷の高い作業は、Webワーカーの内部で解決されます。

希望します。 よろしくお願いいたします。