You are currently viewing کاهش اندازه جاوا اسکریپت از طریق تقسیم کد

کاهش اندازه جاوا اسکریپت از طریق تقسیم کد


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

هیچ کس دوست ندارد منتظر بماند، طبق یک مطالعه، بیش از 50 درصد از کاربران یک صفحه را زمانی که بیش از 3 ثانیه طول می کشد، رها می کنند.(1).

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

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

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

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

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

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

در زیر به شما آموزش می دهیم که چگونه از ابزارهای موجود برای شکستن کد خود و اولویت بندی آن برای بهبود بوت استفاده کنید، پس با Next همراه باشید.

اندازه گیری

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

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

استفاده از واردات پویا برای تقسیم کد

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

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

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

پاورقی


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

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

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