لو بتشتغل في مجال الـ Front-End أكيد عارف إن تحسين أداء الموقع حاجة أساسية جدًا لأي مبرمج عايز يقدّم تجربة مستخدم سلسة وسريعة.
خلينا ندردش شوية عن تقنيتين مهمين جدًا ممكن يساعدوك في تحسين أداء الموقع بشكل كبير وهما: Code Splitting و Lazy Loading.
📌 إيه هو الـ Code Splitting؟
الـ Code Splitting ببساطة هو إنك تقسّم الكود بتاعك لأجزاء أصغر بدل ما تكون كل الأكواد متجمعة في ملف واحد كبير.
الفكرة هنا إنك مش بتحتاج تحمل كل الأكواد في وقت واحد، وده بيخلي صفحة الويب تفتح أسرع بكتير، خصوصًا لما الموقع يكون فيه مكونات (Components) كتير.
مثلًا، لو عندك صفحة Settings ومش هتظهر للمستخدم إلا لما يدخل عليها، ليه تحمل الأكواد بتاعتها من الأول؟
باستخدام الـ Code Splitting، تقدر تحمل الأكواد الخاصة بالصفحة دي بس لما المستخدم يطلبها، وده بيقلل حجم الـ bundle اللي بيتحمل مع أول مرة المستخدم يفتح الموقع.
في مكتبة زي React، تقدر تستخدم React.lazy عشان تعمل Code Splitting للمكونات (Components). كود بسيط زي ده:
const Settings = React.lazy(() => import("./Settings"));
هيحمّل مكون (Component) الـ Settings بس لما المستخدم يطلبه.
📌 إيه هو الـ Lazy Loading؟
الـ Lazy Loading هو مفهوم قريب جدًا من الـ Code Splitting، وفكرته إنك تأجل تحميل أجزاء معينة من الصفحة أو المكونات (Components) لحد ما المستخدم يحتاجها.
أكتر مثال مشهور للـ Lazy Loading هو الصور. لو عندك صفحة طويلة مليانة صور، تقدر تخلي الصور تتحمل بس لما المستخدم يوصل للنقطة اللي هيشوفها فيها.
الفكرة دي بتساعد جدًا في تحسين الـ Performance وتوفير الـ Bandwidth للمستخدمين.
ممكن تستخدم مكتبة زي react-lazyload عشان تطبق الـLazy Loading على الصور أو أي عناصر تانية:
import LazyLoad from "react-lazyload";
<LazyLoad height={200}>
<img src="image.jpg" alt="example" />
</LazyLoad>;
التقنيتين دول بيخلوك تقدر تتحكم في عملية تحميل الأكواد والعناصر، وتوفّر للمستخدم تجربة أسرع بكتير.
المستخدم مش هيضطر يستنى تحميل كل حاجة مرة واحدة، وده بيحسن جدًا وقت التحميل الأول (Initial Load Time) وكمان بيدي إحساس إن الموقع سريع وسلس.
لو بتشتغل بـ Webpack أو Parcel، هتلاقي أدوات مدمجة تساعدك في تطبيق الـCode Splitting بسهولة. وكمان مع مكتبات زي React و Vue.js، الموضوع بقى أسهل وأسرع بكتير.
بالتوفيق يا بطل 💪🏻