استراتژی های پیش بارگذاری مسیر در Angular

برای سرعت بخشیدن به ناوبری کاربران، مسیرها را از قبل بارگیری کنید.

Minko Gechev

تقسیم کد در سطح مسیر می تواند به شما کمک کند تا زمان بارگذاری اولیه برنامه را با تأخیر در جاوا اسکریپت مرتبط با مسیرهایی که در ابتدا مورد نیاز نیستند، کاهش دهید. به این ترتیب، روتر Angular قبل از شروع درخواست شبکه برای دانلود جاوا اسکریپت مرتبط، منتظر می‌ماند تا کاربر به مسیر مشخصی هدایت شود.

در حالی که این تکنیک برای بارگذاری اولیه صفحه عالی است، بسته به تأخیر شبکه و پهنای باند کاربران، می تواند ناوبری را کاهش دهد. یکی از راه‌های مقابله با این مشکل ، بارگذاری پیش‌فرض مسیر است. با استفاده از بارگذاری اولیه، زمانی که کاربر در یک مسیر مشخص است، می‌توانید جاوا اسکریپت مرتبط با مسیرهایی را که احتمالاً در آینده مورد نیاز هستند، دانلود و ذخیره کنید. روتر Angular این قابلیت را خارج از جعبه فراهم می کند.

در این پست، نحوه افزایش سرعت ناوبری هنگام استفاده از تقسیم کد در سطح مسیر با استفاده از پیش بارگذاری جاوا اسکریپت در Angular را خواهید آموخت.

استراتژی های پیش بارگذاری مسیر در Angular

روتر Angular یک ویژگی پیکربندی به نام preloadingStrategy را ارائه می‌کند که منطق پیش‌بارگذاری و پردازش ماژول‌های Angular با بارگذاری تنبل را تعریف می‌کند. ما دو استراتژی ممکن را پوشش خواهیم داد:

• PreloadAllModules ، که تمام مسیرهای بارگذاری شده را از قبل بارگذاری می کند، همانطور که از نام آن پیداست
• QuicklinkStrategy ، که فقط مسیرهای مرتبط با پیوندهای صفحه فعلی را از قبل بارگیری می کند.

بقیه این پست به نمونه برنامه Angular اشاره دارد. می توانید کد منبع را در GitHub پیدا کنید.

با استفاده از استراتژی PreloadAllModules

برنامه نمونه چندین مسیر تنبل دارد. برای پیش بارگذاری همه آنها با استفاده از استراتژی PreloadAllModules - که در Angular تعبیه شده است - آن را به عنوان مقدار خاصیت preloadingStrategy در پیکربندی روتر مشخص کنید:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

اکنون برنامه را اجرا کنید و به پنل Network در Chrome DevTools نگاه کنید:

1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
2. روی تب Network کلیک کنید.

هنگام باز کردن برنامه، باید ببینید که روتر nyan-nyan-module.js و about-about-module.js را در پس‌زمینه دانلود کرده است:

روتر همچنین اعلامیه‌های مسیر ماژول‌ها را ثبت می‌کند تا وقتی به URL مرتبط با هر یک از ماژول‌های از پیش بارگذاری‌شده هدایت می‌شوید، انتقال آنی است.

با استفاده از استراتژی پیش بارگذاری Quicklink

PreloadAllModules در بسیاری از موارد مفید است. با این حال، وقتی ده‌ها ماژول دارید، پیش‌بارگذاری تهاجمی آن واقعاً می‌تواند استفاده از شبکه را افزایش دهد. همچنین، از آنجایی که روتر باید مسیرها را در همه ماژول‌های از پیش بارگذاری شده ثبت کند، می‌تواند باعث محاسبات فشرده در رشته UI شود و منجر به تجربه کاربر کند شود.

کتابخانه Quicklink استراتژی بهتری را برای برنامه های بزرگتر ارائه می دهد. از IntersectionObserver API استفاده می کند تا فقط ماژول های مرتبط با پیوندهایی را که در حال حاضر در صفحه قابل مشاهده هستند از قبل بارگذاری کند.

با استفاده از بسته ngx-quicklink می توانید Quicklink را به یک برنامه Angular اضافه کنید. با نصب بسته از npm شروع کنید:

npm install --save ngx-quicklink

هنگامی که در پروژه شما در دسترس است، می توانید با مشخص کردن preloadingStrategy روتر و وارد کردن QuicklinkModule QuicklinkStrategy استفاده کنید:

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

اکنون وقتی دوباره برنامه را باز می کنید، متوجه می شوید که روتر فقط nyan-nyan-module.js را از قبل بارگذاری می کند زیرا دکمه ای که در مرکز صفحه قرار دارد یک پیوند روتر به آن دارد. و وقتی پیمایش جانبی را باز می‌کنید، متوجه می‌شوید که روتر مسیر «درباره» را از قبل بارگیری می‌کند:

با استفاده از استراتژی پیش بارگذاری Quicklink در چندین ماژول با بارگذاری تنبل

مثال بالا برای یک برنامه اصلی کار می کند، اما اگر برنامه شما حاوی چندین ماژول با بارگذاری تنبل است، باید QuicklinkModule را به یک ماژول مشترک وارد کنید، آن را صادر کنید و سپس ماژول مشترک را به ماژول های بارگذاری شده با تنبلی وارد کنید.

ابتدا QuicklinkModule را از ngx-quicklink به ماژول مشترک خود وارد کرده و آن را صادر کنید:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

سپس SharedModule خود را به همه ماژول های لود شده با تنبلی وارد کنید:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks اکنون در ماژول های لود شده شما در دسترس خواهند بود.

فراتر از بارگذاری اولیه اولیه

در حالی که پیش‌بارگیری انتخابی از طریق Quicklink می‌تواند سرعت ناوبری را به میزان قابل توجهی افزایش دهد، می‌توانید با استفاده از پیش‌بارگیری پیش‌بینی‌کننده - که توسط Guess.js پیاده‌سازی می‌شود، استراتژی پیش‌بارگیری شبکه را حتی کارآمدتر کنید. با تجزیه و تحلیل یک گزارش از Google Analytics یا دیگر ارائه‌دهنده تجزیه و تحلیل، Guess.js می‌تواند سفر پیمایش کاربر را پیش‌بینی کند و فقط تکه‌های جاوا اسکریپت را که احتمالاً در مرحله بعدی مورد نیاز است، از قبل بارگذاری کند.

می توانید نحوه استفاده از Guess.js با Angular را در این صفحه از سایت Guess.js بیاموزید.

نتیجه گیری

برای سرعت بخشیدن به ناوبری هنگام استفاده از تقسیم کد در سطح مسیر:

1. بسته به اندازه برنامه خود، استراتژی پیش بارگیری مناسب را انتخاب کنید:
   • برنامه های کاربردی با ماژول های کمی می توانند از استراتژی داخلی PreloadAllModules Angular استفاده کنند.
   • برنامه‌هایی که دارای ماژول‌های زیادی هستند باید از یک استراتژی پیش‌بارگیری سفارشی، مانند پیوند سریع Angular یا پیش‌بارگذاری پیش‌بینی، همانطور که در Guess.js پیاده‌سازی شده است، استفاده کنند.
2. با تنظیم ویژگی preloadStrategy روتر Angular، استراتژی پیش بارگذاری را پیکربندی کنید.