Angular 7.0.1中的Web worker设置

Question

我正在尝试在我现有的Angular 7.0.1项目(中等规模项目)中进行Web工作者设置.我在完成以下链接后进行了设置:

• Web工作者为Angular 4应用程序设置
• Webpack配置更改Angular 6+应用程序 - 库和相关文章

以下是我对每个文件的更改:

./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项目中包含并运行一个角度服务工作者库(这应该非常容易).

我试图包含webworker的主要目的是让web应用程序在多线程上运行,以便屏幕上的动画,复选框,自定义下拉列表和滚动效果顺利执行.

Answer 1

这是我的答案的副本

好消息，伙计们，我已经让它可以与 Angular 7 一起使用了！

要求：如果您只想从下面复制/粘贴代码，npm install --save-dev @angular-builders/custom-webpack html-webpack-plugin 请确保您的 env 文件中有该文件。production:true

第 1 步：按以下方式编辑 angular.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 操作并将其替换为其他内容即可。我仍在努力解决这部分问题，稍后将编辑我的答案以提供有关此问题的指导。

如果您不进行野蛮的 DOM 操作，那么您最好使用免费的主线程，并且使用 lighthouse 审核您的应用程序不应再显示Minimize main-thread work，因为除 UI 之外的大多数应用程序都在第二个线程中加载。