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

Question

Я использую ленивую загрузку в моем приложении.Но мой рекомендуемый модуль требует времени для загрузки, когда я посещаю этот маршрут.Поэтому, чтобы сократить это время загрузки, я использую Angular Preloading Strategy.Но из-за этого время начальной загрузки приложения увеличивается.

В идеале модуль функций должен загружаться в фоновом режиме и не должен увеличивать время начальной загрузки.

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

RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})

В чем может быть проблема?

Answer 1

Да.Так работает стратегия предварительной загрузки в Angular.Всякий раз, когда какой-либо модуль предварительно загружен, он загружается в фоновом режиме после загрузки всех загруженных и требующих лени загрузки модулей.После этого начинается предварительная загрузка модулей.Поскольку все предварительно загруженные модули сначала компилируются и загружаются в случае обычной сборки и сборки dev (не aot build), что увеличивает время загрузки текущего модуля.

Но в aot build эта проблема не возникнет, так как большинствовремя используется при компиляции модуля, который будет пропущен при сборке.

Answer 2

Спасибо, @wentjun. Я попытался с помощью пользовательского preloader, а также. Вопрос остается прежним. Всякий раз, когда эти модули загружаются, экран зависает. Похоже, что сборка требует времени для компиляции. Но, к счастью, я попытался развернуть изменения и обнаружил, что эта проблема отсутствует в производстве из-за aot.

Answer 3

Даже у меня та же проблема, я решил это, удалив preloadingStrategy, вместо этого Я держу загрузчик на изменении маршрута в app.component. ts,

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

isLoading : boolean = false;

this.router.events.subscribe((event: Event) => {
   switch(true) {
     case event instanceof NavigationStart: {
       this.isLoading = true;
       break;
     }

     case event instanceof NavigationCancel:
     case event instanceof NavigationError:
     case event instanceof NavigationEnd: {
      this.isLoading = false;
      break;
    }
     default: {

      }
   }
 })

• ............ Загрузка ...........