web-dev-qa-db-fra.com

Comment activer l'arborescence pour un nouveau projet Angular 4

Je viens de créer un nouveau projet Angular 4 avec la CLI: ng new test

Les versions:

@angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Cependant, l'arborescence ne fonctionne pas correctement, car ma classe inutilisée FooBar est toujours dans le main.*.js fichier.

Mon exemple de fichier TS de composant (FooBar ne doit pas être dans la sortie):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

export class FooBar {
  foo = "hello";
}

J'ai essayé d'utiliser le rollup (comme décrit dans la documentation) mais cela n'a pas fonctionné aussi bien ...

Existe-t-il un moyen simple d'activer le tremblement d'arbre? (Je m'attendais à ce qu'il soit activé par défaut lors de la création d'un projet via CLI).

Mise à jour: J'utilise ng build --prod et ce n'est toujours pas secoué ..

angularangular4tree-shaking
13
Rico Suter

Mise à jour: depuis le Wiki angular-cli :

Toutes les versions utilisent le regroupement et l'arborescence limitée, tandis que --prod les builds exécutent également une élimination limitée du code mort via UglifyJS.

Voir aussi ci-dessous.

Le compilateur Ahead-of-Time (AOT)

Un --prod par défaut, la construction est --aot=true maintenant; ça fait un moment.

Il n'y a aucun document que j'ai trouvé sur le site angular.io qui offre une grande quantité de détails sur le processus exact de tremblement d'arbre. L'interface CLI Angular utilise le webpack depuis un certain temps maintenant, et il y a des informations sur la façon dont cet outil agit en arborescence ici . glifyJS = semble être un thème commun.

Tant que vous suivez les directives du lien ci-dessus sur AOT, vous devriez obtenir de bons résultats. Si vous avez des difficultés à faire une compilation AOT avec des bibliothèques tierces, il y a toujours le risque que la bibliothèque n'ait pas été écrite pour prendre en charge AOT. Bien que la compatibilité AOT soit attendue de nos jours.

5
R. Richards

Pour secouer les arbres, utilisez ng build --prod --build-optimizer. De cette façon, vendor.js et main.js sont combinés dans le fichier main.js. Pour éviter cela, vous devez ajouter --vendor-chunk=true

4
ochs.tobi

Essayer de faire ng build --prod --aot

0
mezhik91