CodeHub

🔸 اگه می‌خوای اندازه Bundle پروژه‌ات رو کم کنی و سرعت لود سایت رو به شدت بالا ببری، باید چندتا نکته کلیدی رو رعایت کنی. 🚀 ۱. تجزیه و تحلیل Bundle 🧐 چی کار می‌کنه؟ قبل از هر کاری، بفهم که چه چیزایی توی Bundle فضا رو می‌گیرند. ابزارهایی مثل Bundle Analyzer…

🔹 چرا Code Splitting مهمه؟ 🚀

1 - افزایش سرعت لود:
با تقسیم کد به بخش‌های کوچکتر، نیاز نیست کل کد یکجا دانلود بشه، بنابراین صفحه سریع‌تر لود می‌شه. ⚡️

2 - صرفه‌جویی در منابع:
فقط زمانی که کاربر به یک بخش خاص از برنامه نیاز داره، اون بخش از سرور دریافت می‌شه، که بهینه‌سازی منابع رو به دنبال داره. 💾

3 - بهبود تجربه کاربری:
کاهش زمان انتظار برای بارگذاری کامل برنامه، مخصوصاً در دستگاه‌هایی با اینترنت کند، تجربه کاربری رو بهبود می‌بخشه. 😊

🔹 چطور Code Splitting در React انجام می‌شه؟ ⚛️

در React، می‌تونیم با استفاده از dynamic imports و ابزارهایی مثل React.lazy و Suspense، کد رو به بخش‌های کوچکتر تقسیم کنیم. برای مثال:

import React, { Suspense } from 'react';

// بارگذاری تنبل (Lazy Loading) یک کامپوننت
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function App() {
  return (
    <div>
      <h1>برنامه من</h1>
      {/* استفاده از Suspense برای نمایش fallback تا زمان بارگذاری کامپوننت */}
      <Suspense fallback={<div>در حال بارگذاری...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default App;

در این مثال، OtherComponent فقط زمانی بارگذاری می‌شه که واقعاً لازم باشه. اگر کاربر به بخشی از برنامه که این کامپوننت استفاده می‌شه دسترسی پیدا کنه، کد اون کامپوننت از سرور دریافت و اجرا می‌شه. این روش به بهبود عملکرد و کاهش زمان بارگذاری کمک می‌کنه.

🔹 نکات کاربردی 🛠

تقسیم‌بندی مسیرها (Route-based Splitting):
در برنامه‌های چند صفحه‌ای، هر صفحه رو به صورت جداگانه بارگذاری کنیم تا زمان لود کاهش پیدا کنه.

پیکربندی ابزار Build:
ابزارهایی مثل Vite یا Webpack به‌طور خودکار از تکنیک‌های Code Splitting استفاده می‌کنن، اما می‌تونیم با تنظیمات دستی هم به این کار بپردازیم.

🔵</CodeHub>

🔥1

262 viewsedited 16:50