Home / Questions / 298440
Accepted
Emiliano Torres
Asked: 2020-10-05 04:57:25 +0800 CST 2020-10-05 04:57:25 +0800 CST

Angular 7 - Very slow at first load. packages unused

  • 772

I have a crm developed in Angular 7. At the time of the first entry (login), it takes almost 2 minutes to render the login screen. Once those 2 minutes have passed, no matter how many times I log out and log back in, it works very well and very smoothly. I suspect that package and components have been installed and that they are not used, which makes the app heavy on first load (it has nothing cached). Now... googling I found that the command exists:

npx depcheck

that analyzes the packages and others that are not used. The drawback is that the list of the NOT used appears to me, among others @angular/common, and that package or library I am using... sure, among them I use the Location. Another one I use is @angular/material because I use table. I show you an image of what it tells me that I do not use and some part of the code where I use it:

enter image description here

enter image description here

enter image description here

The same thing happens to me with the angular material table, I figure that @angular/material is unused but I use it. So the question is... how can I know which components or packages are not being used and remove them to see if the first load of the crm is relieved. Thanks in advance.

npm

1 Answers

  1. Best Answer

    I will try to answer your questions, but it is not my intention to go into detail because the answer would be too long.

    Slow to start an Angular application:

    If your application is very large (lots of components, lots of logic), it can easily take up many tens of MB. The browser has to download all the JS files, compile them and run them. It is the equivalent of downloading a desktop application, installing it and running it every time you visit the page, unless it is already cached by the browser.

    You can check this by looking at the size of the generated js files in your folder ./distwith names like main-es2015.985f77de56cc1647a734.js.

    A solution that Angular proposes is to use modules with load on demand (lazy loading) . This allows you to split your application into several modules that will only be loaded when they are going to be used, lightening the initial load.

    Clean unused code

    npx depcheckI don't think the functionality of the command is able to detect the modules used by Typescript, what it does is look at your Javascript code. That is why it does not detect that you are using any module.

    But you shouldn't worry too much about this: the Angular compiler takes care of removing all code that your application doesn't use through tree-shaking (literally, shaking the tree so that the dry leaves (useless, that only add weight, fall).

    • 1