Pour Angular 7, voir la réponse ci-dessous.
J'ai passé beaucoup de temps à trouver comment le faire, donc j'espère cela peut aider quelqu'un .
Conditions préalables
Je suppose que vous avez un projet Angular (version 2 ou 4) généré avec Angular CLI 1.0 ou plus.
Il n'est pas obligatoire de générer le projet avec CLI pour suivre ces étapes, mais les instructions que je vais donner concernant le fichier webpack, sont basées sur la configuration webpack CLI.
Étapes
1. Extraire le fichier webpack
Depuis Angular CLI v1.0, il existe la fonction "eject", qui vous permet d'extraire le fichier de configuration de webpack et de le manipuler comme vous le souhaitez.
2. Installer les dépendances de webworker bootstrap
Exécuter npm install --save @angular/platform-webworker @angular/platform-webworker-dynamic
3. Changements dans l'amorçage du fil de l'interface utilisateur
3.1 Changements dans app.module.ts
Remplacer BrowserModule par WorkerAppModule dans le fichier app.module.ts. Vous devrez également mettre à jour la déclaration d'importation afin d'utiliser @angular/platform-webworker bibliothèque.
//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 Changements dans src/main.ts
Remplacer le processus d'amorçage par : bootstrapWorkerUI (mettre à jour également l'importation).
Vous devrez passer une URL avec le fichier où le travailleur web est défini. Utilisez un fichier appelé webworker.bundle.js ne vous inquiétez pas, nous allons créer ce fichier bientôt.
//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 Créer le fichier workerLoader.ts
- Créer un nouveau fichier src/workerLoader.ts .
- Comme votre Web Worker sera un fichier unique contenant tous les éléments requis, vous devez inclure les éléments suivants
polyfills.ts , @angular/core et @angular/common paquets. Lors des prochaines étapes, vous mettrez à jour Webpack afin de transpiler et de construire un bundle avec le résultat.
- Importation
platformWorkerAppDynamic
-
Importez le AppModule (supprimer l'importation de main.ts ) et l'amorcer en utilisant ceci platformWorkerAppDynamic plate-forme.
// 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. Mettez à jour webpack pour construire votre webworker
Le fichier de configuration généré automatiquement par webpack est assez long, mais vous devrez simplement concentrer votre attention sur les points suivants :
-
Ajouter un webworker point d'entrée pour notre workerLoader.ts fichier. Si vous regardez la sortie, vous verrez qu'il attache un préfixe bundle.js à tous les chunks. C'est pourquoi pendant l'étape de bootstrap nous avons utilisé webworker.bundle.js
-
Aller à HtmlWebpackPlugin et exclure le webworker de sorte que le fichier Web Worker généré n'est pas inclus dans le fichier index.html.
-
Aller à CommonChunksPlugin et pour le inline commun, définissez les morceaux d'entrée de manière explicite afin d'empêcher webworker à inclure.
-
Aller à AotPlugin et fixer explicitement les 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...
};
Vous êtes prêt
Si vous avez suivi correctement les étapes précédentes, il ne vous reste plus qu'à compiler le code et à essayer les résultats.
Exécuter npm start
Toute la logique de votre application Angular devrait s'exécuter dans un WebWorker, ce qui rend l'interface utilisateur plus fluide.
Notes sur les fourreaux
npm start exécute le serveur webpack-dev et il a un problème avec les webworkers qui envoient un message d'erreur sur le journal de la console. Quoi qu'il en soit, le webworker semble fonctionner correctement. Si vous compilez l'application en utilisant webpack et le servir à partir de n'importe quel serveur http tel que simplehttpserver l'erreur disparaît ;)
Exemple de code et démo
Vous pouvez obtenir le code complet (webpack config, app.module.ts, ...) à l'adresse suivante ce référentiel .
Vous pouvez également regarder ici une Démonstration en direct pour vérifier les différences entre l'utilisation ou non des Web Workers.
