Предзагрузка модулей в Ionic v4

Предзагрузка модулей в Ionic v4

В настоящее время я мигрирую свое мобильное приложение Fluster с Ionic v3 на v4. В следующей gif анимации за этим абзацем, вы сможете увидеть, как при заходе в приложение в самый первый раз пользователь сталкивается с небольшой задержкой причина которой проста – предзагрузка модулей ionic не сработала, т.к. оставшиеся (или еще не загруженные) модули lazy-loaded Angular route не до конца загрузились.

Ionic preload modules
Небольшая задержка при переходе

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

Проблема предзагрузки модулей в Ionic

Сначала я попробовал стратегию ” PreloadAllModules` прямо из angular core, которая, поверите или нет, оказала негативное влияние на мое время загрузки, делая его медленнее 😱. А я стараюсь избегать любой ценой медленную работу своего приложения . Медленная загрузка для меня это один из моих заклятых врагов  (сразу чувствуется боль кросплатформенной, ненативной разработки, прим. автора перевода)

Я попробовал эту стратегию по “прелоудингу” только для отдельного модуля моей страницы detail page. К сожалению, опять же, результаты не соответствовали моим ожиданиям. Модули были эффективно загружены слишком рано относительно моего потока или были загружены в то же время, что и модуль главной страницы, что снова замедлило время загрузки 😢.

 

ionic 4
Без “прелоудинга”

 

ionic 4 2
С предварительной загрузкой определенной страницы модули были загружены, но в одно и тоже время вместе со всеми модулями

Столкнувшись с этой ситуацией, я затем попробовал решение, описанное Adrian Faciu, которое работало хорошо, но только до некоторого предела. Модули страницы подробностей были эффективно загружены впоследствии. У меня было ощущение, что предзагрузка модулей ionic после задержки была немного “случайной” для моего конкретного случая

 

ionic 4
Предварительная загрузка модулей страницы detail page после задержки

Решение

К счастью, вместе с Аароном Стерлингом, во время обмена мыслями на Ionic форуме, мы смогли найти решение, которое соответствовало как моим потребностям, так и потребностям всего сообщества ionic developers

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

Реализация

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

import {PreloadingStrategy, Route} from '@angular/router';
import {Observable, of} from 'rxjs';
import {Injectable} from '@angular/core';

export interface RouteToPreload {
    routePath: string;
    route: Route;
    load: Function;
}

@Injectable({
    providedIn: 'root'
})
export class AppRoutingPreloaderService implements PreloadingStrategy {

    private routesToPreload: RouteToPreload[] = [];

    constructor() {
    }

    preload(route: Route, load: Function): Observable<any> {
        if (route.data && route.data.preload) {
            this.routesToPreload.push({
                routePath: route.path,
                route: route,
                load: load
            });
        }

        return of(null);
    }

    preloadRoute(path: string): Promise<void> {
        return new Promise<void>((resolve) => {
            if (this.routesToPreload && 
                this.routesToPreload.length > 0) {
                const routeToPreload: RouteToPreload = 
                    this.routesToPreload.find(
                       (filterRouteToPreload: RouteToPreload) =>
                       filterRouteToPreload.routePath === path);

                if (routeToPreload) {
                    routeToPreload.load();
                }
            }

            resolve();
        });
    }
}

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

Затем, как описано в других статьях, можно изменить маршрутизацию в app-routing.module.ts для того чтобы обеспечить “прелоуд” стратегией и указать, на какие маршруты будет распространяться {preload: true}:

const routes: Routes = [
     {
      path: 'main', 
      loadChildren: './pages/main.module#MainPageModule'
    },
    {
      path: 'detail',
      loadChildren: './pages/detail.module#DetailPageModule',
      data: {preload: true}
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, {preloadingStrategy: AppRoutingPreloaderService})],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

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

@Component({
    selector: 'app-main',
    templateUrl: './main.page.html',
    styleUrls: ['./main.page.scss'],
})
export class ItemsPage {
    
  constructor(private routingService: AppRoutingPreloaderService) {}
  async ionViewDidEnter() {
    await this.routingService.preloadRoute('details');
  }
}

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

 

ionic 4
Предварительная загрузка модулей страницы details после полной загрузки главной страницы

Вуаля✌️ решение еще необходимо протестировать на реальных устройствах, но я уверен, что теперь, когда мои пользователи будут использовать ionic v4 приложения, они не почувствуют никакой задержки 😉

ionic preload modules

Я надеюсь, что это решение поможет вам с предварительной загрузкой модулей в вашем великолепном приложении 😁

 

перевод статьи: https://medium.com/@david.dalbusco/preloading-modules-in-ionic-v4-1839c34384fb

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *