Настройка веб-работника в Angular 7.0.1 - PullRequest
Новая
       29

Настройка веб-работника в Angular 7.0.1

0 голосов
/ 01 ноября 2018

Я пытаюсь выполнить настройку веб-работника в моем существующем проекте Angular 7.0.1 (проект среднего масштаба). Я сделал настройки после перехода по следующим ссылкам:

Вот мои изменения в каждом файле:

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

. / Экстра-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 Service Worker в проекте Angular (что должно быть очень просто).

Мое основное намерение попытаться включить веб-работник - позволить веб-приложению работать в многопоточном режиме, чтобы анимации, флажки, настраиваемые выпадающие списки и эффекты прокрутки на экране работали плавно.

1 Ответ

0 голосов
/ 27 февраля 2019

Вот копия моего ответа здесь

Хорошие новости, ребята, я получил это для работы с 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, так как большая часть вашего приложения, за исключением пользовательского интерфейса, загружается в вторая тема.

...