Как проверить, работает ли Angular Module Lazy Loading в Chrome?

Question

Как проверить, загружены ли файлы js для модуля, открытого с помощью инструментов разработчика Chrome?

Answer 1

Чтобы убедиться, что Lazy Loading работает.В Chrome

Шаг 1 - откройте инструменты разработчика, нажав F12 или Ctrl + Shift + i

Шаг 2 - перейдите на вкладку Сеть.

При переходе на ленивый URL-адрес вы увидите файл 0.chunk.js .

Answer 2

помимо других правильных ответов, вы можете использовать инструмент Augury, чтобы определить, какой модуль и компонент загружены лениво, Angular Augury - это расширение для Chrome и Firefox Dev Tools для отладки приложений Angular.

• после того, как вы установите его и запустите свое угловое приложение, вы можете перейти к инструментам разработчика и щелкнуть на вкладке Augury, где сначала отобразится дерево компонентов:

• затем вы нажимаете вкладку Дерево маршрутизатора , и это интересная часть, которая показывает, какой модуль / компонент загружен динамически, а какой - lazily следующим образом:

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

Answer 3

В соответствии с Руководством по отложенной загрузке Angular :

Вы можете проверить, действительно ли модуль загружается с помощью инструментов разработчика Chrome.В Chrome откройте инструменты разработчика, нажав Cmd + Option + i на Mac или Ctrl + Alt + i на ПК, и перейдите на вкладку «Сеть».

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

ПРИМЕЧАНИЕ: Еще одна важная проверка - убедиться, что загруженный модуль лениво не загружен снова.Для подтверждения перейдите на другой маршрут, а затем снова нажмите «Действие», и на этот раз он не будет выполнять сетевой вызов для загрузки чанка, поскольку он уже был загружен.