Frontend Academy · पाठ

Code Splitting और Lazy Routes

route boundaries पर bundle को बाँटने के लिए dynamic import() का उपयोग करें, React और Vue components को lazy-load करें और build output में chunk sizes पर नज़र रखें।

पाठ 4, कुल 4 में से13 चरण

Code Splitting और Lazy Routes, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

कोड को विभाजित क्यों करें

एक अखंड JavaScript बंडल आपके ऐप की हर पंक्ति डाउनलोड करने के लिए प्रत्येक आगंतुक को मजबूर करता है — यहाँ तक कि उन सुविधाओं की भी, जिनका वे कभी उपयोग नहीं करते। कोड विभाजन बंडल को आवश्यकता के अनुसार लोड होने वाले छोटे हिस्सों में बाँट देता है।

डायनेमिक import()

import('./module') एक Promise लौटाता है, जो मॉड्यूल में हल होता है। बंडलर (Vite, webpack) इसे पहचानकर एक अलग हिस्सा बनाते हैं, जो रनटाइम पर लोड होता है।

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() — घटक-स्तरीय विभाजन

React.lazy(() => import('./Heavy')) ऐसा घटक बनाता है, जो पहली बार रेंडर होने पर ही अपना कोड लोड करता है। लोड होने के दौरान वैकल्पिक सामग्री दिखाने के लिए इसे <Suspense> में रखें।

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

React Router में मार्ग-आधारित विभाजन

हर मार्ग को अपना अलग हिस्सा मिलता है — उपयोगकर्ता केवल उन पेजों का कोड डाउनलोड करते हैं, जिन पर वे जाते हैं।

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Vue 3 के एसिंक्रोनस घटक

व्यू इसी पैटर्न के लिए defineAsyncComponent उपलब्ध कराता है।

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Vue Router के लेज़ी मार्ग

व्यू राउटर मार्ग परिभाषाओं में डायनेमिक आयात का समर्थन करता है — हर मार्ग के लिए अलग हिस्से बनाए जाते हैं।

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Webpack की मैजिक टिप्पणियाँ

आयात कथन के भीतर webpack की 'मैजिक टिप्पणियों' के माध्यम से हिस्से के नाम और पहले से प्राप्त करने के व्यवहार का संकेत दें।

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

Prefetch बनाम Preload

prefetch: संभावित अगले नेविगेशन के लिए खाली समय में हिस्से को डाउनलोड करना। preload: वर्तमान मार्ग के महत्वपूर्ण हिस्सों के लिए उच्च प्राथमिकता के साथ अभी डाउनलोड करना। लिंक पर कर्सर ले जाने पर prefetch और तुरंत होने वाली ज्ञात आवश्यकता के लिए preload का उपयोग करें।

बंडल विश्लेषक

हिस्सों के आकार को देखने के लिए rollup-plugin-visualizer (Vite) या webpack-bundle-analyzer का उपयोग करें। इन चीज़ों पर ध्यान दें: बहुत बड़े हिस्से, दोहराई गई निर्भरताएँ और वे लाइब्रेरी जिन्हें आपने ट्री-शेक करना भूल गए हैं।

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

वेंडर हिस्से का विभाजन

तृतीय-पक्ष लाइब्रेरी को एक अलग वेंडर हिस्से में बाँटें, जो आपके ऐप के कोड की तुलना में कम बार बदलता है — ब्राउज़र उसे अलग-अलग परिनियोजनों के बीच कैश में रख सकते हैं।

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

कब विभाजन न करें

बहुत छोटे हिस्से (20KB से कम) लाभ से अधिक नुकसान करते हैं — HTTP का अतिरिक्त भार बंडल से हुई बचत से अधिक होता है। हर घटक को अलग न करें; मार्ग की सीमाओं पर और वास्तव में भारी सुविधाओं के आसपास विभाजन करें।

त्वरित जाँच

React के lazy() रैपर को सही ढंग से रेंडर करने के लिए किसके साथ जोड़ा जाना आवश्यक है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: कोड विभाजन

डायनेमिक import() अलग-अलग हिस्से बनाता है। घटक विभाजन के लिए React.lazy और Suspense का उपयोग करें। React Router या Vue Router में लेज़ी मार्ग घटकों का उपयोग करें। संभावित अगले हिस्सों के लिए prefetch और महत्वपूर्ण हिस्सों के लिए preload का उपयोग करें। बंडल विश्लेषक अनावश्यक सामग्री दिखाता है। कैश में रखे जा सकने के लिए वेंडर लाइब्रेरी को अलग करें। 20KB से छोटे सूक्ष्म हिस्सों से बचें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Code Splitting और Lazy Routes” पाठ निःशुल्क है?

हाँ—“Code Splitting और Lazy Routes” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Code Splitting और Lazy Routes” में मैं क्या सीखूँगा?

route boundaries पर bundle को बाँटने के लिए dynamic import() का उपयोग करें, React और Vue components को lazy-load करें और build output में chunk sizes पर नज़र रखें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Code Splitting और Lazy Routes” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Core Web Vitals: LCP, FID, CLS
Lighthouse Audits और Scoring
Image Optimization: lazy loading, formats, WebP
Code Splitting और Lazy Routes

← Frontend Academy पर वापस जाएँ