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

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

هیچ کسی انتظار را دوست ندارد، طبق تحقیقات انجام شده بیشتر از 50 درصد کاربران وقتی بارگذاری صفحه بیشتر از 3 ثانیه طول بکشد آن صفحه را ترک می‌کنند^[1].

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

آنچه در این مقاله خواهیم خواند

مقدمه‌ای بر تقسیم کد

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

چند روش کلی برای تقسیم کد وجود دارد که مهمترین آنها:

• Entry Points : با استفاده از تنظیمات import ، کد را به صورت دستی تقسیم کنید.
• Dynamic Imports : کد را از طریق فراخوانی تابع درون ماژول ها تقسیم کنید.

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

اندازه‌گیری

وقتی زمان قابل توجهی برای اجرای حجم زیادی از جاوا اسکریپت در یک صفحه صرف می شود، Lighthouse یک هشدار تحت عنوان javascript boot-up time is too high نشان می دهد.

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

استفاده از Dynamic Imports برای تقسیم کد

ماژول‌های بسته‌بندی محبوبی مانند webpack، Parcel و Rollup به شما امکان می‌دهند بسته‌های جاوا اسکریپت خود را با استفاده از Dynamic import()^[2] تقسیم کنید. به عنوان مثال، قطعه کد زیر را در نظر بگیرید که نمونه‌ای از متد 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
}

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

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

پاورقی

1- تحقیق thinkwithgoogle در مورد ارتباط سرعت و ماندگاری کاربران.

2- Dynamic import() شکل جدیدی از import را معرفی می کند که قابلیت های جدیدی را در مقایسه با import static ارائه می‌کند.

3- SplitChunksPlugin : در اصل، تکه‌ها (و ماژول‌های import شده در داخل آن‌ها) توسط یک رابطه والد-فرزند در نمودار بسته وب داخلی به هم متصل شدند. CommonsChunkPlugin برای جلوگیری از وابستگی های تکراری در بین آنها استفاده شد.