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