افزایش عملکرد با تقسیم کد در React.js

اوه، توسعه دهندگان React! آیا احساس می کنید با بسته های عظیم خود سنگین شده اید؟ 🏋️‍♂️ نگران نباشید، زیرا امروز در مورد آن صحبت خواهیم کرد تقسیم کد در React.js. در این پست آرام و آرام، به شما نشان می‌دهم که چگونه این بسته‌ها را لاغر کنید و برنامه خود را سریع‌تر از یوسین بولت در Red Bull اجرا کنید. 🏃‍♂️💨

مقدمه

تقسیم کد مانند یک بوفه همه چیز برای برنامه شما است. 🍽️ به جای اینکه همه چیز را به یکباره بارگیری کند، به برنامه شما اجازه می‌دهد فقط آنچه را که نیاز دارد بارگیری کند. زمان کمتر در انتظار برای بارگیری صفحه نمایش = کاربران شادتر. پس بیایید مهمانی را شروع کنیم و یاد بگیریم که چگونه آن کد را مانند موز تقسیم کنیم! 🍌

II. مشکل: اندازه بسته‌های بزرگ

این را تصور کنید: شما یک برنامه عالی ساخته اید و از اشتراک گذاری آن با جهان هیجان زده هستید. اما یک مشکل وجود دارد – کاربران از کندی زمان بارگذاری شکایت دارند. این به این دلیل است که برنامه شما مانند یک کشتی گیر سومو است که می خواهد دوی سرعت داشته باشد. 🏃‍♂️💨 تقسیم کد به برنامه شما کمک می کند وزن اضافی را کم کند و سریعتر از همیشه اجرا کند.

III. React.js و Code-Splitting

خوشبختانه React.js با پشتیبانی داخلی از تقسیم کد پشتیبانی می کند. مثل این است که یک مربی شخصی برای اپلیکیشن خود داشته باشید! 🏋️‍♂️🚀 دو بازیکن کلیدی در این بازی هستند React.lazy() و React.Suspense. بیایید آنها را از بین ببریم.

A. React.lazy()

React.lazy() مانند یک نینجا است که اجزا را فقط در صورت نیاز بارگذاری می کند. 🥷

در اینجا نحوه کار آن آمده است:

import React, { lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      {/* Your other components */}
      <LazyComponent />
    </div>
  );
}

ب. واکنش. تعلیق

حالا ملاقات کن React.Suspense، کمکی که هنگام افتادن جزء شما را می گیرد. 💥

این حرکت جالب را ببینید:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

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

IV. پیاده سازی Code-Splitting در React.js

وقت آن است که دستمان را کثیف کنیم و در واقع آن کد را تقسیم کنیم! این مراحل را مانند دستور العملی برای کیک خوشمزه و افزایش دهنده عملکرد دنبال کنید. 🍰

1. مولفه هایی را که باید تقسیم شوند را شناسایی کنید: به دنبال اجزای بزرگ و مستقل باشید یا قطعاتی که به ندرت بارگذاری می شوند.
2. از React.lazy برای بارگذاری کامپوننت ها استفاده کنید: جایگزین کردن import با React.lazy() همانطور که در مثال بالا انجام دادیم.
3. کامپوننت ها را با React.Suspense بپیچید: فراموش نکنید که اجزای خود را با آن درگیر کنید React.Suspense و یک بازگشت برای حالت های بارگذاری ارائه دهید.

بهترین روش ها و توصیه ها

• قطعات را در سطح مسیر تقسیم کنید، بنابراین فقط اجزای مسیر مورد نیاز بارگیری می شوند.
• وقتی می‌توانید تعامل کاربر را پیش‌بینی کنید، مؤلفه‌ها را از قبل بارگذاری کنید.
• ساده باش، ملوان! با تقسیم کردن زیاده روی نکنید. ⚓

V. تکنیک های پیشرفته تقسیم کد

احساس ماجراجویی می کنید؟ این تکنیک های پیشرفته را برای ارتقای سطح بازی تقسیم کد خود امتحان کنید. 🎮

الف. تقسیم کد مبتنی بر مسیر

روتر React باعث می‌شود که تقسیم‌بندی مبتنی بر مسیر آسان‌تر شود. آن را بررسی کنید:

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

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
const Contact = lazy(() => import('./components/Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="https://dev.to/" component={Home} />
          <Route path="https://dev.to/about" component={About} />
          <Route path="https://dev.to/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

ب. پیش بارگذاری اجزا

آیا می خواهید کاربران خود را با بارگذاری سریع رعد و برق تحت تأثیر قرار دهید؟ ⚡ آن مؤلفه‌ها را از قبل بارگذاری کنید، مثل اینکه شما یک روانی هستید که حرکت بعدی آنها را پیش‌بینی می‌کند.

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  useEffect(() => {
    setTimeout(() => {
      LazyComponent.preload();
    }, 1000);
  }, []);

  return (
    <div>
      {/* Your other components */}
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

ج. واردات پویا و تقسیم کد

با وارد کردن پویا اجزا بر اساس تعاملات کاربر، تقسیم کد را به حداکثر برسانید. مثل داشتن یک عصای جادویی است! ✨

import React, { useState, lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  const [showComponent, setShowComponent] = useState(false);

  return (
    <div>
      <button onClick={() => setShowComponent(true)}>Show Component</button>
      {showComponent && (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponent />
        </Suspense>
      )}
    </div>
  );
}

VI. تجزیه و تحلیل اندازه و عملکرد بسته نرم افزاری

شما کد خود را تقسیم کرده اید، اما چگونه می دانید که کار می کند؟ 🤔 از این ابزارها برای دریافت اطلاعاتی در مورد اندازه بسته خود استفاده کنید.

A. Webpack Bundle Analyzer

این پسر بد به شما یک تجسم نقشه درختی تعاملی از بسته نرم افزاری شما می دهد. این مانند یک بازی ویدیویی برای کد شماست!

ب. منبع Map Explorer

یکی دیگر از ابزارهای جالب برای کمک به درک اندازه بسته نرم افزاری و وابستگی های خود. این مانند داشتن دید اشعه ایکس برای کد شماست! 🦸

VII. نتیجه

پس شما آن را دارید، مردمی! با تقسیم کد، اکنون می توانید برنامه کند خود را به یک ماشین بارگیری ضعیف و متوسط ​​تبدیل کنید. 🚀 پس ادامه دهید و آن کد را تقسیم کنید که انگار به هیچکس ربطی ندارد!

سوالات بیشتری دارید؟ به یک روال تمرینی جدید برای کد خود نیاز دارید؟ 🏋️‍♂️ برای یادگیری و اکتشاف بیشتر این منابع را بررسی کنید:

برنامه نویسی مبارک، و ممکن است عملکرد با شما باشد! 🌟