Return to site

ANGULAR INTERVIEW QUESTION: Why using lazy loading in your application ?

ยท ngInterview,fullstack

Lazy loading is a one of the most powerful ๐Ÿ’ช feature to strengthen Angular application performances.

As component additions progress, the Angular app gets bigger and heavier. ๐Ÿชจ

Then, at some point, the app takes so much time to load (3s, 4s...) that users leave it. โ˜น๏ธ

There, lazy-loading enters the game ๐Ÿง‘โ€๐ŸŽค by loading a module only if the user need it (when he goes to the related URL),

so if the user does not browse the URL of a module, that app does not load the module linked to that URL ๐Ÿฆธโ€โ™‚๏ธ.

๐‡๐ž๐ซ๐ž ๐š๐ซ๐ž ๐ญ๐ก๐ž ๐š๐๐ฏ๐š๐ง๐ญ๐š๐ ๐ž๐ฌ ๐จ๐Ÿ ๐ฅ๐š๐ณ๐ฒ-๐ฅ๐จ๐š๐๐ข๐ง๐ :

๐Ÿ‘‰ The initial application loading is by far faster โฉ , because you only load a module rather than all the app modules.

๐Ÿ‘‰ You can load features on demand ๐Ÿ™ . You accelerate that way the loading time for the users going only on some parts of the app.

๐Ÿ‘‰ You can add new features without slowing down the whole app (consuming network bandwidth โšก only for the feature module, while a monolith app would consume wider bandwidth for all the features at the same time)

๐Ÿ‘‰ This forces you to better architect ๐Ÿ—บ๏ธ your app, because all asynchronous routes (URL) are based on lazy-loading. You have consequently to cut โœ‚๏ธ your app, by grouping each feature in a module.

๐’๐จ ๐ฅ๐š๐ณ๐ฒ-๐ฅ๐จ๐š๐๐ข๐ง๐  ๐ข๐ฆ๐ฉ๐ซ๐จ๐ฏ๐ž๐ฌ ๐ฉ๐ž๐ซ๐Ÿ๐จ๐ซ๐ฆ๐š๐ง๐œ๐ž๐ฌ, ๐š๐ง๐ ๐ข๐ญ ๐ข๐ฌ ๐ญ๐ก๐ž ๐Ÿ๐ข๐ซ๐ฌ๐ญ ๐›๐ž๐ฌ๐ญ ๐ฉ๐ซ๐š๐œ๐ญ๐ข๐œ๐ž ๐š๐œ๐œ๐จ๐ซ๐๐ข๐ง๐  ๐ญ๐จ ๐†๐จ๐จ๐ ๐ฅ๐ž ๐ญ๐จ ๐ฌ๐ฉ๐ž๐ž๐ ๐ฎ๐ฉ ๐ฒ๐จ๐ฎ๐ซ ๐š๐ฉ๐ฉ.