کارایی
Angular بهصورت پیشفرض بهینهسازیهای فراوانی دارد، اما با رشد برنامهها ممکن است لازم باشد هم سرعت بارگذاری برنامه و هم میزان پاسخگویی آن هنگام استفاده را دقیقتر تنظیم کنید. این راهنماها ابزارها و روشهایی را پوشش میدهند که Angular برای ساخت برنامههای سریع در اختیار شما میگذارد.
کارایی بارگذاری
کارایی بارگذاری تعیین میکند برنامهٔ شما با چه سرعتی قابل مشاهده و تعاملی میشود. بارگذاری کند مستقیماً بر Core Web Vitals مانند Largest Contentful Paint (LCP) و Time to First Byte (TTFB) اثر میگذارد.
| روش | کاری که انجام میدهد | زمان مناسب استفاده |
|---|---|---|
| routeهای lazy-loaded | بارگذاری componentهای route را تا زمان پیمایش به تعویق میاندازد و اندازهٔ bundle اولیه را کاهش میدهد | برنامههای دارای چندین route که در بارگذاری اولیه به همهٔ آنها نیاز نیست |
بارگذاری با تأخیر به کمک @defer | componentها را به bundleهای جداگانه تقسیم میکند که در صورت نیاز بارگذاری میشوند | componentهایی که در رندر اولیه دیده نمیشوند، کتابخانههای سنگین شخص ثالث و محتوای پایینتر از بخش قابل مشاهده |
بارگذاری lazy سرویسها با injectAsync | serviceهایی را که بهندرت استفاده میشوند به chunkهای جداگانه تقسیم میکند و در صورت نیاز بارگذاری میکند | serviceهای متکی بر کتابخانههای بزرگ یا قابلیتهایی که بهندرت استفاده میشوند |
| بهینهسازی تصویر | تصویرهای LCP را در اولویت قرار میدهد، سایر تصویرها را بهصورت lazy بارگذاری میکند و attributeهای واکنشگرای srcset میسازد | هر برنامهای که تصویر نمایش میدهد |
| رندر سمت server | صفحهها را برای اولین نمایش سریعتر و SEO بهتر روی server رندر میکند؛ با hydration تعاملپذیری را بازمیگرداند و با hydration تدریجی انجام hydration بخشها را تا زمان نیاز به تعویق میاندازد | برنامههای محتوایی و صفحههایی که باید توسط موتورهای جستوجو index شوند |
کارایی زمان اجرا
کارایی زمان اجرا تعیین میکند برنامهٔ شما پس از بارگذاری تا چه اندازه پاسخگو به نظر میرسد. سیستم change detection در Angular، DOM را با دادههای شما همگام نگه میدارد و بهینهسازی زمان و شیوهٔ اجرای آن، مهمترین اهرم برای بهبود کارایی زمان اجراست.
| روش | کاری که انجام میدهد | زمان مناسب استفاده |
|---|---|---|
| change detection بدون Zone | سربار ZoneJS را حذف میکند و change detection را فقط زمانی اجرا میکند که Signalها یا eventها تغییری را نشان دهند | برنامههای جدید (حالت پیشفرض در Angular v21+) یا برنامههای موجودی که آمادهٔ مهاجرت هستند |
| محاسبات کند | عبارتهای پرهزینهٔ template و lifecycle hookها را شناسایی و بهینه میکند | زمانی که profiling نشان دهد componentهای مشخصی باعث کندی چرخههای change detection میشوند |
| نادیدهگرفتن زیردرختهای component | از change detection نوع OnPush برای نادیدهگرفتن درختهای component بدون تغییر استفاده میکند | برنامههایی که به کنترل دقیقتر change detection نیاز دارند |
| آلودگی Zone | از change detection غیرضروری ناشی از کتابخانههای شخص ثالث یا timerها جلوگیری میکند | برنامههای مبتنی بر Zone که profiling در آنها چرخههای بیشازحد change detection را نشان میدهد |
اندازهگیری کارایی
تشخیص اینکه چه چیزی را باید بهینه کنید، بهاندازهٔ دانستن روش بهینهسازی اهمیت دارد. Angular با ابزارهای توسعهدهندهٔ مرورگر یکپارچه میشود تا در یافتن گلوگاهها به شما کمک کند.
| ابزار | کاری که انجام میدهد |
|---|---|
| profiling با Chrome DevTools | دادههای کارایی مختص Angular را در کنار profiling مرورگر ثبت میکند و با نمودارهای flame رنگبندیشده، رندر component، چرخههای change detection و lifecycle hookها را نشان میدهد |
| Angular DevTools | افزونهای برای مرورگر که ابزار بررسی درخت component و profilerی برای نمایش بصری چرخههای change detection فراهم میکند |
ابتدا چه چیزی را بهینه کنیم
اگر نمیدانید از کجا شروع کنید، ابتدا با استفاده از track مربوط به Angular در Chrome DevTools برنامهٔ خود را profile کنید تا گلوگاههای مشخص را بیابید.
بهعنوان نقطهٔ شروع کلی:
- بارگذاری اولیهٔ کند — از
@deferبرای خارجکردن componentهای بزرگ از bundle اصلی، ازNgOptimizedImageبرای اولویتدادن به تصویرهای بخش قابل مشاهده و از رندر سمت server برای تحویل سریعتر محتوا استفاده کنید. - تعاملهای کند پس از بارگذاری — بررسی کنید change detection بدون Zone فعال باشد، در templateها یا lifecycle hookها بهدنبال محاسبات کند بگردید و برای کاهش change detection غیرضروری، استفاده از
OnPushرا در نظر بگیرید.