angular - Angular 7.0.1 中的网络 worker 设置

Question

我正在尝试在我现有的 Angular 7.0.1 项目(中型项目)中进行网络 worker 设置。通过以下链接后，我进行了设置:

• Web workers setup for Angular 4 app
• Angular 6+ 应用程序的 Webpack 配置更改 - library和 related article

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

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

这是 demo .你可能想查看我的 research notes .

我可能会走完全错误的方向，因为我只需要在 Angular 项目中包含并运行一个 Angular Service Worker 库(这应该非常简单)。

我尝试包含 webworker 的主要目的是让 web 应用程序在多线程上运行，以便屏幕上的动画、复选框、自定义下拉列表和滚动效果能够流畅地执行。

Answer 1

这是我的答案的副本 here

伙计们，好消息，我让这个可以与 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 部分，因为您实际上并不需要开发服务器中的整个 worker 部分。

第 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 之外，您的大部分应用都在第二个线程中加载。