angularjs - new - ¿Qué hacen estos angular-cli: inline.bundle.js, vendor.bundle.js, main.bundle.js?

ng new angular 4

Question

Si reviso el archivo index.html del proyecto angular 2 creado con angular-cli, puedo ver que la página solo incluye 3 archivos de la carpeta dist:

inline.bundle.js
vendor.bundle.js
main.bundle.js

Pero ahora estoy tratando de entender lo que hace cada archivo. Escribí el componente con angular-cli, he bajado de categoría para poder usarlo en otra aplicación escrita con angular 1. Si simplemente agrego estos 3 archivos a mi index.html, además de agregar el archivo app.module.ts, parece que He actualizado mi aplicación y todo está funcionando. Estoy tratando de desaprobar por qué, debido a que Google Angular no está hablando de angular-cli y cómo puede ayudar con la migración.

Answer 1

Veamos:

inline.bundle.js

Este es un cargador de webpack. Un pequeño archivo con utilidades de Webpack que se necesitan al cargar otros archivos.

Eventualmente, esto se escribirá dentro del archivo index.html y no se generará como un archivo separado.

vendor.bundle.js

Esto se genera de forma predeterminada en el modo dev y se ignora de forma predeterminada en el modo prod ( ng build -prod o ng serve -prod ).

Incluye las bibliotecas angulares con poca o ninguna modificación. Esto es para acelerar el proceso de construcción. Además, algunas personas piensan que es una buena idea guardarlos en un archivo separado cuando no cambia mucho y luego se puede almacenar en caché durante más tiempo.

Sin embargo, el enfoque Angular típico es fusionarlos en el paquete principal y, al hacerlo, ejecutar Webpack shaking, que elimina cualquier módulo EcmaScript / TypeScript que nunca se importó de ningún otro módulo en su aplicación y sus importaciones. Esto significa que el paquete final es mucho más pequeño. Por ejemplo, cuando se ejecuta el compilador Ahead of Time (AoT), el compilador angular se elimina por sacudidas de árbol.

Puede controlar explícitamente la generación de un paquete de proveedor independiente o no configurando el argumento --vendor-chunk .

main.bundle.js

Su propio código, y cualquier otra cosa que haya importado, etc., como se explicó en el punto anterior.