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

Houssein Djirdeh

Jeremy Wagner

هیچ‌کس انتظار کشیدن را دوست ندارد. بیش از ۵۰٪ کاربران اگر بارگذاری یک وب‌سایت بیش از ۳ ثانیه طول بکشد، آن را ترک می‌کنند .

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

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

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

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

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

نکته کلیدی: اگر وب‌سایت شما منحصراً به رندرینگ سمت کلاینت متکی است، باید از رندرینگ سمت سرور (SSR) استفاده کنید تا مطمئن شوید که سرور در پاسخ به درخواست ناوبری، نشانه‌گذاری‌های معناداری را به کلاینت ارسال می‌کند. این می‌تواند به مرورگر کمک کند تا اسکنر را از قبل بارگذاری کند تا منابع را به طور مؤثرتری دریافت کند.

اندازه گیری

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

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

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

import moduleA from "library";

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

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

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

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
}

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

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

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