wake-up-neo.com

Web Worker-Setup in Angular 7.0.1

Ich versuche, das Webworker-Setup in meinem vorhandenen Angular 7.0.1-Projekt (mittelgroßes Projekt) durchzuführen. Ich habe das Setup durchgeführt, nachdem ich die folgenden Links durchgesehen habe:

Hier sind meine Änderungen in jeder Datei:

./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"
    }
}

Hier ist die Demo . Vielleicht möchten Sie meine Forschungsnotizen überprüfen.

Möglicherweise gehe ich in eine völlig falsche Richtung, weil ich nur eine angular Service-Worker-Bibliothek in Angular) -Projekt einbinden und ausführen muss (was sehr einfach sein sollte).

Meine Hauptabsicht beim Versuch, Webworker einzubeziehen, besteht darin, die Web-App auf mehreren Threads laufen zu lassen, damit die Animationen, Kontrollkästchen, benutzerdefinierten Dropdown- und Bildlaufeffekte auf dem Bildschirm reibungslos funktionieren.

22
Mr_Green

Hier ist eine Kopie meiner Antwort hier

Gute Nachrichten, Leute, ich habe es verstanden, mit Angular 7! ????????????

Voraussetzung: npm install --save-dev @angular-builders/custom-webpack html-webpack-plugin Stellen Sie sicher, dass Sie production:true in Ihrer env-Datei haben, wenn Sie nur Code kopieren/einfügen möchten von unten.

Schritt 1: Bearbeiten Sie Ihre angular.json-Datei folgendermaßen:

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

Sie bearbeiten nur den Teil build, weil Sie nicht wirklich die gesamte Arbeitskraft in dev server benötigen.

Schritt 2: Erstellen Sie eine webpack.client.config.js - Datei im Stammverzeichnis Ihres Projekts. Wenn Sie SSR nicht verwenden, können Sie exclude: ['./server.ts'], entfernen

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"
    }
  }
}

Schritt 3: Bearbeite dein AppModule:

import { BrowserModule } from '@angular/platform-browser'
import { WorkerAppModule } from '@angular/platform-webworker'
const AppBootstrap =
            environment.production
            ? WorkerAppModule
            : BrowserModule.withServerTransition({ appId: 'myApp' })
    imports: [
        ...
        AppBootstrap,
        ...
    ]

Schritt 4: Bearbeite deine main.ts Datei.

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);
  });
}

Schritt 5: Die Kompilierung funktioniert einwandfrei, es kann jedoch zu Laufzeitproblemen aufgrund von DOM-Manipulationen in Ihrer App kommen. Zu diesem Zeitpunkt müssen Sie lediglich alle DOM-Manipulationen entfernen und durch andere ersetzen. Ich arbeite immer noch daran, diesen Teil herauszufinden, und werde meine Antwort später bearbeiten, um Anweisungen zu diesem Problem zu geben.

Wenn Sie keine wilde DOM-Manipulation durchführen, sollten Sie einen kostenlosen Haupt-Thread verwenden und die Prüfung Ihrer App mit Lighthouse sollte nicht mehr Minimize main-thread work Anzeigen, da die meisten Ihrer Apps außer der Benutzeroberfläche in a geladen werden zweiter Thread.

2