web-dev-qa-db-ja.com

Angular 7.0.1でのWebワーカーのセットアップ

既存のAngular 7.0.1プロジェクト（中規模プロジェクト）でWebワーカーのセットアップを試みています。次のリンクをたどってセットアップを行いました。

各ファイルの変更点は次のとおりです。

./src/main.ts

import 'zone.js';
import { enableProdMode } from '@angular/core';
import { bootstrapWorkerUi } from '@angular/platform-webworker';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

console.log("main.ts file loaded!");
bootstrapWorkerUi('webworker.js');

./src/workerLoader.ts

import 'polyfills.ts';
import '@angular/core';
import '@angular/common';

console.log("workerLoader.ts file loaded!");

import { platformWorkerAppDynamic } from '@angular/platform-webworker-dynamic';
import { AppModule } from './app/app.module';

platformWorkerAppDynamic().bootstrapModule(AppModule);

./angular.json

"projects": {
  "[project name]": {
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "./extra-webpack.config.js"
          }
          ...
          ...
        }
      }
    }
  }
}

./extra-webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    "entry": {
        "webworker": [
            "./src/workerLoader.ts"
        ]
    },
    "plugins": [
        new HtmlWebpackPlugin({
            "excludeChunks": [
                "webworker"
            ],
        })
    ],
    "output": {
        "globalObject": 'this'
    }
}

./tsconfig.json

{
    ...
    ...
    "angularCompilerOptions": {
        "entryModule": "./app/app.module#AppModule"
    }
}

デモ です。あなたは私の 研究ノート をチェックしたいかもしれません。

angular Service WorkerライブラリをAngularプロジェクト（非常に簡単なはずです）に含めて実行する必要があるため、まったく間違った方向に進む可能性があります。

ウェブワーカーを含めることを試みる私の主な目的は、画面上のアニメーション、チェックボックス、カスタムドロップダウン、およびスクロール効果がスムーズに実行されるように、Webアプリケーションをマルチスレッドで実行できるようにすることです。

angulartypescriptwebpackweb-workerangular7
22
Mr_Green

ここに私の答えのコピーがあります here

良いニュースだ、私はこれをAngular 7！????????????

要件：npm install --save-dev @angular-builders/custom-webpack html-webpack-plugin単にしたい場合は、envファイルにproduction:trueがあることを確認してください以下からコードをコピー/貼り付けます。

ステップ1：次の方法で、angle.jsonファイルを編集します。

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
                "path": "./webpack.client.config.js",
                "replaceDuplicatePlugins": true
             },
            ...
          }

開発サーバーではワーカー全体を実際に必要としないため、build部分のみを編集しています。

ステップ2：プロジェクトのルートにwebpack.client.config.jsファイルを作成します。 SSRを使用していない場合は、exclude: ['./server.ts'],を削除できます

const path = require('path');
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { AngularCompilerPlugin } = require('@ngtools/webpack');

module.exports = {
  entry: {
    webworker: [
      "./src/workerLoader.ts"
    ],
    main: [
      "./src/main.ts"
    ],
    polyfills: [
      "./src/polyfills.ts"
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      excludeChunks: [
        "webworker"
      ],
      chunksSortMode: "none"
    }),
    new AngularCompilerPlugin({
      mainPath: "./src/main.ts",
      entryModule: './src/app/app.module#AppModule',
      tsConfigPath: "src/tsconfig.app.json",
      exclude: ['./server.ts'],
      sourceMap: true,
      platform: 0
    }),
  ],
  optimization: {
    splitChunks: {
      name: "inline"
    }
  }
}

ステップ3：AppModuleを編集します：

import { BrowserModule } from '@angular/platform-browser'
import { WorkerAppModule } from '@angular/platform-webworker'

const AppBootstrap =
            environment.production
            ? WorkerAppModule
            : BrowserModule.withServerTransition({ appId: 'myApp' })

    imports: [
        ...
        AppBootstrap,
        ...
    ]

ステップ4：main.tsファイルを編集します。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { bootstrapWorkerUi } from '@angular/platform-webworker';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';

if (environment.production) {
  enableProdMode();
  bootstrapWorkerUi('webworker.bundle.js');
}

else {
  document.addEventListener('DOMContentLoaded', () => {
    platformBrowserDynamic().bootstrapModule(AppModule);
  });
}

ステップ5：正常にコンパイルされますが、アプリのDOM操作が原因で実行時の問題が発生する可能性があります。この時点で、DOM操作をすべて削除し、別のものに置き換えるだけで済みます。私はまだこの部分を理解することに取り組んでおり、この問題に関する指示を与えるために後で私の答えを編集します。

野avなDOM操作を行っていない場合は、無料のメインスレッドを使用して、lighthouseを使用したアプリの監査でMinimize main-thread workが表示されないようにすることをお勧めします。糸。

2
Guillaume Le Mière