React/code splitting

التحزيم (Bundling)

تكون معظم الملفّات في تطبيقات React مُحزَّمة باستخدام أدوات مثل Webpack أو Browserify. التحزيم هو عملية تتبّع الملفّات المستوردة ودمجها في ملف واحد وهو الحزمة (Bundle). يُمكِن بعدها تضمين هذه الحزمة في صفحة ويب لتحميل كامل التطبيق دفعة واحدة.

مثال

شيفرة التطبيق هي:

// app.js
import { add } from './math.js';

console.log(add(16, 26)); // 42

شيفرة الحزمة هي:

function add(a, b) {
  return a + b;
}

console.log(add(16, 26)); // 42

ملاحظة: سينتهي مظهر الحزم لديك إلى شكلٍ مختلف عن هذا.

إن كنت تستخدم create-react-app، أو Next.js، أو Gatsby، أو أي أداة مشابهة، فسيكون لديك إعداد Webpack جاهز لتحزيم تطبيقك.

أمّا إن لم تكن تستخدم أي من هذه الأدوات فستحتاج إلى إعداد التحزيم بنفسك. انظر إلى دليل التثبيت ودليل البدء في توثيق Webpack.

تقسيم الشيفرة

يكون التحزيم رائعًا، ولكن عندما يكبر تطبيقك ستكبر الحزمة لديك أيضًا، خاصّة إن كنت تُضمِّن مكتبات طرف ثالث كبيرة الحجم. يجب الانتباه إلى الشيفرة التي تُضمِّنها في حزمتك لكي لا تجعلها كبيرة من غير قصد لدرجة أن يستغرق تطبيقك زمنًا طويلًا للتحميل.

لتجنّب الحصول على حزمة كبيرة من الأفضل استباق حصول المشكلة والبدء في تقسيم حزمتك. تقسيم الشيفرة (Code-Splitting) هو ميّزة مدعومة من قبل المُحزِّمات مثل Webpack و Browserify (عبر factor-bundle) والتي تستطيع إنشاء حزم متعددة يُمكِن تحميلها بشكل ديناميكي في زمن التنفيذ.

يُساعدك تقسيم شيفرة تطبيقك على إجراء تحميل مُتأخّر (Lazy Load) للأشياء التي يحتاجها المستخدم حاليًّا فقط، ممّا يُحسِّن بشكل كبير أداء تطبيقك. وفي حين أنّك لم تُقلِّل الحجم الكلي لشيفرة تطبيقك، فقد تجنّبت تحميل شيفرة قد لا يحتاجها المستخدم أبدًا وقلّلتَ حجم الشيفرة التي تحتاج إلى تحميلها في البداية.

import()‎

أفضل طريقة لتقديم تقسيم الشيفرة إلى تطبيقك هي عبر استخدام صياغة import()‎ الديناميكية.

الشيفرة قبل الاستخدام:

import { add } from './math';

console.log(add(16, 26));

الشيفرة بعد الاستخدام:

import("./math").then(math => {
  console.log(math.add(16, 26));
});

ملاحظة: صياغة import()‎ الديناميكية هي عبارة عن اقتراح في ECMAScript (أي JavaScript) وليست جزءًا من اللغة المعيارية، ومن المتوقع قبولها في المستقبل القريب.

عندما يأتي Webpack على هذه الصياغة سيبدأ بتقسيم شيفرة تطبيقك تلقائيًّا. إن كنت تستخدم create-react-app فهذا الإعداد موجود لديك مُسبقًا وتستطيع استخدامه مباشرةً. وهو أيضًا موجود بشكل جاهز عندما تستخدم Next.js.

إن كنت تُعِد Webpack بنفسك فستحتاج لقراءة دليل Webpack حول تقسيم الشيفرة. يجب أن تبدو إعدادات Webpack لديك مثل هذا.

عند استخدامك Babel يجب أن تتأكد من قدرته على تصريف صياغة الاستيراد (import()‎) الديناميكية بدون تحويلها. ستحتاج من أجل ذلك إلى هذه الإضافة babel-plugin-syntax-dynamic-import.

المكتبات

React Loadable

تُغلِّف مكتبة React Loadable الاستيراد الديناميكي ضمن واجهة برمجة تطبيقات (API) قريبة من React لتقديم تقسيم الشيفرة إلى تطبيقك ضمن مكوّن مُعطى.

قبل استخدام المكتبة:

import OtherComponent from './OtherComponent';

const MyComponent = () => (
  <OtherComponent/>
);

بعد استخدام المكتبة:

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);

تُساعِدك React Loadable على إنشاء حالات للتحميل، وحالات للأخطاء، والتحميل المُسبَق، والمزيد من ذلك. تستطيع أيضًا مساعدتك على تصيير تطبيق من جانب الخادم (server-side) مع الكثير من تقسيم الشيفرة.

تقسيم الشيفرة المعتمد على الطريق (Route)

قد يكون من الصعب تحديد موضع تقسيم الشيفرة في تطبيقك. يجب عليك أن تتأكد من اختيار أماكن تُقسِّم الشيفرة بشكلٍ متساوٍ ولكن من دون الضرر بتجربة المستخدم.

المكان الجيد للبدء بذلك هو الطرق (routes). اعتاد معظم مستخدمي الويب على أنّ أزرار التقليب بين الصفحات تستغرق وقتًا لتحميلها. تميل حينها أيضًا إلى إعادة تصيير كامل الصفحة مرة واحدة لذا من غير المحتمل أن يكون المستخدم يحاول التفاعل مع الصفحة في نفس الوقت.

هذا مثال حول إعداد تقسيم الشيفرة اعتمادًا على الطريق في تطبيقك باستخدام مكتبات مثل React Router و React Loadable:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';

const Loading = () => <div>Loading...</div>;

const Home = Loadable({
  loader: () => import('./routes/Home'),
  loading: Loading,
});

const About = Loadable({
  loader: () => import('./routes/About'),
  loading: Loading,
});

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </Switch>
  </Router>
);

 مصادر

• صفحة تقسيم الشيفرة في توثيق React الرسمي.