تعلم Tree Shaking لتسريع الكود في JavaScript

تعالى أقولك على حاجة هتخلي الكود بتاعك أخف وأسرع، وهي 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:

webpack --mode production

اختار مكتبات خفيفة تدعم Tree Shaking
زي lodash-es بدل lodash العادي.

مثال عملي:

الطريقة القديمة (بتستهلك كل حاجة):

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

الطريقة الصح:

import { debounce } from 'lodash';

الفرق؟
الطريقة التانية بتقلل حجم الكود النهائي بشكل ضخم

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

لو استفدت اديني ريأكت وأخبرنى:
كنت عارف الميزة دي قبل كده ولا دي أول مرة تسمع عنها؟