چگونه کدهای جاوا اسکریپت اضافی را حذف کنیم؟

تحریریه منتوریکس
تحریریه منتوریکس
00:44، 1400/03/16
چگونه کدهای جاوا اسکریپت اضافی را حذف کنیم؟
1 رای    میانگین 5/5
لطفا شما هم امتیاز بدهید!

چگونه کدهای جاوا اسکریپت اضافی را حذف کنیم؟


Npm به کد شما روح جدیدی می‌دهد؛ اما آیا واقعاً می‌خواهید از این چند بایت حجم اضافی استفاده کنید؟ ریجیستری‌هایی همانند npm باعث سهولت دسترسی به انواع جاوا اسکریپت شده‌اند. npm نیم میلیون پکیج عمومی کد‌های جاوا اسکریپت را در اختیار شما قرار می‌دهد؛ اما خب تمامی این کتابخانه‌ها کارایی ندارند. برای حل کردن این مشکل می‌توانید از Analyze Your Bundle استفاده کنید تا تمامی کدهای اسکریپت اضافی که کارایی ندارند را شناسایی کنید. در مرحله بعد می‌توانید کتابخانه‌هایی که از آن‌ها استفاده نمی‌شوند و به آن‌ها نیازی ندارید را پاک کنید. در ادامه این مطلب از منتوریکس همراه ما  باشید تا روش حذف کردن کدهای جاوا اسکریپت اضافی را به شما بیاموزیم.

Analyze Your Bundle

ابزار DevTools به شما اجازه می‌دهد تا سایز تمام نتورک ریکوست‌ها یا همان درخواست‌های شبکه را مشاهده کنید. برای این کار مراحل زیر را به ترتیب پشت سر بگذارید:

  1. از کلیدهای ترکیبی CTRL+Shift+J در ویندوز و از کلیدهای ترکیبی CMD+OPT+J در مک استفاده کنید تا DevTools باز شود.
  2. حالا بر روی تب Networkکلیک کنید.
  3. تیک Disable Cacheرا بزنید.
  4. صفحه را ریلود کنید.

کدهای جاوا اسکریپت اضافی

از تب Coverage در ابزار DevTools می‌توانید استفاده کنید تا ببینید چه مقدار کد JS و CSS در اپلیکیشن شما بدون استفاده هستند.

کدهای جاوا اسکریپت اضافی

با استفاده از پیکربندی کامل Lighthouse می‌توانید تمام جاوا اسکریپت‌های اضافی که استفاده نمی‌شوند را نیز پیدا کنید. Lighthouse این کار را با کمک Node CLI انجام می‌دهد. با استفاده از این روش می‌توانید ببینید که چه میزان کدهای اضافی که استفاده نمی‌شوند در اپلیکیشن شما وجود دارند.

کدهای جاوا اسکریپت اضافی

اگر از وب پکیج به‌عنوان باندلر خودتان استفاده می‌کنید، ابزار WebPack Bundle Analyzer به شما کمک می‌کند تا تشخیص دهید که این باندل چه اجزایی دارد. این شامل پلاگین‌های پیکربندی وب پک و سایر پلاگین‌ها می‌شود: 

کدهای جاوا اسکریپت اضافی
با وجود آن‌که معمولاً از وب پک برای ساخت یک اپلیکیشن تک صفحه استفاده می‌شود؛ اما باندرلرهای دیگر همانند Parcel  و Rollup دارای ابزارهای بصری هستند که از آن‌ها می‌توانید برای آنالیز باندل خودتان استفاده کنید.
حالا با استفاده از این پلاگین، اپلیکیشن را ریلود کنید تا یک نمودار درختی از تمام باندل‌تان را مشاهده نمایید. این نمودار درختی دارای قابلیت بزرگ‌نمایی است تا بخش‌های مختلف آن را نیز مشاهده کنید.

کدهای جاوا اسکریپت اضافی

با استفاده از این ابزار بصری شما متوجه می‌شوید کدام قسمت از bundle بزرگ‌تر از قسمت‌های دیگر است. این نمودار به شما دید بهتری از تمام کتابخانه‌هایی که وارد اپلیکیشن می‌کنید نیز به شما می‌دهد. همین قابلیت به شما این امکان را خواهد داد تا متوجه شوید آیا از کتابخانه‌های غیرضروری و اضافی استفاده می‌کنید یا نه.

پاک کردن کتابخانه‌هایی که از آن‌ها استفاده نمی‌شود

در نمودار درختی قبلی که مشاهده کردید، پکیج‌های کمی با تک دامین @firebase وجود دارند. اگر وبسایت شما فقط به اجزای فایربیس دیتابیس نیاز داشته باشد، برای فتچ کردن آن کتابخانه، باید import ها را به شکل زیر آپدیت کنید: 

پاک کردن کتابخانه‌هایی که از آن‌ها استفاده نمی‌شود
توجه داشته باشید که این فرآیند برای اپلیکیشن‌های بزرگ‌تر، پیچیده‌تر خواهد بود.
اگر یک پکیج را پیدا کردید که خیلی عجیب است و تقریباً در هیچ کجای اپلیکیشن کاربرد ندارد، یک قدم به عقب بردارید و ببینید کدام top-level dependencies (پکیج‌هایی با اولویت بالا) از آن استفاده می‌کنند. در این مواقع به‌دنبال راهی باشید تا فقط اجزایی را import کنید که به آن نیاز دارید. اگر شما از هیچ یک از قسمت‌های کتابخانه استفاده نمی‌کنید، آن را پاک کنید. اگر از کتابخانه در بخش ابتدایی بارگذاری وبسایت شما استفاده نمی‌شود، می‌توانید از روش Lazy-Loaded برای اجرای آن استفاده کنید.

پاک کردن کتابخانه‌های غیرضروری که به آن‌ها نیاز ندارید

روش قبل همیشه قابل استفاده نیست. در حقیقت نمی‌توان تمام کتابخانه‌ها را به سادگی به اجزای کوچک خرد کرد تا فقط بخشی از آن را import کنید. در چنین مواقعی در وهله اول تلاش کنید تمام کتابخانه را به‌صورت کلی حذف نمایید. در وهله دوم بهتر است یک کتابخانه شخصی‌سازی شده سبک‌تر یا یک Custom Solution بسازید. هرچند پیش از آنکه بخواهید یک کتابخانه کاستوم بسازید، باید پیچیدگی و سختی این کار را در نظر گرفته و تصمیم بگیرید که آیا بهتر است کتابخانه را به‌صورت کامل حذف کنید یا از این روش‌های جایگزین استفاده کنید.

اگر به مطالعه‌ی بیشتر در این زمینه علاقه‌مندید، پیشنهاد می‌کنیم از مجموعه مقالات core web vitals منتوریکس دیدن کنید. همچنین شما می‌توانید برای دریافت مشاوره دیجیتال مارکتینگ و خدمات سئو سایت با ما در تماس باشید.

تحریریه منتوریکس
تحریریه منتوریکس

این مطالب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.

انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وب‌سایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.

ما نظرات و سوالات شما را با دقت می‌خوانیم و پاسخ می‌دهیم
نظرات تعداد کاراکترهای باقی مانده: 300
انصراف