نگاهی به باندلرهای جاوااسکریپت در ۲۰۲۵ و معرفی Rolldown

سال ۲۰۲۴ واسه باندلرها سال عجیبی بود - انگار همه تصمیم گرفته بودن باندلر جدید بسازن! 😄 ولی آخر سال یه اتفاق باحال افتاد: rolldown بتا اومد و کلی سر و صدا کرد، مخصوصاً بین دوستانی که با Vite کار میکنن.

باندلر چیه و چرا بهش نیاز داریم؟

باندلر یه ابزاریه که فایل‌های مختلف و وابستگی‌هاشون رو میگیره و مثل یه آشپز ماهر، همه رو با هم ترکیب میکنه و یه غذای خوشمزه (ببخشید، یه فایل بهینه!) تحویل میده.

بعضی از توسعه‌دهنده‌ها میگن "الان که مرورگرها Es Module و http2 ساپورت میکنن دیگه نیازی به باندلر نداریم!"، ولی خب هنوز نیاز داریم که کدهامون رو:

- کوچیک کنیم (minify)

- برای مرورگرهای قدیمی‌تر ترجمه کنیم

- کد های jsx / ts و ... ترنسپایل کنیم

- و کلی کار دیگه که نمیشه بیخیالشون شد!

*‌ راستی توضیحات نسخه ویدویی کاملتره خواستی اونم ببین

تاریخچه باندلرها (یا به قول قدیمی‌ها: سیر تکامل! 😉)

نسل صفر: Browserify !

اولین باندلر محبوبی که اومد و کار باندلینگ رو به سبک node انجام داد

نسل اول: باندلرهای جاوااسکریپتی

۱. **Parcel**

- اینقدر ساده که config نمیخواد

- قابلیت HMR داره و واسه پروژه‌های vanilla عالیه

۲. **Rollup**

- فیچری های زیادی داره و داخل vite هم استفاده میشه

- پلاگین‌هاش از در و دیوار میریزه

۳. **Webpack**

- پادشاه باندلرها! همه میشناسنش

- انقدر قابلیت داره که آدم گیج میشه

- تقریبا همه فیچر های رو داره و بیشترین استفاده رو در بین پروژه ها تا سال ۲۰۲۴ داشته!

نسل دوم: هیولای های سرعت!

۱. **ESBuild**

- با Go نوشته شده توسط cto قبلی فیگما

- سریع هست 🏃‍♂️

۲. **Turbopack**

- اومدن Webpack رو با Rust بازنویسی کردن

- هنوز تو production نمیشه ازش استفاده کرد (فعلاً تو آزمایشگاهه!)

۳. **RSPack**

- اینم یه Webpack دیگه با Rust

- سرعتش خیلی خوبه ولی هنوز داره خودشو ثابت میکنه

خوب حالا Vite چطور کار میکنه؟

ویت یا Vite یه ابزار بیلده و خودش بانلدر نیست ولی یه زرنگی کرده و از دو تا باندلر استفاده میکنه

- موقع توسعه از ESBuild استفاده میکنه (چون سریعه)

- موقع تولید از Rollup استفاده میکنه (چون باید همه چی بهینه باشه)

آیا esbuild نمیتونه بهینه باشه یا چرا دقیقا vite از دوتا بانلدر استفاده میکنه اینجا ببین

مشکلی که ویت داره اینه که یسری inconsistency توی dev و prod ایجاد شده و اومدن یه پروژه جدید تعریف کردن. کی تعریف کرده؟ آقای Evan You خالق vue , vite و ... و تیمش تو کنفرانس viteConf 2024 راجبش حرف زدن

رول دان یا RollDown

رولداون اومده که بگه "چرا دو تا باندلر؟ من تنهایی کار همه رو انجام میدم! یه سری فیچر جدید هم میدم و بهینه تر هم هستم " نتایج تست‌هاش هم بهتره:

تست اول : تو تست باندلینگ با ۱۰,۰۰۰ فایل JS:

- رولداون: ۶۰۰ میلی‌ثانیه

- ESBuild: ۸۰۰ میلی‌ثانیه

- RSPack: ۲ ثانیه

- Rollup: ۲۲ ثانیه (میشه تو این فاصله یه چایی خورد! 😅)

تست دوم : توی ویدیو ببینید

آمار جالب سال ۲۰۲۴

- فعلاً Webpack داره پادشاهی میکنه (۸۶٪)

- ولی همه به Rolldown امیدوارن (۸۶٪ علاقه‌مندی)

اگر رنکینگهای بعدی هم مهمه برای روی لینک آمار بزن

حرف آخر

رولداون با توجه به سرعت و قابلیت‌هاش، به نظر امیدوار کننده میرسه. شاید تا چند وقت دیگه همه بگن "Webpack? اون مال قدیما بود!" 😉

حالا میتونی خودت امتحانش کنی و ببینی روی پروژه تو چطور کار می. فقط یادت باشه هنوز بتاست، پس یهو نری تو production ازش استفاده کنی!

دمت گرم که تا اینجا خوندی! 🙌

اگه این مقاله برات مفید بود و فکر میکنی رفیق برنامه‌نویست هم باید بدونه همین الان براش بفرست - شاید فردا تو مصاحبه کاریش به دردش بخوره! 😉

اشتراک‌گذاری = دعای خیر یه برنامه‌نویس دیگه + ثواب تکنولوژی!

توی پست‌های بعدی میخوایم سراغ چیزای باحال‌تر بریم، نظرت چیه؟ 🤔

منابع بیشتر:

- معرفی رولداون توسط تئو: https://youtu.be/IDe1zVWoX94?si=TQVnEwCk-Oy_IZEp

- ایوان یو در ViteConf 2024: https://youtu.be/mWK3Y_1kmaM?list=PLqGQbXn_GDmnObDzgjUF4Krsfl6OUKxtp&t=719

- نظرسنجی State of JS: https://stateofjs.com/en-US

#فرانت‌اند #جاوااسکریپت #رولداون #توسعه_وب #frontend #bundler #development