Angular CLI使用Web Workers生成应用程序

我花了很多时间弄清楚如何做到这一点,所以我希望this can help someone.

前提条件

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

使用CLI生成项目并不是必须遵循此步骤,但我将提供的与webpack文件相关的说明基于CLI webpack配置.

脚步

1.解压缩webpack文件

从Angular CLI v1.0开始,就有“弹出”功能,它允许您提取webpack配置文件并根据需要进行操作.

>运行ng eject,以便Angular CLI生成webpack.config.js文件.
>运行npm install,以便满足CLI生成的新依赖项

2.安装webworker引导程序依赖项

运行npm install –save @ angular / platform-webworker @ angular / platform-webworker-dynamic

3. UI线程引导程序的更改

3.1 app.module.ts中的更改

在app.module.ts文件中替换WorkerAppModule的BrowserModule.您还需要更新import语句才能使用@ 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的变化

使用以下命令替换引导过程：bootstrapWorkerUI(还更新导入).

您需要传递一个URL,其中包含定义Web worker的文件.使用名为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自动生成的配置文件很长,但您只需要将注意力集中在以下方面：

>为workerLoader.ts文件添加webworkerentry点.如果查看输出,您会看到它将bundle.js前缀附加到所有块.这就是为什么在bootstrap步骤中我们使用了webworker.bundle.js
>转到HtmlWebpackPlugin并排除webworker入口点,因此生成的Web Worker文件不包含在index.html文件中.
>转到CommonChunksPlugin,对于内联公共块,请明确设置条目块以防止包含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更流畅.

Furter指出

npm start运行webpack-dev服务器,webworkers在控制台日志上抛出错误消息时遇到了一些问题.无论如何,网络工作者似乎运行良好.
如果您使用webpack命令编译应用程序并从任何http服务器(如simplehttpserver)提供它,则错误消失;)

示例代码和演示

您可以从this repo获取整个代码(webpack config,app.module.ts,…).

您还可以在此处观看live demo,以查看是否使用Web Workers之间的差异