افزایش سرعت انگولار

۱- روش اول استفاده از LazyLoading یا (Optimize main bundle with Lazy Loading)

اگر ما برنامه های خود را بر اساس LazyLoading تولید نکنیم به احتمال زیاد شاهد generate فایل های زیر در فولدر dist خواهیم بود

polyfills.js

scripts.js

runtime.js

styles.css

main.js

polyfills.js برای سازگاری برنامه ما برای مرورگرهای مختلف استفاده میشه ، زیرا ما کد را با جدیدترین ویژگی ها می نویسیم و همه مرورگرها از چنین ویژگی هایی پشتیبانی نمی کنند.

scripts.js شامل اسکریپت هایی است که در بخش اسکریپت های فایل angular.json اعلام می کنیم.

runtime.js برای بارگزاری webpack مورد استفاده قرار می گیرد. این پرونده شامل برنامه های وب پک است که برای بارگذاری پرونده های دیگر مورد نیاز است

و style.css شامل همه style هایی است که ما در برنامه خود تعریف میکنیم

و در آخر main.js شامل تمام کدهای ما از جمله کامپوننت ها (کدهای ts ، html و css) و pipeline ها و directive ها و …. می شود

همانطور که مشاهده می کنید فایل main.js با گذشت زمان بزرگتر و بزرگتر خواهد شد ، این یک مشکل است زیرا برای دیدن مرورگر وب باید فایل main.js را بارگیری و اجرا کرد و در صفحه نمایش داد که نه تنها برای موبایل چالش برانگیز است، بلکه کاربران با اینترنت کند برای دسترسی به webapp نیز مشکل خواهند داشت!

ساده ترین راه حل این مسئله این است که برنامه خود را به چندین ماژول (Lazy Loading Module) تقسیم کنیم ، وقتی از ماژول های مجزا استفاده می کنیم ، برای هر ماژول وظایف مخصوص به خود ماژول را تولید می کنیم و تا زمانی ماژول مورد نظر مورد استفاده قرار نگیرد بارگیری نمی شود (معمولاً با فعال کردن مسیر).

برای نشان دادن این موضوع ، فرض کنید ما ۲ کامپوننت به اسم های app.component و second.component داریم که هر دوی این ها در app.module می باشند که در این صورت در اینجا هیچ LazyLoading ای موجود نمی باشد که app.component ما خیلی ساده تعریف شده که شامل ۲ دکمه هست که با زدن یکی به second.component میریم و با زدن دکمه Back به کامپوننت اصلی یعنی app.component میریم .

حال در نظر بگیرید که کامپوننت دوم ما یعنی second.component شامل یک متن خیلی طولانی هست مانند شکل زیر

از آنجایی که ما از هیج Lazy Loading ای استفاده نکرده ایم هنگام اجرای برنامه main.js ما به صورت کامل load میشود که شامل app.component و second.component هست و شامل تمام کدها می باشد!

حال اگر بخش network مرورگر خود را بررسی کنیم میبینیم که فایل main,js حجم خیلی زیادی دارد که ۱.۳ مگابایت می باشد.

مشکل این است که بیشتر اوقات کاربران به جای یک صفحه خاص از صفحه اصلی بازدید می کنند ، بنابراین بارگیری کد همه صفحات بهترین راه حل نیست. ما می توانیم برای مولفه دوم ماژول ایجاد کنیم و فقط در صورت نیاز ماژول فعال می شود (یعنی فقط وقتی کاربر به آن صفحه می رود). که در این صورت باعث میشه حجم main.js خیلی کم بشه و سرعت لود صفحه بسیار زیاد بشه .

حال زمانی که ما از LazyLoading استفاده کنیم بعد از ساختن یک ماژول جداگانه برای کامپوننت دوم و بارگزاری آن در صورت نیاز میبینیم که حجم فایل main.js ما خیلی کم میشه

با وجود این نیز بارگزاری هر بخش یا هر قطعه که ایجاد کردیم نیز برعملکرد برنامه تاثیر خواهد گزاشت چرا که navigate اولیه کند خواهد بود ، خوشبختانه انگولار راه حلی را برای این مسئله با استفاده از PreloadingStrategy فراهم کرده است ، ما میتوانیم به انگولار بگیم که در صورت بارگزاری و اجرای کامل main.js ما ، اونو load کنه

بنابراین هر زمان که کاربران به ماژول موردنظر لینک میشن در این صورت ماژول موردنظر کامل load میشه

بنابراین بهتر است در اکثر موارد این استراتژی رو به کار بگیرید و با در نظر گرفتن lazy loading باعث لود شدن سریع صفحات برنامه خود شوید.

منبع

https://fardadyadegar.ir/