Angular 7.0.1 中的 Web Worker 设置

Posted 2023-03-13

【中文标题】Angular 7.0.1 中的 Web Worker 设置

【英文标题】：Web worker setup in Angular 7.0.1

【发布时间】：2019-04-05 14:59:01

【问题描述】：

我正在尝试在我现有的 Angular 7.0.1 项目（中型项目）中进行网络工作者设置。我在通过以下链接后进行了设置：

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 应用程序在多线程上运行，以便屏幕上的动画、复选框、自定义下拉和滚动效果能够流畅地执行。

【问题讨论】：

喜欢你的研究笔记哈哈，

@Mr_Green 我也有同样的问题。似乎代码没有在加载的worker .workerLoader.ts 文件上运行！不执行日志。你有成就吗？

@Serginho nope.. 幸运/不幸的是，这不再是要求。

我记得我在 Angular4（Ionic 3 项目）中使用了 webworker，但我将 worker 保留为一个独立的 javascript 文件，我在 index.html 上手动注入......不能更具体，因为这是我的旧工作，我现在无法访问代码。

【参考方案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 部分，因为您实际上并不需要开发服务器中的整个工作人员。

第 2 步：在项目的根目录下创建 webpack.client.config.js 文件。 如果您不使用 s-s-r，可以删除 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 加载第二个线程。

【讨论】：

您错过了workerLoader.ts 文件的创建过程！基于blog.angularindepth.com/…

@GuidoDizioli 链接已损坏。如果您知道新链接，请更新。