CLI: Compilación para producción en Angular

Una vez que se crea una aplicación web y está lista para su implementación, requerimos que Angular compile todos los diferentes fragmentos de código en una sola compilación. La compilación se comprime en un tamaño más pequeño.

Durante este paso final, estamos obligados a encontrar algunos problemas menores. Puede ser una experiencia tan frustrante, considerando los rigores por los que uno ha pasado para construir la aplicación.

Es fácil pensar que se trata de un problema aislado, pero incluso los proyectos nuevos que no han sido manipulados pasan por los mismos problemas. Un problema importante que se ha encontrado es donde no se crea main.js; luego habrá otras advertencias como:

1. Eliminación de funciones no utilizadas.
2. Efectos del sitio en la inicialización.

Cómo resolver CLI: problemas de compilación

Antes de sumergirnos en las diferentes soluciones de trabajo, veamos diferentes configuraciones de banderas para Angular:

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

Cuando se usa --prod en Angular, establece algunas configuraciones no marcables:

1. Agrega el trabajador del servicio si está configurado en .angular-cli.json.
2. Reemplaza process.env.NODE_ENV en los módulos con el valor de producción (esto es necesario para algunas bibliotecas, como reaccionar).
3. Ejecuta UglifyJS en el código.

Cuando se está construyendo un proyecto, los comandos como ng build --env=prod no logran un gran trabajo de producción de compilación ya que no comprimen los archivos. Otra cosa para recordar es confirmar que AOT está implementado. AOT está principalmente activo de forma predeterminada.

El comando ng build --prod debería funcionar si se implementa Ahead of Time (AOT). Utilice el comando ng build --prod --aot=false si no funciona.

El comando ng serve --prod también puede funcionar si la función habilitar producción está habilitada en Angular. Este comando también ayuda a acelerar significativamente el tiempo de carga de la aplicación.