Lectura Angular de la Documentación, usted puede encontrar varios las referencias a bootstrap toda su Angular de la aplicación dentro de un Trabajador de la Web, por lo que su interfaz de usuario no están bloqueados por pesado JS uso.

Sin embargo, en este momento no hay información oficial sobre cómo hacerlo, y la única información en el Angular Doc. es que esta es una característica experimental.

¿Cómo puedo utilizar este enfoque para tomar ventaja de la web a los trabajadores en Angular?

OriginalEl autor Enrique Oriol | 2017-04-07

1 Comentario

  1. 2

    Buenas noticias chicos, tengo esto para trabajar con Angular 7! 🎉🎉🎉

    Requisito: npm install --save-dev @angular-builders/custom-webpack html-webpack-plugin
    Asegúrese de que usted tiene production:true en su env archivo si usted sólo desea copiar/pasado el código de abajo.

    Paso 1: Editar su angulares.archivo json de la siguiente manera:

    "architect": {
            "build": {
              "builder": "@angular-builders/custom-webpack:browser",
              "options": {
                "customWebpackConfig": {
                    "path": "./webpack.client.config.js",
                    "replaceDuplicatePlugins": true
                 },
                ...
              }
    

    Que son sólo la edición de la build parte porque usted realmente no necesita todo trabajador de la cosa en el dev server.

    Paso 2: Crear webpack.client.config.js archivo en la raíz de tu proyecto. Si no estás usando RSS, usted puede quitar 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"
        }
      }
    }
    

    Paso 3: Edición de AppModule:

    import { BrowserModule } from '@angular/platform-browser'
    import { WorkerAppModule } from '@angular/platform-webworker'
    
    const AppBootstrap =
                environment.production
                ? WorkerAppModule
                : BrowserModule.withServerTransition({ appId: 'myApp' })
    
        imports: [
            ...
            AppBootstrap,
            ...
        ]
    

    Paso 4: Edición principal.archivo 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);
      });
    }
    

    Paso 5: compile bien, pero usted puede tener un tiempo de ejecución de problema debido a la manipulación del árbol DOM en su aplicación. En este punto, usted sólo tiene que quitar cualquier manipulación del árbol DOM y reemplazarlo por algo más. Todavía estoy trabajando en la figuración de esta parte y va a editar mi respuesta posterior a orientar acerca de este problema.

    Si usted no está haciendo salvaje de manipulación DOM, entonces usted está bueno para ir con un libre-subproceso de auditoría y su aplicación a través de faro no debe mostrar Minimize main-thread work más, como la mayoría de su aplicación, salvo interfaz de usuario se carga en un segundo hilo.

    El problema es como: No se puede encontrar la ventana en una línea como la ventana de['webpackJSONPCallback']??? Usted no tiene nada. Usted tiene que usar webpack varios objetivos para compilarlo, pero angulares de la cli don't apoyo de una matriz en el webpack config. Carga diferida ganó't trabajo por esta razón.
    De verdad ? Yo no tengo este problema en mi final, aunque yo lo uso con la carga diferida.
    Entonces, ¿cómo se carga perezosa módulos con webpack configurado con el objetivo de: ‘web’? Usted tiene que conseguir un error: no se puede encontrar la ventana. ¿No es así? Si no, deme un ejemplo. Estoy absolutamente seguro de que esto no va a funcionar. Ver esto: webpack.js.org/concepts/targets

    OriginalEl autor Guillaume Le Mière

Dejar respuesta

Please enter your comment!
Please enter your name here