💎 بررسی tree shaking در جاوااسکریپت 💎

درواقع Tree Shaking در جاوااسکریپت یک تکنیک بهینه‌سازیه که کدهای استفاده نشده رو از باندل نهایی حذف می‌کنه و به طور خاص با ماژول‌های ES6 کار می‌کنه که از دستورهای import و export برای مدیریت وابستگی‌ها استفاده می‌کنند.

هدف اصلی tree shaking اینه که فقط کدی که واقعاً در برنامه استفاده میشود در باندل نهایی باقی بماند و کدهای اضافی حذف شوند 💥

چه مزایایی داره ؟ 🚀

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

نحوه کار Tree Shaking 📈

درواقع Tree shaking تنها با ماژول‌های ES6 کار می‌کنه، چون این ماژول‌ها به طور ایستا وابستگی‌های خودشونو مشخص می‌کنن ( برای درک بهتر این مقاله رو بخونید )، حالا وقتی که از کدهای import و export استفاده میکنیم، ابزارهایی مثل Webpack می‌تونن بفهمند کدوم بخش از کد ما مورد استفاده قرار نمی‌گیره و اونها را حذف کنند.

نکته ای که وجود داره اینه که جاوااسکریپت به تنهایی نمیتونه tree shaking رو فعال کنه و توسط bundler‌هایی مثل webpack و rollup انجام می‌شه !

نحوه فعال کردن tree shaking ✅

برای اطلاع از نحوه کارکرد tree-shaking در Webpack و Rollup میتونید از لینک های زیر استفاده کنید

🌐 Webpack

🌐 Rollup

توی این پست سعی کردم به طور کامل tree shaking رو بهتون توضیح بدم، اگر دوست داشتید با ری‌اکشناتون بهمون انرژی بدید ❤️

#️⃣ #WhtsThat #javascript #bundlesize #tree_shaking #webpack #rollup

🚀 @coolycode