توضیح باندلینگ JavaScript
شما اپلیکیشنهای React یا Angular را با استفاده از فایلهای زیادی مینویسید. شما کامپوننتها، سرویسها و کتابخانهها دارید. این سازماندهی به شما کمک میکند.
مرورگر اهمیتی به پوشهبندی شما نمیدهد. اگر ۲۰۰ فایل را بارگذاری کنید، مرورگر ۲۰۰ درخواست شبکه ارسال میکند. این موضوع باعث کند شدن اپلیکیشن شما میشود.
باندلرها (Bundlers) این مشکل را حل میکنند. یک باندلر کدها، importها و ماژولهای شما را میگیرد و آنها را در یک یا چند فایل کوچک ترکیب میکند. این کار بارگذاری را بهینه و کارآمد میکند.
باندلرهای مدرن کارهای بیشتری فراتر از ترکیب فایلها انجام میدهند:
• Minification: فضاهای خالی و کامنتهای اضافی را حذف میکند. نام متغیرها را کوتاه میکند تا حجم فایلها کمتر شود. • Tree shaking: کدهایی را که هرگز استفاده نمیکنید حذف میکند. توابع استفاده نشده را از کتابخانهها جدا میکند. • Code splitting: کد را به تکههای کوچک تقسیم میکند. مرورگر فقط آنچه را که کاربر در حال حاضر نیاز دارد بارگذاری میکند.
فایلهای کوچکتر منجر به اپلیکیشنهای سریعتر میشوند.
دو ابزار اصلی وجود دارد: Webpack و Vite.
Webpack کل اپلیکیشن شما را قبل از ارائه (serving) باندل میکند. این برای پروژههای بزرگ قدیمی (legacy) به خوبی عمل میکند. این ابزار منعطف است اما در پروژههای بزرگ میتواند کند به نظر برسد.
Vite انتخاب مدرن است. در طول توسعه، فایلها را مستقیماً ارائه میدهد. این ابزار فقط فایلی را که تغییر دادهاید بهروزرسانی میکند، که باعث میشود بهروزرسانیها آنی باشند. برای محیط تولید (production)، Vite از Rollup برای ایجاد باندلهای سریع استفاده میکند.
مقایسه:
Webpack:
- سرعت توسعه: کندتر
- پیکربندی: پیچیده
- بهترین برای: پروژههای بزرگ قدیمی
Vite:
- سرعت توسعه: سریع
- پیکربندی: ساده
- بهترین برای: پروژههای مدرن جدید
برای پروژههای جدید از Vite استفاده کنید.
هر باندلری سه مرحله را دنبال میکند:
- ساخت گراف وابستگی (dependency graph): نحوه اتصال هر فایل به فایلهای دیگر را ترسیم میکند.
- تبدیل کد: TypeScript یا JSX را به JavaScript معمولی تبدیل میکند.
- خروجی دادن باندل: همه چیز را ترکیب و کمینه (minify) کرده و در پوشهای برای استقرار (deployment) قرار میدهد.
با این مراحل، باندل خود را سبک نگه دارید:
• Lazy loading: کامپوننتها را فقط زمانی بارگذاری کنید که کاربران به آنها هدایت میشوند. • Partial imports: کل یک کتابخانه را وارد نکنید. فقط تابع خاصی را که نیاز دارید وارد کنید. • Analyze: از ابزارها استفاده کنید تا ببینید چه چیزی در باندل شما فضا اشغال کرده است. • Production builds: همیشه از نسخههای تولید (production builds) استفاده کنید. نسخههای توسعه (development builds) بسیار حجیم هستند.
باندلینگ با ارائه فایلهای کمتر و کوچکتر به مرورگر، باعث بهبود عملکرد اپلیکیشن شما میشود.
منبع: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p