بهینه‌سازی عملکرد Angular با استفاده از Deferrable Views

قابلیت بارگذاری تأخیری (Deferrable Views) در Angular 17 با استفاده از بلوک‌های `@defer` معرفی شد و امکان بارگذاری جداگانه و در زمان نیاز کامپوننت‌ها، دایرکتیوها و پایپ‌های غیرضروری را فراهم می‌کند. این ویژگی باعث کاهش حجم اولیه، بهبود معیارهای LCP و TTFB و ارتقاء تجربه کاربری می‌شود.

کاربران امروزی انتظار بارگذاری سریع و تجربه کاربری منعطف را دارند. Angular با ارائه `@defer` این نیاز را با بارگذاری دقیق و به موقع بخش‌های قالب پوشش می‌دهد

تعریف Deferrable Views

اصلاح Deferrable Views یا بلوک‌های `@defer` قسمتی از قالب را که نیاز به بارگذاری جداگانه دارد، مشخص می‌کند. تنها کامپوننت‌ها، دایرکتیوها و پایپ‌های standalone می‌توانند از این ساختار استفاده کنند.

مزایا

• کاهش حجم بسته اولیه: انتقال کد غیرضروری به بسته‌های جداگانه منجر به بهبود زمان دریافت اولین بایت می‌شود .
• بهبود Web Vitals: بارگذاری تأخیری باعث بهبود LCP و TTFB می‌شود.
• ارتقاء تجربه کاربری: محتوای اصلی سریع نمایش داده شده و سایر بخش‌ها در پس‌زمینه یا بر اساس تعامل بارگذاری می‌شوند.

نحوه استفاده

در زیر مثالی ساده از نحوه استفاده @defer نمایش داده شده است.

@defer (on viewport) {

    <large-component />

} @loading(after 100ms; minimum 1s) {

    <img alt=&quotloading...&quot src=&quotloading.gif&quot />

} @placeholder(minimum 500ms) {

    <p>Placeholder content</p>

}@error {  
  <p>Failed to load large component.</p>
}

• بلاک defer: بارگذاری تأخیری یک بخش از نما را زمانی که نیاز است به‌صورت غیرهمزمان انجام می‌دهد.
• بلاک loading: محتوایی که هنگام بارگذاری داده‌ها به‌صورت موقت نمایش داده می‌شود.
• بلاک placeholder: یک فضای خالی یا طرح اولیه برای زمانی که داده‌ها هنوز آماده نیستند.
• بلاک error: نمایش پیغام خطا در صورت شکست در بارگذاری داده‌ها.

ورودی های بلاک defer

بطور کلی دو ورودی on و when در ورودی این بلاک قابل تعریف است که on برای تعریف یک رویداد خاص مانند نمایش viewport و when برای تعریف یک شرط در نمایش defer کاربرد دارد به حالت های مختلف در مثال زیر دقت کنید.

<!-- Load component when it appears in the viewport -->

@defer (on viewport) { <large-cmp /> }

<!-- Reference element for deferred loading -->

<div #greeting>Hello!</div>

<!-- Load component when the greeting element enters the viewport -->

@defer (on viewport(greeting)) { <greetings-cmp /> }

<!-- Load component upon user interaction (e.g., click) -->

@defer (on interaction) { <large-cmp /> }

<!-- Reference element for interaction-based loading -->

<div #greeting>Hello!</div>

<!-- Load component when interacting with the greeting element -->

@defer (on interaction(greeting)) { <greetings-cmp /> }

<!-- Load component when hovered over -->

@defer (on hover) { <large-cmp /> }

<!-- Reference element for hover-based loading -->

<div #greeting>Hello!</div>

<!-- Load component when hovering over the greeting element -->

@defer (on hover(greeting)) { <greetings-cmp /> }

<!-- Load component immediately without delay -->

@defer (on immediate) { <large-cmp /> }

<!-- Load component after a delay of 500 milliseconds -->

@defer (on timer(500ms)) { <large-cmp /> }

// Load component only if the conditionFlag is true

let conditionFlag = false;

@defer (when conditionFlag) { <large-cmp /> }

نتیجه‌گیری

ساختار Deferrable Views در Angular ابزاری قوی برای بهینه‌سازی بارگذاری اولیه و بهبود تجربه کاربری هستند که با استفاده هوشمندانه می‌توانند زمان رندر اولیه را کاهش داده و عملکرد کلی اپلیکیشن را ارتقاء دهند.

#angular