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

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

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

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

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

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

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

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

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

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

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

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

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

زاویه ای

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

دروپال

حذف دارایی های استفاده نشده جاوا اسکریپت را در نظر بگیرید و فقط کتابخانه های دروپال مورد نیاز را به صفحه یا مؤلفه مربوطه در یک صفحه وصل کنید. برای جزئیات بیشتر به تعریف کتابخانه مراجعه کنید.

جوملا

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

مجنتو

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

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

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

Vue

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

وردپرس

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

منابع