带有 Web Workers 的 Angular CLI 生成的应用程序

Question

阅读 Angular 文档，你可以找到几个 references to bootstrap your whole Angular app inside a Web Worker ，因此您的 UI 不会被大量 JS 使用所阻塞。

但是，目前没有关于如何做到这一点的官方信息，只有 Angular Doc 中的信息。是，这是一个实验性的功能。

我如何使用这种方法来利用 Angular 中的网络 worker ？

Answer 1

对于 Angular 7，请参阅下面的答案。

我花了很多时间来弄清楚怎么做，所以我希望this can help someone .

先决条件

我假设您有一个使用 Angular CLI 1.0 或更高版本生成的 Angular 项目(版本 2 或 4)。

按照此步骤使用 CLI 生成项目不是强制性的，但我将提供的与 webpack 文件相关的说明基于 CLI webpack 配置。

脚步

1.解压webpack文件

从 Angular CLI v1.0 开始，就有了“eject”功能，它允许您提取 webpack 配置文件并根据需要对其进行操作。

运行 ng eject所以 Angular CLI 生成 webpack.config.js 文件。

运行 npm install所以CLI生成的新依赖满足

2.安装webworker bootstrap依赖

运行 npm install --save @angular/platform-webworker @angular/platform-webworker-dynamic
3. UI 线程引导的变化

3.1 app.module.ts 的变化

替换 BrowserModule来自 WorkerAppModule在 app.module.ts 文件中。您还需要更新导入语句才能使用 @angular/platform-webworker图书馆。

//src/app/app.module.ts

import { WorkerAppModule } from '@angular/platform-webworker';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
//...other imports...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    WorkerAppModule,
    //...other modules...
  ],
  providers: [/*...providers...*/],
  bootstrap: [AppComponent]
})
export class AppModule { }

3.2 src/main.ts 的变化

将 Bootstrap 替换为: bootstrapWorkerUI (也更新导入)。

您需要传递一个包含定义 Web Worker 的文件的 URL。使用名为 webworker.bundle.js 的文件，别担心，我们很快就会创建这个文件。

//main.ts

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

bootstrapWorkerUi('webworker.bundle.js');

3.3 创建workerLoader.ts文件

创建一个 新文件 src/workerLoader.ts .

由于您的 Web Worker 将是包含所有必需内容的单个文件，因此您需要包含 polyfills.ts , @angular/core , 和 @angular/common包。在接下来的步骤中，您将更新 Webpack 以使用结果转译和构建包。

进口 platformWorkerAppDynamic

导入 AppModule (从 main.ts 中删除导入)并使用此 platformWorkerAppDynamic 引导它平台。

// workerLoader.ts

import 'polyfills.ts';
import '@angular/core';
import '@angular/common';

import { platformWorkerAppDynamic } from '@angular/platform-webworker-dynamic';
import { AppModule } from './app/app.module';

platformWorkerAppDynamic().bootstrapModule(AppModule);

4. 更新 webpack 来构建你的 webworker

webpack 自动生成的配置文件很长，但你只需要将注意力集中在以下几件事上:

添加 webworker 入口点 我们的 workerLoader.ts文件。如果您查看输出，您会看到它为所有 block 附加了一个 bundle.js 前缀。这就是为什么在引导步骤中我们使用了 webworker.bundle.js

转至 HtmlWebpackPlugin 并排除 webworker入口点，因此生成的 Web Worker 文件不包含在 index.html 文件中。

转至 CommonChunksPlugin ，以及 inline公共(public) block ，明确设置入口 block 以防止 webworker被包括。

转至 AotPlugin 并明确设置 entryModule

// webpack.config.js

//...some stuff...
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');
//...some stuff...

module.exports = {
  //...some stuff...
  "entry": {
    "main": [
      "./src/main.ts"
    ],
    "polyfills": [
      "./src/polyfills.ts"
    ],
    "styles": [
      "./src/styles.css"
    ],
    "webworker": [
      "./src/workerLoader.ts"
    ]
  },
  "output": {
    "path": path.join(process.cwd(), "dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js"
  },
  "module": { /*...a lot of stuff...*/ },
  "plugins": [
    //...some stuff...
    new HtmlWebpackPlugin({
      //...some stuff...
      "excludeChunks": [
        "webworker"
      ],
      //...some more stuff...
    }),
    new BaseHrefWebpackPlugin({}),
    new CommonsChunkPlugin({
      "name": "inline",
      "minChunks": null,
      "chunks": [
        "main",
        "polyfills",
        "styles"
      ]
    }),
    //...some stuff...
    new AotPlugin({
      "mainPath": "main.ts",
      "entryModule": "app/app.module#AppModule",
      //...some stuff...
    })
  ],
  //...some more stuff...
};

你准备好了

如果您正确地遵循了前面的步骤，现在您只需要编译代码并尝试结果。

运行 npm start
Angular 应用程序的所有逻辑都应该在 WebWorker 内部运行，从而使 UI 更加流畅。

补充说明
npm start运行 webpack-dev 服务器 ，并且网络 worker 在控制台日志上抛出错误消息存在某种问题。无论如何，网络 worker 似乎运行良好。
如果您使用 webpack 编译应用程序命令并从任何 http 服务器提供它，如 simplehttpserver ，错误消失了;)

示例代码和演示

您可以从 this repo 获取完整代码(webpack 配置、app.module.ts、...) .

您也可以在这里观看 live demo , 检查是否使用 Web Workers 之间的差异