https://virgool.io/feed/@lotfiniamail پدر، برنامه نویس، عاشق قهوه fa 2026-06-16 11:06:15 https://files.virgool.io/upload/users/1754752/avatar/avatar.png?height=120&width=120 https://virgool.io/@lotfiniamail https://virgool.io/@lotfiniamail/%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF-angular-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-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=&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 truelet conditionFlag = false;@defer (when conditionFlag) { <large-cmp /> }نتیجه‌گیریساختار Deferrable Views در Angular ابزاری قوی برای بهینه‌سازی بارگذاری اولیه و بهبود تجربه کاربری هستند که با استفاده هوشمندانه می‌توانند زمان رندر اولیه را کاهش داده و عملکرد کلی اپلیکیشن را ارتقاء دهند.#angular احسان لطفی نیا احسان لطفی نیا Tue, 13 May 2025 09:44:46 +0330