¡Cuidemos el ambiente!
Este momento deben estar pensando que el administrador de Angular Costa Rica se debe haber equivocado de post 🤦♂️.
Desde pequeños nos han enseñado a que debemos cuidar el medio ambiente, a travez de el reciclaje, hacer uso inteligente del agua. Se preguntaran, ¿qué tiene que ver esto con nuestro ambiente?
De la misma manera que tratamos nuestra Planeta Tierra debemos tratar nuestros ambientes dentro del proyecto.
Cada vez que creamos un nuevo proyecto con el Angular CLI, se crean los archivos de ambiente dentro la carpeta /environments. Estos nos permiten utilizar diferentes variables según el ambiente en el que estamos corriendo nuestro proyecto (ej. dev, prod, staging).
Pero……….
¿Puedo manejar otras cosas además de variables? 🤔
La respuesta es SI. Podemos importar módulos, servicios, cualquier cosas que se nos ocurra que necesite nuestro ambiente en especifico.
¿Cómo puedo tomar ventaja de estos archivos? 🤔
Antes de iniciar con el ejemplo que nos muestre los beneficios, corramos los siguientes pasos:
- Creemos un proyecto nuevo
ng new envapp
2. Revisemos como esta compuesto y que peso tienen nuestro bundles
ng build --prod --stats-json
npx webpack-bundle-analyzer dist/envapp/stats.json
Estos son los resultados:
Ahora, ubiquémonos en el escenario que necesitamos NGRx en nuestra aplicación junto a ella, las herramientas de desarrollo que nos permiten hacer debugging(encontrar errores) del state.
Esta publicación no profundizara en el uso de NGRx. En caso de tener interés puede visitar la documentación acá
Agregamos el StoreModule y las herramientas a app.module.ts
npm i @ngrx/store --save
npm i @ngrx/store-devtools --save
Verifiquemos de nuevo el tamaño de nuestro bundle:
No es una sorpresa que el main bundle aumento un poco👌el tamaño
Pero………. ¿Porque las herramientas de desarrollo son parte de nuestro bundle de producción? ¿qué pasa si no los quiero? ¿cómo los puedo eliminar?
⚡ ¡️Environments a la salvación!
Vamos a mover StoreDevtoolsModule los vamos a mover a environments.ts
Declaramos una constante, la vamos a llamar envModules, que va contener los módulos que nos interese importar según el environment.
¡Importante!, esta constante debe ser declarada en todos los archivos de environments .
Como ultimo paso, necesitamos agregar envModules al app.module.ts, y quitar el import de StoreDevtoolsModule.
Nuevamente vamos crear un build y analizar el bundle
Conclusion
Removimos 39kb del bundle principal. Por ahora pareciera una disminución muy pequeña, pero en un proyecto grande cualquiera reducción es valiosa, y generalmente tenemos más herramientas de tipo que podríamos remover del ambiente de producción.
Además al dejar los StoreDevTools estamos permitiendo que la aplicación sea “debuggeada” por personas ajenas al equipo de desarrollo.
¿Quieres invitarme a un cafécito?
