web-dev-qa-db-fra.com

Configuration de Web Worker dans Angular 7.0.1

J'essaie de configurer les travailleurs Web dans mon projet Angular 7.0.1 existant (projet de taille moyenne)). J'ai effectué la configuration après avoir suivi les liens suivants:

Voici mes modifications dans chaque fichier:

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

Voici le démo . Vous voudrez peut-être vérifier ma notes de recherche .

Je vais peut-être dans une direction complètement fausse, car il me faut simplement inclure et exécuter une angular bibliothèque de service worker dans Angular projet (ce qui devrait être très facile).

Mon objectif principal d’essayer d’inclure Webworker est de laisser l’application Web s'exécuter en multi-thread afin que les animations, les cases à cocher, les menus déroulants personnalisés et les effets de défilement à l’écran se déroulent sans heurts.

angulartypescriptwebpackweb-workerangular7
22
Mr_Green

Voici une copie de ma réponse ici

Bonne nouvelle les gars, je dois travailler avec cela Angular 7! ????????????

Condition préalable : npm install --save-dev @angular-builders/custom-webpack html-webpack-plugin Assurez-vous que vous avez production:true dans votre fichier env si vous voulez simplement copier/coller le code ci-dessous.

Étape 1 : Modifiez votre fichier angular.json de la manière suivante:

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

Vous ne faites qu'éditer la partie build parce que vous n'avez pas vraiment besoin de l'intégralité de l'élément worker dans le serveur dev.

Étape 2 : Créez webpack.client.config.js fichier à la racine de votre projet. Si vous n'utilisez pas le SSR, vous pouvez supprimer 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"
    }
  }
}

Étape 3 : éditez votre AppModule:

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

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

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

Étape 4 : Éditez votre fichier 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);
  });
}

Étape 5 : La compilation est parfaite, mais vous pouvez avoir un problème d'exécution dû à une manipulation du DOM dans votre application. À ce stade, il vous suffit de supprimer toute manipulation du DOM et de la remplacer par quelque chose d'autre. Je travaille toujours sur cette partie et éditerai ma réponse plus tard pour donner des indications sur ce problème.

Si vous ne faites pas de féroces manipulations DOM, alors vous êtes prêt à utiliser un thread principal gratuit et l'audit de votre application à l'aide de phare ne devrait pas montrer Minimize main-thread work _ plus, car la plupart de vos applications, à l'exception de l'interface utilisateur, se chargent dans un deuxième thread.

2
Guillaume Le Mière