حاجة تخلي الكود بتاعك أخف وأسرع وهى Tree Shaking ؟!

[x32x01]

تعالى أقولك على حاجة هتساعدك تخلي الكود بتاعك أخف وأسرع، وهي Tree Shaking .

يعني إيه Tree Shaking ؟​

ببساطة، هي عملية بيعملها الباندلر (زي Webpack أو Rollup) عشان يشيل أي كود مكتوب بس مش مستخدم (dead code).
الفكرة إنك لو استوردت مكتبة فيها 100 دالة، وبتستخدم منها واحدة بس، Tree Shaking بيحذف الـ 99 الباقيين.

ليه بقا Tree Shaking مهم؟​

أداء أفضل: حجم الكود النهائي (bundle) بيبقى أصغر، يعني وقت تحميل أسرع. كود أنظف: بيتشال منه أي حاجة مش ضرورية.
تجربة مستخدم أحسن: وقت التحميل بيقل، خصوصًا على النت البطيء.

إزاي تستفيد منه؟​

استخدم ES Modules (import/export)
Tree Shaking بيشتغل مع الـ ES6 modules بشكل أفضل من CommonJS (require).
تجنب الكود غير المستخدم
لو عندك دوال أو متغيرات مش بتستخدمها، امسحها بدل ما تسيبها في الكود.
استخدم Bundlers تدعم Tree Shaking
زي Webpack، Rollup، أو Vite. تأكد إن الـ mode على production، عشان Tree Shaking بيشتغل في الوضع ده بس.
webpack --mode production
مكتبات خفيفة
اختار مكتبات بتدعم Tree Shaking زي lodash-es بدل lodash العادي.

مثال عملي:
لو استوردت كل حاجة من مكتبة:

import * as lodash from 'lodash';
console.log(lodash.debounce);

ده هيخلي الباندل يشيل كل الـ functions، حتى اللي مش مستخدمة.

لكن لو استوردت بس اللي محتاجه:

import { debounce } from 'lodash';

حجم الكود النهائي هيبقى أقل بكتير!

خلاصة: Tree Shaking مش بس ميزة تقنية، ده طريقة تفكير لازم تتحكم في كتابة كودك بيها. لو بتكتب كود خفيف ونظيف، المستخدمين هيحسوا بالفرق!
لو استفدت اديني ريأكت
وقولي: إنت كنت عارف الميزة دي قبل كده ؟