Что такое откладываемые представления?

Полностью отрисованная страница Angular может содержать множество различных компонентов, директив и пайпов. Хотя определенные части страницы должны быть показаны пользователю немедленно, могут быть и такие части, отображение которых может подождать. Откладываемые представления (deferrable views) в Angular, использующие синтаксис @defer, помогают ускорить ваше приложение. Они сообщают Angular, что загрузку JavaScript для частей страницы, которые не нужно показывать сразу, следует отложить.

В этом упражнении вы узнаете, как использовать откладываемые представления для отложенной загрузки секции шаблона вашего компонента.

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

   В файле app.ts оберните компонент article-comments в блок @defer для его отложенной загрузки.

   @defer {
     <article-comments />
   }

   По умолчанию @defer загружает компонент article-comments, когда браузер находится в состоянии простоя (idle).

   В консоли разработчика в браузере вы можете увидеть, что файл lazy-чанка article-comments-component загружается отдельно (конкретные имена файлов могут меняться от запуска к запуску):

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

Отличная работа! Вы изучили основы откладываемых представлений.