Виктор Савкин - соучредитель nrwl.io, предоставляющий Angular консалтинг корпоративным командам. Ранее он входил в основную команду Angular в Google и создавал модули внедрения зависимостей, обнаружения изменений, форм и маршрутизатора.

Ленивая загрузка ускоряет время загрузки нашего приложения, разделяя его на несколько пакетов и загружая их по запросу. Мы разработали маршрутизатор, чтобы сделать отложенную загрузку прозрачной, поэтому вы можете легко включить и отключить отложенную загрузку.

Проблема с отложенной загрузкой, конечно, заключается в том, что, когда пользователь переходит в раздел приложения с отложенной загрузкой, маршрутизатор должен будет получить необходимые модули с сервера, что может занять время.

Чтобы решить эту проблему, мы добавили поддержку предварительной загрузки. Теперь маршрутизатор может предварительно загружать модули с отложенной загрузкой в ​​фоновом режиме, пока пользователь взаимодействует с нашим приложением.

Эта статья основана на книге Angular Router, которую вы можете найти здесь https://leanpub.com/router. Книга выходит за рамки руководства по началу работы и подробно рассказывает о маршрутизаторе. Мысленная модель, ограничения дизайна и тонкости API - все покрыто. Если вам понравилась статья, загляните в книгу!

Вот как это работает.

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

Затем мы загружаем приложение с помощью этого небольшого пакета.

На данный момент приложение запущено, поэтому пользователь может начать с ним взаимодействовать. Пока она это делает, мы в фоновом режиме предварительно загружаем другие модули.

Наконец, когда она нажимает на ссылку, ведущую к лениво загружаемому модулю, навигация происходит мгновенно.

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

Включение предварительной загрузки

Чтобы включить предварительную загрузку, нам нужно передать стратегию предварительной загрузки в forRoot.

Последняя версия маршрутизатора поставляется с двумя стратегиями: ничего предварительно не загружать и предварительно загружать все модули, но вы можете предоставить свои собственные. И на самом деле это намного проще, чем может показаться.

Пользовательская стратегия предварительной загрузки

Допустим, мы не хотим предварительно загружать все модули. Скорее, мы хотели бы прямо указать в конфигурации маршрутизатора, что должно быть предварительно загружено.

Начнем с создания индивидуальной стратегии предварительной загрузки.

Метод предварительной загрузки принимает два параметра: маршрут и функцию, которая фактически выполняет предварительную загрузку. В нем мы проверяем, установлено ли для свойства preload значение true. И если это так, мы вызываем функцию загрузки.

Наконец, нам нужно включить стратегию, указав ее в качестве поставщика и передав ее в RouterModule.forRoot.

Учить больше

Если вы хотите узнать больше о маршрутизаторе Angular, ознакомьтесь с моей книгой по этой теме: https://leanpub.com/router.

Виктор Савкин - соучредитель Nrwl. Мы помогаем компаниям развиваться, как Google, с 2016 года. Мы предоставляем консультации, инжиниринг и инструменты.

Если вам это понравилось, нажмите 👏 ниже, чтобы другие люди увидели это здесь, на Medium. Подпишитесь на @victorsavkin, чтобы узнать больше о монорепозиториях, Nx, Angular и React.