Acabo de crear un nuevo proyecto Angular 4 con la CLI: ng new test
Las versiones:
@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 Sin embargo, el movimiento de árboles no funciona correctamente, ya que mi clase no utilizada FooBar todavía está en el archivo main.*.js .
Mi archivo TS de componente de muestra (FooBar no debería estar en la salida):
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"; }Traté de usar el resumen (como se describe en los documentos) pero esto no funcionó tan bien ...
¿Hay una manera simple de habilitar el movimiento de árboles? (Esperaba que estuviera habilitado de forma predeterminada al crear un proyecto a través de CLI).
Actualización: estoy usando ng build --prod y todavía no está sacudido.
Actualización: de angular-cli Wiki :
Todas las compilaciones hacen uso de la agrupación y la sacudida de árboles limitada, mientras que las compilaciones
--prodtambién ejecutan la eliminación limitada de código inactivo a través de UglifyJS.
Véase más abajo, también.
El compilador Ahead-of-Time (AOT)
Una compilación --prod por defecto es --aot=true ahora; tiene por un tiempo.
No hay ningún documento que haya encontrado en el sitio angular.io que ofrezca una gran cantidad de detalles sobre el proceso exacto de sacudir árboles. La CLI de Angular ha estado usando el paquete web desde hace algún tiempo, y aquí hay información sobre cómo esa herramienta hace el movimiento de árboles. UglifyJS parece ser un tema común.
Mientras siga las pautas en el enlace anterior sobre AOT, debería tener buenos resultados. Si tiene dificultades para realizar una compilación AOT con bibliotecas de terceros, siempre existe el riesgo de que la biblioteca no se haya escrito para admitir AOT. Aunque, la compatibilidad con AOT se espera hoy en día.
Para sacudir árboles, use ng build --prod --build-optimizer . De esta forma, vendor.js y main.js se combinan en el archivo main.js. Para evitar eso, debe agregar --vendor-chunk=true
Intenta hacer ng build --prod --aot