تقسيم الكود في React

ما هو تقسيم الشفرة وكيفية تقديمه في تطبيق React

يمكن أن تكون تطبيقات JavaScript الحديثة ضخمة جدًا من حيث حجم الحزمة. لا تريد أن يضطر المستخدمون لديك إلى تنزيل حزمة 1 ميغابايت من JavaScript (التعليمات البرمجية الخاصة بك والمكتبات التي تستخدمها) فقط لتحميل الصفحة الأولى ، أليس كذلك؟ ولكن هذا ما يحدث افتراضيًا عند شحن تطبيق ويب حديث تم إنشاؤه باستخدام حزم Webpack.

ستحتوي هذه الحزمة على رمز قد لا يتم تشغيله أبدًا لأن المستخدم يتوقف فقط على صفحة تسجيل الدخول ولا يرى باقي تطبيقك أبدًا.

تقسيم الكود هو ممارسة تحميل جافا سكريبت فقط عندما تحتاجها.

هذا يحسن:

  • أداء تطبيقك
  • التأثير على الذاكرة ، وكذلك استخدام البطارية على الأجهزة المحمولة
  • حجم كيلو بايت الذي تم تنزيله (أو ميغا بايت)

قدمت React 16.6.0 ، التي تم إصدارها في أكتوبر 2018 ، طريقة لأداء تقسيم التعليمات البرمجية التي يجب أن تحل محل كل أداة أو مكتبة مستخدمة سابقًا:رد فعل كسولوتشويق.

React.lazyوSuspenseتشكل الطريقة المثالية لتحميل التبعية بتكاسل وتحميلها عند الحاجة فقط.

دعنا نبدء بReact.lazy. يمكنك استخدامه لاستيراد أي مكون:

import React from 'react'

const TodoList = React.lazy(() => import(’./TodoList’))

export default () => { return ( <div> <TodoList /> </div> ) }

ستتم إضافة مكون TodoList ديناميكيًا إلى الإخراج بمجرد توفره. سيقوم Webpack بإنشاء حزمة منفصلة له ، وسيتولى تحميله عند الضرورة.

Suspenseهو مكون يمكنك استخدامه لالتفاف أي مكون تم تحميله ببطء:

import React from 'react'

const TodoList = React.lazy(() => import(’./TodoList’))

export default () => { return ( <div> <React.Suspense> <TodoList /> </React.Suspense> </div> ) }

إنه يعتني بمعالجة الإخراج أثناء جلب المكون الذي تم تحميله ببطء وعرضه.

استخدمfallbackprop لإخراج بعض JSX أو إخراج مكون:

...
      <React.Suspense fallback={<p>Please wait</p>}>
        <TodoList />
      </React.Suspense>
...

كل هذا يعمل بشكل جيد مع React Router:

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

const TodoList = React.lazy(() => import(’./routes/TodoList’)) const NewTodo = React.lazy(() => import(’./routes/NewTodo’))

const App = () => ( <Router> <React.Suspense fallback={<p>Please wait</p>}> <Switch> <Route exact path="/" component={TodoList} /> <Route path="/new" component={NewTodo} /> </Switch> </React.Suspense> </Router> )

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: