Angular Lazy loading: различное поведение loadChildren

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

CoreModule, (импорт в модуль приложения)
SharedModule, (импортируется в каждый модуль)
ProjectsModule,
AuthModule

А это мой модуль маршрутизации приложений:

    { path: "",             redirectTo: "auth/sign-in", pathMatch: "full" },
// { path: "auth",      loadChildren: () => AuthModule }, // Bundled in main js file
{ path: "auth",         loadChildren: () => import("@core/auth/auth.module").then(p => p.AuthModule) },
{ path: "projects",     loadChildren: () => import("@projects/projects.module").then(p => p.ProjectsModule) }

при использовании синтаксиса динамического импорта в модуле маршрутизации корневого приложения пакеты javascript, загруженные в браузере, имеют следующие значения: (обновление / аутентификация / вход)

  • core-auth-auth-module.js
  • по умолчанию ~core-auth-auth-module~projects-projects-module.js
  • projects-projects-module.js (предварительная загрузка)

1- Так что же такое модули 1 и 2?

Затем, когда я использую синтаксис функции для loadchildren, первые 2 модуля не загружаются в браузере.

2- В чем разница?

Источник

1 ответ

Решение

Разница в том, что в случае использования import ключевое слово ваши модули загружаются лениво, пока loadChildren: () => AuthModule синтаксис объединит AuthModule в основной файл js.

- Так что же такое модули 1 и 2?

Вы сказали Angular(webpack) отложить загрузку AuthModule с помощью importключевое слово. Webpack заметил эту инструкцию и создал специальный ленивый блок с именем, основанным на пути к модулю:

import("@core/auth/auth.module")
               ||
               \/
      core-auth-auth-module.js chunk

Итак, первый кусок - это то, где вы AuthModule проживает.

Но Angular CLI использует webpack под капотом, и он творит чудеса за кулисами с помощью SplitChunksPlugin ref.

Этот плагин webpack пытается минимизировать дублирование в вашем коде и извлекать дополнительные пакеты из ленивых модулей.

default~core-auth-auth-module~projects-projects-module.js
                ||                        ||
                \/                        \/
            AuthModule                   ProjectsModule

Этот блок содержит общий код, общий для AuthModule а также ProjectsModule.

Вы также можете узнать подробности в моей статье:

Источник
Другие вопросы по тегам