المقدمة

دائماً يتوقع المستخدم تجربة رائعة عند زيارة أي موقع، وأحد أهم المعايير التي تحدد تجربة المستخدم الممتازة من السيئة، هي أن يتم تحميل الموقع في وقت أقل ليبدأ المستخدم في التصفح.

وثمة معلومة مهمة يجب أن يعرفها كل مطور وهي أن لغة JavaScript هي Single-Threaded وهذا يعني أنها تنفذ العمليات بصورة تسلسلية عن طريق Event Loop. وأهم الـ tasks التي يقوم الـ main thread بتنفيذها هي عرض الواجهات- user interface ، وتنفيذ أكواد الـ javaScript ، ولتحقيق أداء أعلى ينبغي أن يكون الـ main thread غير مشغول بتنفيذ المهام لوقت طويل.

وبالتالي هذا يقودنا إلى أهم الأشياء في تحسين أداء أي موقع وهي :

1- تقليل حجم الحزمة - Reduce The Bundle Size

ولتقليل حجم الحزمة تجنب أولاً استخدام مكتبات خارجية - Third-party libraries بكثرة ، وهنا أنصح باستخدام موقع bundlephobia والذي يحدد حجم الـ package وسرعة تحميلها.

2- تقسيم الكود - Code Splitting

وفائدة تقسم الكود إلى small chunks هي : تنفيذ الكود المطلوب في البداية وتأخير عملية تنفيذ غير المطلوب، كما يقوم بتقليل وقت التحميل الأولي Initial Load Time ، وهذا مهم جداً خصوصاً في تطبيقات Single Page Application (SPA) ، وخطوات تقسيم الكود هي :

1-

Copyts
1// بدلاً من :
2import Home from "./pages/Home";
3function App(){
4return <Home/>
5}

2- استخدام Dynamic Import

Copyts
1// استخدم :
2import { Suspense, lazy } from "react";
3import { Routes, Route } from "react-router-dom";
4const Home = lazy(() => import("./pages/Home"));
5
6function App(){
7return (
8  <Suspense fallback={<Loading/>}
9    <Routes>
10       <Route index element={<Home />} />
11     </ Routes>
12   </ Suspense>
13       );
14}

قبل استخدام Dynamic Import & Code Splitting :

بعد إستخدام Dynamic Import & Code Splitting

الملخص

1. لغة JS هي Single-Threaded تنفذ العمليات تباعاً ، عملية وراء عملية.
2. أهم وظائف الـ Main Thread عرض الـ UI ، وتنفيذ أكواد الـ JavaScript.
3. كلما كان الـ Main Thread غير مشغول كلما كان الأداء عالياً.
4. لضمان وقت أقل للـ Main Thread قم بتقليل حجم الـ bundle واستخدام lazy loading.

المصادر

1- Main Thread

2- How Browser Work