کاهش بارهای جاوا اسکریپت با تقسیم کد

حسین جرده
حسین جرده
ایکس
جرمی واگنر
جرمی واگنر

هیچ کس انتظار را دوست ندارد. بیش از 50٪ از کاربران یک وب سایت را در صورتی که بارگذاری آن بیش از 3 ثانیه طول بکشد، رها می کنند .

ارسال بارهای بزرگ جاوا اسکریپت به طور قابل توجهی بر سرعت سایت شما تأثیر می گذارد. به جای ارسال تمام جاوا اسکریپت به محض بارگیری صفحه اول برنامه شما، بسته نرم افزاری خود را به چند قسمت تقسیم کنید و فقط آنچه را که لازم است در همان ابتدا ارسال کنید.

چرا تقسیم کد مفید است؟

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

وقتی نوبت به Core Web Vitals می‌رسد، کاهش بارهای جاوا اسکریپت بارگیری‌شده در هنگام راه‌اندازی به زمان‌های تاخیر ورودی اول (FID) و تعامل با رنگ بعدی (INP) کمک می‌کند. دلیل این امر این است که با آزاد کردن رشته اصلی، برنامه قادر است با کاهش هزینه‌های راه‌اندازی مربوط به تجزیه، کامپایل و اجرا به ورودی‌های کاربر سریع‌تر پاسخ دهد.

بسته به معماری وب سایت شما - به ویژه اگر وب سایت شما به شدت به رندر سمت مشتری متکی است - کاهش اندازه بارهای جاوا اسکریپت که مسئول رندر نشانه گذاری هستند ممکن است منجر به بهبود زمان های Largest Contentful Paint (LCP) شود. این می تواند زمانی رخ دهد که منبع LCP توسط مرورگر کشف شود تا زمانی که نشانه گذاری سمت سرویس گیرنده تکمیل شود، یا زمانی که رشته اصلی آنقدر شلوغ است که نمی تواند آن عنصر LCP را ارائه کند . هر دو سناریو می توانند زمان LCP را برای صفحه به تاخیر بیندازند.

اندازه گرفتن

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

ممیزی ناموفق Lighthouse نشان می دهد که اجرای اسکریپت ها بیش از حد طولانی است.

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

بسته‌کننده‌های ماژول محبوب مانند webpack ، Parcel و Rollup به شما امکان می‌دهند باندل‌های خود را با استفاده از واردات پویا تقسیم کنید. به عنوان مثال، قطعه کد زیر را در نظر بگیرید که نمونه‌ای از متد someFunction را نشان می‌دهد که هنگام ارسال فرم فعال می‌شود.

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

در اینجا someFunction از یک ماژول وارد شده از یک کتابخانه خاص استفاده می کند. اگر این ماژول در جای دیگری استفاده نمی شود، بلوک کد را می توان تغییر داد تا تنها زمانی که فرم توسط کاربر ارسال شود، از یک واردات پویا برای واکشی آن استفاده شود.

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

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

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

تقسیم در سطح مسیر یا مؤلفه هنگام استفاده از چارچوب سمت مشتری، یک رویکرد ساده تر برای بارگذاری تنبل بخش های مختلف برنامه شما است. بسیاری از فریم‌ورک‌های محبوبی که از بسته وب استفاده می‌کنند، انتزاعی‌هایی را ارائه می‌کنند تا بارگذاری تنبل را آسان‌تر از فرو رفتن در پیکربندی‌ها کنید.