الاستيرادات الدينامكية في react

يمكنك القيام بهذا عن طريق ما يسمى ب React.lazy فهي دالة تتيح لنا عمل render لل dynamically imported components مثل المكونات العادية، و هي تستخدم كما يلي:

// React.lazy بدون 

import OtherComponent from './OtherComponent';

// React.lazy باستخدام 

const OtherComponent = React.lazy(() => import('./OtherComponent'));

المكونات التي يتم استيرادها بهذه الطريقة يجب أن يتم عرضها داخل مكون suspense و هي يتيح لنا عرض مكون آخر أثناء تحميل ال lazy component ك spinner مثلًا

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

أولاً لماذا تريد اﻻستيراد بشكل ديناميكي؟ هل لتختار بين عدة components أيها يجب أن تضع؟ حينها استعمل ؟: هكذا:

import React from 'react';

import Page1 from './page1'
import Page2 from './page2'

export default function App() {
  return (
    <div>
      <h1>react app</h1>
    {someCondition ? <Page1 /> : <Page2 />}
    </div>
  );
}

اﻻستيراد الديناميكي يستخدم فقط حين تريد تطبيق ما يسمى code splitting وهي تقنية لتسريع اﻷداء هدفها فصل جزء من الكود لتحميله فقط عند الحاجة إليه بدلاً من تحميله دائماً بغض النظر عن استخدام الصفحة الحالية له.

إن كان هدفك هو code splitting فأنا أنصح باستخدام مكتبة loadable-components الموجودة في هذا الرابط : https://loadable-components.com/

باستخدام مكتبة loadable-components نكتب اﻵتي:

import React, { Suspense } from 'react';
import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'), {
  fallback: <div>Loading...</div>,
});

function MyComponent() {
  return (
    <div>
        <OtherComponent />
    </div>
  );
}

لاحظ أننا نستخدم import كتابع اﻵن، حين استعمالها كتابع يرد هذا التابع Promise حين انتهائه يرد webpack module وطريقة الفصل هذه مبرمجة ضمن webpack نفسه، كل ما تفعله loadable-components هو تسهيل التعامل مع dynamic import فقط لا غير فمن اﻷشياء التي تؤمنها مثلاً معامل fallback الممرر أعلاه، ما هذا المعامل؟

كما قلت هدف code splitting هو فصل جزء من الكود وتحميله فقط عند الحاجة، عندما تبدأ MyComponent بـrender فقط حينها يتم تحميل كود OtherComponent ، ريثما ينتهي التحميل ماذا تعرض للمستخدم؟ تعرض له ما تمرره للـfallback ، عند انتهاء تحميل كود OtherComponent يتم إخفاء fallback واستبداله بـOtherComponent نفسها.

ملاحظة أخيرة: الـcode splitting مفيد للأداء فقط إن كنت متأكداً أن OtherComponent تستعمل فقط من قبل صفحات معينة أما إن كانت معظم الصفحات تستعملها فلا معنى من استخدام dynamic import.