جاوا اسکریپت استفاده نشده را حذف کنید

جاوا اسکریپت استفاده نشده می تواند سرعت بارگذاری صفحه شما را کاهش دهد:

  • اگر جاوا اسکریپت رندر را مسدود می کند ، مرورگر باید اسکریپت را دانلود، تجزیه، کامپایل و ارزیابی کند تا بتواند تمام کارهای دیگری را که برای رندر کردن صفحه لازم است ادامه دهد.
  • حتی اگر جاوا اسکریپت ناهمزمان باشد (نه رندر-مسدود کننده)، کد در حین بارگیری برای پهنای باند با منابع دیگر رقابت می کند که پیامدهای عملکردی قابل توجهی دارد. ارسال کد استفاده نشده از طریق شبکه برای کاربران تلفن همراهی که برنامه های داده نامحدود ندارند نیز بیهوده است.

چگونه ممیزی جاوا اسکریپت استفاده نشده شکست می خورد

Lighthouse هر فایل جاوا اسکریپت را با بیش از 20 کیلو بایت کد استفاده نشده پرچم گذاری می کند:

اسکرین شات از حسابرسی
روی یک مقدار در ستون URL کلیک کنید تا کد منبع اسکریپت در یک برگه جدید باز شود.

نحوه حذف جاوا اسکریپت بلااستفاده

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

تب Coverage در Chrome DevTools می‌تواند کدهای استفاده نشده را به صورت خط به خط به شما نشان دهد.

کلاس Coverage در Puppeteer می تواند به شما در خودکارسازی فرآیند شناسایی کدهای استفاده نشده و استخراج کدهای استفاده شده کمک کند.

ساخت ابزاری برای پشتیبانی از حذف کدهای استفاده نشده

تست‌های Tooling.Report زیر را بررسی کنید تا متوجه شوید آیا باندلر شما از ویژگی‌هایی پشتیبانی می‌کند که جلوگیری یا حذف کدهای استفاده نشده را آسان‌تر می‌کند:

راهنمایی مخصوص پشته

زاویه ای

اگر از Angular CLI استفاده می کنید، نقشه های منبع را در ساخت تولید خود قرار دهید تا بسته های خود را بررسی کنید .

دروپال

حذف دارایی های استفاده نشده جاوا اسکریپت را در نظر بگیرید و فقط کتابخانه های Drupal مورد نیاز را به صفحه یا مؤلفه مربوطه در یک صفحه وصل کنید. برای جزئیات بیشتر به مستندات دروپال مراجعه کنید. برای شناسایی کتابخانه‌های پیوستی که جاوا اسکریپت اضافی اضافه می‌کنند، پوشش کد را در ابزار توسعه کروم اجرا کنید. هنگامی که تجمع جاوا اسکریپت در سایت Drupal شما غیرفعال است، می توانید موضوع یا ماژول مسئول را از URL اسکریپت شناسایی کنید. به دنبال تم‌ها یا ماژول‌هایی باشید که دارای اسکریپت‌های زیادی در لیست هستند که پوشش کد زیادی دارند. یک تم یا ماژول فقط در صورتی باید یک کتابخانه اسکریپت را ضمیمه کند که واقعاً در صفحه استفاده شده باشد. برای جزئیات

جوملا

تعداد افزونه های جوملا را که جاوا اسکریپت استفاده نشده را در صفحه شما بارگیری می کنند، کاهش دهید یا تغییر دهید.

مجنتو

بسته بندی جاوا اسکریپت داخلی Magento را غیرفعال کنید.

واکنش نشان دهید

اگر رندر سمت سرور نیستید، بسته‌های جاوا اسکریپت خود را با React.lazy() تقسیم کنید. در غیر این صورت، با استفاده از یک کتابخانه شخص ثالث مانند loadable-components، کد را تقسیم کنید.

Vue

اگر از رندر سمت سرور استفاده نمی کنید و از روتر Vue استفاده نمی کنید، بسته ها را با مسیرهای بارگذاری تنبل تقسیم کنید.

وردپرس

تعداد افزونه های وردپرس را که جاوا اسکریپت استفاده نشده را در صفحه شما بارگیری می کنند، کاهش دهید یا تغییر دهید.

منابع