بسته وب
وب پک با افزونه‌ای به نام SplitChunksPlugin عرضه می‌شود که به شما امکان می‌دهد نحوه تقسیم فایل‌های جاوا اسکریپت توسط باندلر را پیکربندی کنید. webpack هر دو عبارت dynamic import() و static import را می شناسد. رفتار SplitChunksPlugin را می توان با مشخص کردن گزینه chunks در پیکربندی آن تغییر داد:
-
chunks: async مقدار پیش‌فرض است و به فراخوانی‌های import() پویا اشاره دارد. -
chunks: initial به تماس های import ثابت اشاره دارد. -
chunks: all هم import() و هم واردات استاتیک را پوشش می دهد، به شما امکان می دهد تکه ها را بین واردات async و initial به اشتراک بگذارید.
به طور پیش فرض، هر زمان که وب پک با دستور import() پویا مواجه شد. یک قطعه جداگانه برای آن ماژول ایجاد می کند:
/* main.js */
// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';
myFunction('Hello world!');
// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
// Assumes top-level await is available. More info:
// https://v8.dev/features/top-level-await
await import('/form-validation.js');
}
پیکربندی پیش‌فرض بسته وب برای قطعه کد قبلی به دو بخش جداگانه منجر می‌شود:
- قطعه
main.js - که بسته وب به عنوان یک تکه initial طبقه بندی می شود - که شامل main.js و ماژول ./my-function.js است. - قطعه
async که فقط شامل form-validation.js است (در صورت پیکربندی حاوی هش فایل در نام منبع). این قطعه فقط در صورت صحت بودن condition دانلود می شود.
این پیکربندی به شما امکان می دهد بارگیری قطعه form-validation.js تا زمانی که واقعاً مورد نیاز باشد به تعویق بیندازید. این می تواند با کاهش زمان ارزیابی اسکریپت در طول بارگذاری صفحه اولیه، پاسخگویی بار را بهبود بخشد. دانلود و ارزیابی اسکریپت برای قطعه form-validation.js زمانی اتفاق می‌افتد که یک شرط مشخص شده برآورده شود، در این صورت، ماژول وارد شده به صورت پویا دانلود می‌شود. یک مثال ممکن است شرایطی باشد که در آن یک polyfill فقط برای یک مرورگر خاص دانلود می‌شود، یا - مانند مثال قبلی - ماژول وارد شده برای تعامل کاربر ضروری است.
از سوی دیگر، تغییر پیکربندی SplitChunksPlugin برای مشخص کردن chunks: initial تضمین می‌کند که کد فقط در تکه‌های اولیه تقسیم می‌شود. این‌ها تکه‌هایی مانند آنهایی هستند که به‌صورت ایستا وارد شده‌اند یا در ویژگی entry webpack فهرست شده‌اند. با نگاهی به مثال قبل، قطعه حاصل ترکیبی از form-validation.js و main.js در یک فایل اسکریپت واحد خواهد بود که منجر به عملکرد بالقوه بدتر بارگذاری اولیه صفحه می شود.
گزینه‌های SplitChunksPlugin را نیز می‌توان به گونه‌ای پیکربندی کرد که اسکریپت‌های بزرگتر را به چند اسکریپت کوچک‌تر تفکیک کند - به عنوان مثال با استفاده از گزینه maxSize برای دستور دادن به وب‌پک برای تقسیم تکه‌ها به فایل‌های جداگانه در صورتی که از مقدار تعیین شده توسط maxSize فراتر رود. تقسیم فایل‌های اسکریپت بزرگ به فایل‌های کوچک‌تر می‌تواند پاسخگویی بار را بهبود بخشد ، زیرا در برخی موارد کار ارزیابی اسکریپت فشرده CPU به وظایف کوچک‌تری تقسیم می‌شود، که کمتر احتمال دارد رشته اصلی را برای مدت زمان طولانی‌تری مسدود کند.
علاوه بر این، تولید فایل های جاوا اسکریپت بزرگتر به این معنی است که اسکریپت ها بیشتر از اعتبار کش رنج می برند. به عنوان مثال، اگر یک اسکریپت بسیار بزرگ را با کد فریم ورک و برنامه شخص اول ارسال کنید، در صورتی که فقط فریم ورک به روز شود، کل بسته نرم افزاری باطل می شود، اما هیچ چیز دیگری در منبع همراه وجود ندارد.
از سوی دیگر، فایل‌های اسکریپت کوچک‌تر، احتمال بازیابی منابع از حافظه پنهان را افزایش می‌دهد و در نتیجه در بازدیدهای مکرر صفحه سریع‌تر بارگذاری می‌شود. با این حال، فایل‌های کوچک‌تر از فشرده‌سازی کمتری نسبت به فایل‌های بزرگتر بهره می‌برند و ممکن است زمان رفت و برگشت شبکه را در بارگذاری صفحه با حافظه پنهان مرورگر بدون پرایم افزایش دهند. باید مراقب بود که تعادلی بین کارایی ذخیره سازی، اثر فشرده سازی و زمان ارزیابی اسکریپت ایجاد شود.
نسخه نمایشی بسته وب
وب بسته نسخه ی نمایشی SplitChunksPlugin .
دانش خود را آزمایش کنید
هنگام انجام تقسیم کد از کدام نوع دستور import استفاده می شود؟
import استاتیک
دوباره امتحان کنید.
کدام نوع دستور import باید در بالای ماژول جاوا اسکریپت باشد و در هیچ مکان دیگری وجود نداشته باشد؟
import() .
دوباره امتحان کنید.
هنگام استفاده از SplitChunksPlugin در وب پک، تفاوت بین یک قطعه async و یک قطعه initial چیست؟
تکه‌های async با استفاده از import() و تکه‌های initial با استفاده از import static بارگذاری می‌شوند.
درسته!
تکه‌های async با استفاده از import static و تکه‌های initial با استفاده از dynamic import() بارگذاری می‌شوند.
دوباره امتحان کنید.
بعدی: بارگذاری تنبل تصاویر و عناصر
