So, let\u2019s start with what is Lazy Loading?<\/h2>\n
Lazy loading, also known as on-demand loading, is an optimization technique that delays the loading or elements or components until they are brought into the viewport.<\/p>\n
When you log in to\/admin, you will come across a JavaScript code \u2018chunk\u2019 specially designed for the Admin dashboard. Likewise, when you load \/shop, you will get a similar \u201cchunk,\u201d specially written for the Shop! The code is lazy loaded and injected into the browser for the specific use of the Shop module. <\/p>\n
\r\nmain.chunk.js \/\/ loaded everywhere\r\nshop.chunk.js \/\/ lazy module\r\nadmin.chunk.js \/\/ lazy module\r\n<\/pre>\nIn a layman\u2019s term, while scrolling any eCommerce website, the bottom images of a page will only be displayed when the user scrolls there.<\/p>\n
Angular Lazy loading, why it needs your special attention and importance?<\/h2>\n
It is one of the proven ways to improve the performance of your website.<\/p>\n
- \n
- Reduce Page Load Time:<\/strong> Load only requested elements and helps to reduce the amount of data to be loaded.<\/li>\n
- Conserving Bandwidth:<\/strong> Helps to save bandwidth from the viewers as well as a web browser. Deliver only required content and refrain from sending unnecessary content. <\/li>\n
- Save System Resources:<\/strong> Render code only needed. Save memory resources.<\/li>\n<\/ul>\n
How to Implement Lazy Loading in Angular?<\/h2>\n
ngx-loadable is a lightweight package for implementing Angular lazy loading<\/a> components. It contains a simple API to support loading indicators.<\/p>\n
How to Implement ngx-loadable?<\/h2>\n
Stap 1.<\/strong> Install ngx-loadable in npm\/yarn and add LoadableModule in your AppModule.<\/p>\n
Stap 2.<\/strong> To add a module with a bootstrapped, follow the listed below command using Angular CLI.<\/p>\n
![\"add](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/add-a-module-with-a-bootstrapped.png\")
<\/p>\nMake sure that module, as well as component names are same.<\/p>\n
Adding components in the bootstrap is significant as well.<\/p>\n
![\"Adding](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Adding-components.png\")
\nStep 3.<\/strong>
\n![\"step](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/step-3-add.png\")
\nStep 4.<\/strong>
\n![\"step](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/step-4-add.png\")
<\/p>\nHovering on the mouse button, you will find that LoginModal Module is pre-loaded. When clicking shows it is still downloading, then LoginModalComponent loads in the ngx-loadable element.<\/p>\n
Configure ngx-loadable using custom paths. Bypassing configuration to the LoadableModule.<\/p>\n
![\"ngx-loadabl\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/ngx-loadabl.png\")
<\/p>\nLazy-loading non-routable modules\u2014ngx-loadable is a convenient approach to managing lazy loading in angular<\/a>.<\/p>\n
To boost the performance of your application, I strongly recommend it to optimize it step-by-step, instead of doing it all together in one big step. Once you follow the above steps and if you see a chunk, then you have configured it in the right way.<\/p>\n
- Conserving Bandwidth:<\/strong> Helps to save bandwidth from the viewers as well as a web browser. Deliver only required content and refrain from sending unnecessary content. <\/li>\n