https://virgool.ir/feed/@lotfiniamailپدر، برنامه نویس، عاشق قهوهfa2026-11-11 22:14:21https://files.virgool.ir/upload/users/1754752/avatar/avatar.pnghttps://virgool.ir/@lotfiniamailhttps://virgool.ir/@lotfiniamail/بهینه-سازی-عملکرد-angular-با-استفاده-از-deferrable-views-yk0vl7rja1cv Deferrable Views in Angularقابلیت بارگذاری تأخیری (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="loading..." src="loading.gif" />} @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 truelet conditionFlag = false;@defer (when conditionFlag) { <large-cmp /> }نتیجه‌گیریساختار Deferrable Views در Angular ابزاری قوی برای بهینه‌سازی بارگذاری اولیه و بهبود تجربه کاربری هستند که با استفاده هوشمندانه می‌توانند زمان رندر اولیه را کاهش داده و عملکرد کلی اپلیکیشن را ارتقاء دهند.#angularاحسان لطفی نیااحسان لطفی نیاTue, 13 May 2025 09:44:46 +0330