What are deferrable views?

A fully rendered Angular page may contain many different components, directives, and pipes. While certain parts of the page should be shown to the user immediately, there may be portions that can wait to display until later. Angular's deferrable views, using the @defer syntax, can help you speed up your application by telling Angular to wait to download the JavaScript for the parts of the page that don't need to be shown right away.

In this activity, you'll learn how to use deferrable views to defer load a section of your component template.

1. Add a @defer block to a section of a template

   In your app.component.ts, wrap the article-comments component with a @defer block to defer load it.

         
   @defer {  <article-comments />}
       

   By default, @defer loads the article-comments component when the browser is idle.

   In your browser's developer console, you can see that the article-comments-component lazy chunk file is loaded separately (The specific file names may change from run to run):

         
   Initial chunk files | Names                      |  Raw sizechunk-NNSQHFIE.js   | -                          | 769.00 kB | main.js             | main                       | 229.25 kB | Lazy chunk files    | Names                      |  Raw sizechunk-T5UYXUSI.js   | article-comments-component |   1.84 kB |
       

Great work! You’ve learned the basics of deferrable views.