Next.js 15 फुलस्टैक (App Router + Server Actions) · पाठ

बंडल आकार का विश्लेषण

प्रारंभिक पृष्ठ लोड को तेज़ करने और प्रदर्शन बेहतर बनाने के लिए अपने एप्लिकेशन के JavaScript बंडल के आकार का विश्लेषण करके उसे कम कीजिए।

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

बंडल आकार का विश्लेषण, CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 फुलस्टैक (App Router + Server Actions) सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

JavaScript बंडल क्या है?

जब आप किसी Next.js अनुप्रयोग को उत्पादन के लिए बिल्ड करते हैं, तो आपका पूरा JavaScript कोड—आपके घटक, लाइब्रेरी और स्वयं Next.js—एक या अधिक फ़ाइलों में संयोजित और अनुकूलित हो जाता है, जिन्हें "बंडल" कहा जाता है।

उपयोगकर्ता का ब्राउज़र आपका अनुप्रयोग चलाने के लिए इन्हीं बंडलों को डाउनलोड करता है।

प्रदर्शन पर प्रभाव

आपके JavaScript बंडल जितने बड़े होंगे, उपयोगकर्ता के ब्राउज़र को उन्हें डाउनलोड करने, पार्स करने और चलाने में उतना ही अधिक समय लगेगा।

धीमा लोड समय: उपयोगकर्ताओं को आपके ऐप के इंटरैक्टिव होने के लिए अधिक समय तक प्रतीक्षा करनी पड़ती है।
अधिक डेटा उपयोग: सीमित डेटा योजनाओं वाले मोबाइल उपयोगकर्ताओं के लिए विशेष रूप से महत्वपूर्ण।
खराब उपयोगकर्ता अनुभव: इससे निराशा हो सकती है और उपयोगकर्ता आपकी साइट छोड़ सकते हैं।

अपने बिल्ड आउटपुट का विश्लेषण

next build चलाने पर Next.js उपयोगी जानकारी उपलब्ध कराता है। यह प्रत्येक पृष्ठ के JavaScript बंडल का आकार दिखाता है।

हालाँकि, उन बंडलों के अंदर क्या है यह गहराई से देखने के लिए आपको विशेष उपकरणों की आवश्यकता होती है।

next build

Analyzer से बंडलों का दृश्यांकन

@next/bundle-analyzer पैकेज एक शक्तिशाली उपकरण है। यह आपके बंडलों का इंटरैक्टिव ट्रीमैप दृश्यांकन तैयार करता है।

यह दृश्य मानचित्र आपको उन बड़े मॉड्यूल या तृतीय-पक्ष लाइब्रेरी की तुरंत पहचान करने में सहायता करता है, जो आपके बंडल के आकार में महत्वपूर्ण योगदान देते हैं।

Analyzer को कॉन्फ़िगर करना

पहले पैकेज इंस्टॉल करें:

npm install --save-dev @next/bundle-analyzer

फिर इसे शर्त के आधार पर सक्षम करने के लिए अपने next.config.js को अपडेट करें:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: false,
});

module.exports = withBundleAnalyzer({});

बंडल रिपोर्ट तैयार करना

रिपोर्ट तैयार करने के लिए आपको ANALYZE पर्यावरण चर सेट करना होगा और फिर अपना Next.js बिल्ड कमांड चलाना होगा।

इससे आपके .next/analyze फ़ोल्डर में HTML फ़ाइलें बनेंगी, जिन्हें आप अपने ब्राउज़र में खोल सकते हैं।

ANALYZE=true npm run build

बंडल बड़े क्यों हो जाते हैं?

कई कारणों से बंडल का आकार आवश्यकता से अधिक बढ़ सकता है:

बड़ी लाइब्रेरी: केवल छोटे हिस्से का उपयोग करने पर भी पूरी लाइब्रेरी इम्पोर्ट करना।
डुप्लिकेट कोड: आपके ऐप के अलग-अलग हिस्सों द्वारा एक ही मॉड्यूल को इम्पोर्ट करना।
अनुपयोगी कोड: ऐसा कोड जो शामिल तो है, लेकिन कभी चलाया नहीं जाता (मृत कोड)।
भारी संसाधन: JS फ़ाइलों में सीधे इनलाइन SVG या base64 छवियाँ।

दक्षता के लिए कोड विभाजन

कोड विभाजन एक ऐसी तकनीक है जो आपके कोड को छोटे "खंडों" में बाँटती है, जिन्हें आवश्यकता पड़ने पर लोड किया जा सकता है। Next.js पृष्ठों के लिए यह कार्य स्वचालित रूप से करता है।

किसी पृष्ठ के अंदर मौजूद घटकों के लिए आप डायनेमिक इम्पोर्ट का उपयोग कर सकते हैं, ताकि वे केवल आवश्यकता होने पर लोड हों और प्रारंभिक बंडल का आकार कम हो।

घटकों को आलस्यपूर्वक लोड करना

घटकों को केवल उनके रेंडर होने पर इम्पोर्ट करने के लिए next/dynamic का उपयोग करें। यह उन घटकों के लिए बिल्कुल उपयुक्त है जो प्रारंभिक पृष्ठ लोड के लिए महत्वपूर्ण नहीं होते, जैसे मोडल या व्यवस्थापक पैनल।

import dynamic from 'next/dynamic';

const LazyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>,
});

function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <LazyComponent />
    </div>
  );
}

त्वरित जाँच: बंडल अनुकूलन

ऐसे Next.js अनुप्रयोग पर विचार कीजिए जो काफ़ी बड़ा हो गया है। प्रारंभिक JavaScript बंडल का आकार कम करने के लिए निम्नलिखित में से कौन-सी रणनीतियाँ प्रभावी हैं?

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

बंडल अनुकूलन का सारांश

बहुत बढ़िया! आपने अपने Next.js अनुप्रयोग के JavaScript बंडल आकार का विश्लेषण करना और अनुकूलन की प्रमुख तकनीकें लागू करना सीखा है।

अपने बंडलों का दृश्यांकन करने के लिए @next/bundle-analyzer का उपयोग करें।
गैर-महत्वपूर्ण घटकों के लिए डायनेमिक इम्पोर्ट लागू करें।
बड़ी तृतीय-पक्ष लाइब्रेरी के प्रति सावधान रहें और सुनिश्चित करें कि ट्री-शेकिंग प्रभावी हो।

तेज़ और प्रतिक्रियाशील उपयोगकर्ता अनुभव देने के लिए बंडल आकार का अनुकूलन अत्यंत महत्वपूर्ण है।

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

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

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

पाठ्यक्रम: 22
पाठ: 88

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

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

क्या “बंडल आकार का विश्लेषण” पाठ निःशुल्क है?

हाँ — Next.js 15 फुलस्टैक (App Router + Server Actions) अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “बंडल आकार का विश्लेषण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“बंडल आकार का विश्लेषण” में मैं क्या सीखूँगा?

प्रारंभिक पृष्ठ लोड को तेज़ करने और प्रदर्शन बेहतर बनाने के लिए अपने एप्लिकेशन के JavaScript बंडल के आकार का विश्लेषण करके उसे कम कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 फुलस्टैक (App Router + Server Actions) का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Next.js 15 फुलस्टैक (App Router + Server Actions) शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“बंडल आकार का विश्लेषण” पाठ पूरा करने में कितना समय लगता है?

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

क्या मैं इस Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

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

चित्र और फ़ॉन्ट का अनुकूलन
बंडल आकार का विश्लेषण
उन्नत कैशिंग रणनीतियाँ
Suspense और लोडिंग अवस्थाओं के साथ UI स्ट्रीमिंग

← Next.js 15 फुलस्टैक (App Router + Server Actions) पर वापस जाएँ