1

Tengo un crm desarrollado en Angular 7. Al momento de realizar el primer ingreso (login), tarda casi 2 minutos en renderizar la pantalla de login. Una vez que pasaron esos 2 minutos, despues por mas que me deslogee y vuelva a logear, funciona muy bien y muy fluido. Yo sospecho que han quedado package y componentes instalados y que no son usados que hacen que sea pesada la app a la primera carga (no tiene nada cacheado). Ahora bien...googleando encontré que existe el comando:

npx depcheck

que analiza los packages y demas que no estan usados. El inconveniente es que la lista de los NO usados me figura, entre otros @angular/common, y ese package o library yo la estoy usando...seguro, entre ellos utilizo el Location. Otro que utilizo es @angular/material porque utilizo la table. Les muestro imagen de lo que me dice que no uso y alguna parte de codigo donde lo utilizo:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Lo mismo me pasa con la table de angular material, figura que @angular/material es unused pero la utilizo. Entonces la pregunta es...como puedo saber que componentes o packages no estan siendo usados y removerlos para ver si se aliviana la primera carga del crm. Gracias de antemano.

1
  • Hola, una ves me pasaba lo mismo y es que una de las referencias que usaba se conectaba a internet y descargaba no solo uno, sino 2 archivos de diferentes servidores, en mi pc funcionaba genial, porque yo no tenia restriccion de internet, pero a los usuarios que si, se demoraba como 2 minutos en cargar, te recomendaria revisar los scripts para ver si pasa lo mismo. Commented el 4 oct. 2019 a las 13:18

1 respuesta 1

1

Intentaré dar respuesta a tus dudas, pero no es mi intención entrar al detalle porque la respuesta sería demasiado larga.

Lentitud en iniciarse una aplicación Angular:

Si tu aplicación es muy grande (muchos componentes, mucha lógica), puede fácilmente ocupar muchas decenas de MB. El navegador tiene que descargar todo los ficheros JS, compilarlos y ejecutarlos. Es el equivalente a descargarse una aplicación de escritorio, instalarla y ejecutarla cada vez que visitas la página, a menos que esté ya cacheada por el navegador.

Esto puedes comprobarlo viendo el tamaño de los ficheros js generados en tu carpeta ./dist con nombres como main-es2015.985f77de56cc1647a734.js.

Una solución que propone Angular es usar módulos con carga bajo demanda (lazy loading). Esto te permite dividir tu aplicación en varios módulos que sólo se cargarán cuando se van a usar, aligerando la carga inicial.

Limpiar código no usado

La funcionalidad del comando npx depcheck no creo que sea capaz de detectar los módulos usados por Typescript, lo que hace es mirar tu código Javascript. Por eso no detecta que estés usando ningún módulo.

Pero no deberías preocuparte mucho por esto: el compilador de Angular se encarga de eliminar todo código que no use tu aplicación mediante tree-shaking (literalmente, agitar el árbol para que las hojas secas (inútiles, que sólo añaden peso, caigan).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.