2017-04-04 5 views
8

Je viens de créer un nouveau angulaire 4 projet avec le CLI: ng new testComment activer l'arbre trembler pour un nouveau angulaire 4 projet

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, ébranle l'arbre ne fonctionne pas correctement, car ma classe non utilisée FooBar est toujours dans le fichier main.*.js.

Mon fichier exemple de composant TS (FooBar ne devrait 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 Rollup (comme décrit dans la documentation), mais cela ne fonctionne pas aussi bien ...

Existe-t-il un moyen simple d'activer l'arborescence? (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 il est toujours pas .. shaked

+0

Quelles sont les commandes 'ng' que vous utilisez? –

+0

J'utilise 'ng build --prod' et il n'est pas encore secoué. –

+0

L'interface CLI utilise-t-elle des tremblements d'arbres? À partir des documents angular.io sur l'agitation des arbres dans le livre de cuisine, il utilise le rollup pour le tremblement de l'arbre. Mais si l'on regarde la source, la CLI, il n'y a pas de dépendances de cumul dans le package.json. À moins qu'ils n'utilisent autre chose pour secouer les arbres. J'essayais de comprendre la même chose. –

Répondre

3

Mise à jour: De l'angular-cli Wiki:

Tous construit utiliser et regroupement d'arbres secousse limitée, tandis que Les builds --prod exécutent également une élimination limitée du code mort via UglifyJS.

Voir également ci-dessous.

The Ahead-of-Time (AOT) Compiler

Un défaut de construction --prod à --aot=true maintenant; il a pour un moment maintenant.

Il n'y a pas de document que j'ai trouvé sur le site angular.io qui offre une grande quantité de détails sur le processus exact d'agiter les arbres. L'interface de ligne de commande angulaire utilise webpack depuis un certain temps maintenant, et il y a quelques informations sur la façon dont cet outil fait trembler les arbres here. UglifyJS semble être un thème commun.

Tant que vous suivez les directives dans le lien ci-dessus sur AOT, vous devriez avoir de bons résultats. Si vous avez des difficultés à effectuer une compilation AOT avec des bibliothèques tierces, il existe toujours un risque que la bibliothèque ne soit pas écrite pour prendre en charge AOT. Bien que, la compatibilité AOT est attendue de nos jours.

+1

J'utilise 'ng build --prod' et il n'est pas encore secoué .. –

+1

J'ai ajouté un lien pour plus d'informations. –

+0

@ R.Richards ce lien n'a aucune information sur les secousses. Pouvez-vous poster l'essentiel de votre réponse? – adamdport

-3

Essayez de faire ng build --prod --aot

1

Pour secouage des arbres usage 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