Npm به کد شما روح جدیدی می‌دهد؛ اما آیا واقعاً می‌خواهید از این چند بایت حجم اضافی استفاده کنید؟ ریجیستری‌هایی همانند npm باعث سهولت دسترسی به انواع جاوا اسکریپت شده‌اند. npm نیم میلیون پکیج عمومی کدهای جاوا اسکریپت را در اختیار شما قرار می‌دهد؛ اما خب تمامی این کتابخانه‌ها کارایی ندارند. برای حل کردن این مشکل می‌توانید از Analyze Your Bundle استفاده کنید تا تمامی کدهای اسکریپت اضافی که کارایی ندارند را شناسایی کنید. در مرحله بعد می‌توانید کتابخانه‌هایی که از آن‌ها استفاده نمی‌شوند و به آن‌ها نیازی ندارید را پاک کنید. در ادامه این مطلب از منتوریکس همراه ما باشید تا روش حذف کردن کدهای جاوا اسکریپت اضافی را در تبلیغات در گوگل به شما بیاموزیم.
Analyze Your Bundle
ابزار DevTools به شما اجازه می‌دهد تا سایز تمام نتورک ریکوست‌ها یا همان درخواست‌های شبکه را مشاهده کنید. برای این کار مراحل زیر را به ترتیب پشت سر بگذارید:
- از کلیدهای ترکیبی CTRL+Shift+J در ویندوز و از کلیدهای ترکیبی CMD+OPT+J در مک استفاده کنید تا DevTools باز شود.
- حالا بر روی تب Networkکلیک کنید.
- تیک Disable Cacheرا بزنید.
- صفحه را ریلود کنید.
از تب 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 منتوریکس دیدن کنید. همچنین شما می‌توانید برای دریافت مشاوره دیجیتال مارکتینگ و خدمات سئو سایت و مشاوره CRO با ما در تماس باشید.