---
createdAt: 2025-11-25
updatedAt: 2025-11-25
title: i18n बंडल आकार और प्रदर्शन का अनुकूलन
description: अंतर्राष्ट्रीयकरण (i18n) सामग्री को अनुकूलित करके एप्लिकेशन बंडल आकार को कम करें। Intlayer के साथ शब्दकोशों के लिए ट्री शेकिंग और लेज़ी लोडिंग का लाभ उठाना सीखें।
keywords:
  - बंडल अनुकूलन
  - सामग्री स्वचालन
  - गतिशील सामग्री
  - Intlayer
  - Next.js
  - JavaScript
  - React
slugs:
  - doc
  - concept
  - bundle-optimization
history:
  - version: 6.0.0
    date: 2025-11-25
    changes: Init history
---

# i18n बंडल आकार और प्रदर्शन का अनुकूलन

JSON फ़ाइलों पर निर्भर पारंपरिक i18n समाधानों के साथ सबसे आम चुनौतियों में से एक सामग्री के आकार का प्रबंधन है। यदि डेवलपर्स सामग्री को मैन्युअल रूप से namespaces में विभाजित नहीं करते हैं, तो उपयोगकर्ता अक्सर केवल एक पृष्ठ देखने के लिए हर पृष्ठ और संभावित रूप से हर भाषा के अनुवाद डाउनलोड कर लेते हैं।

उदाहरण के लिए, 10 पृष्ठों वाले एक एप्लिकेशन के 10 भाषाओं में अनुवादित होने पर उपयोगकर्ता 100 पृष्ठों की सामग्री डाउनलोड कर सकता है, जबकि उसे केवल **एक** (वर्तमान पृष्ठ वर्तमान भाषा में) की आवश्यकता होती है। इससे बैंडविड्थ की बर्बादी होती है और लोड समय धीमा हो जाता है।

> इसे पता लगाने के लिए, आप `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js), या `webpack-bundle-analyzer` (React CRA / Angular / आदि) जैसे बंडल विश्लेषक का उपयोग कर सकते हैं।

**Intlayer इस समस्या को build-time optimization के माध्यम से हल करता है।** यह आपके कोड का विश्लेषण करता है ताकि पता लगाया जा सके कि कौन से डिक्शनरी वास्तव में प्रत्येक कंपोनेंट में उपयोग किए जाते हैं और केवल आवश्यक सामग्री को आपके बंडल में पुनः सम्मिलित करता है।

## विषय सूची

<TOC />

## यह कैसे काम करता है

Intlayer एक **प्रति-कंपोनेंट दृष्टिकोण** का उपयोग करता है। वैश्विक JSON फ़ाइलों के विपरीत, आपकी सामग्री आपके कंपोनेंट्स के साथ या उनके भीतर परिभाषित होती है। बिल्ड प्रक्रिया के दौरान, Intlayer:

1.  आपके कोड का **विश्लेषण** करता है ताकि `useIntlayer` कॉल्स को खोज सके।
2.  संबंधित डिक्शनरी सामग्री का **निर्माण** करता है।
3.  आपकी कॉन्फ़िगरेशन के आधार पर `useIntlayer` कॉल को अनुकूलित कोड से **प्रतिस्थापित** करता है।

यह सुनिश्चित करता है कि:

- यदि कोई कंपोनेंट आयातित नहीं है, तो उसकी सामग्री बंडल में शामिल नहीं की जाती (Dead Code Elimination)।
- यदि कोई कंपोनेंट lazy-loaded है, तो उसकी सामग्री भी lazy-loaded होती है।

## प्लेटफ़ॉर्म द्वारा सेटअप

### Next.js

Next.js को ट्रांसफ़ॉर्मेशन को संभालने के लिए `@intlayer/swc` प्लगइन की आवश्यकता होती है, क्योंकि Next.js बिल्ड के लिए SWC का उपयोग करता है।

> यह प्लगइन डिफ़ॉल्ट रूप से इंस्टॉल होता है क्योंकि SWC प्लगइन्स अभी भी Next.js के लिए प्रायोगिक हैं। भविष्य में इसमें बदलाव हो सकता है।

### Vite

Vite `@intlayer/babel` प्लगइन का उपयोग करता है जो `vite-intlayer` की निर्भरता के रूप में शामिल है। अनुकूलन डिफ़ॉल्ट रूप से सक्षम है।

### Webpack

Webpack पर Intlayer के साथ बंडल अनुकूलन सक्षम करने के लिए, आपको उपयुक्त Babel (`@intlayer/babel`) या SWC (`@intlayer/swc`) प्लगइन को इंस्टॉल और कॉन्फ़िगर करना होगा।

### Expo / Lynx

इस प्लेटफ़ॉर्म के लिए बंडल अनुकूलन **अभी उपलब्ध नहीं है**। समर्थन भविष्य के रिलीज़ में जोड़ा जाएगा।

## कॉन्फ़िगरेशन

आप अपने `intlayer.config.ts` में `build` प्रॉपर्टी के माध्यम से नियंत्रित कर सकते हैं कि Intlayer आपके बंडल को कैसे अनुकूलित करता है।

```typescript fileName="intlayer.config.ts"
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH],
    defaultLocale: Locales.ENGLISH,
  },
  dictionary: {},
  build: {
    optimize: true,
    importMode: "static", // या 'dynamic'
    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
  },
};

export default config;
```

> अधिकांश मामलों में `optimize` के लिए डिफ़ॉल्ट विकल्प रखना अनुशंसित है।

> अधिक विवरण के लिए डॉक्यूमेंटेशन कॉन्फ़िगरेशन देखें: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md)

### बिल्ड विकल्प

`build` कॉन्फ़िगरेशन ऑब्जेक्ट के तहत निम्नलिखित विकल्प उपलब्ध हैं:

| प्रॉपर्टी             | प्रकार                           | डिफ़ॉल्ट                        | विवरण                                                                                                                                                                                                                                                      |
| :-------------------- | :------------------------------- | :------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`optimize`**        | `boolean`                        | `undefined`                     | नियंत्रित करता है कि बिल्ड ऑप्टिमाइज़ेशन सक्षम है या नहीं। यदि `true` है, то Intlayer डिक्शनरी कॉल्स को ऑप्टिमाइज़्ड इंजेक्ट्स से बदल देता है। यदि `false` है, तो ऑप्टिमाइज़ेशन अक्षम होता है। आदर्श रूप से उत्पादन में इसे `true` पर सेट किया जाना चाहिए। |
| **`importMode`**      | `'static' , 'dynamic' , 'fetch'` | `'static'`                      | **Deprecated**: Use `dictionary.importMode` instead. यह निर्धारित करता है कि डिक्शनरी कैसे लोड की जाती हैं (नीце विवरण देखें)।                                                                                                                             |
| **`traversePattern`** | `string[]`                       | `['**/*.{js,ts,jsx,tsx}', ...]` | ग्लोब पैटर्न जो परिभाषित करते हैं कि Intlayer किन फाइलों को ऑप्टिमाइज़ेशन के लिए स्कैन करेगा। इसका उपयोग अप्रासंगिक फाइलों को बाहर करने और बिल्ड को तेज़ करने के लिए करें।                                                                                 |
| **`outputFormat`**    | `'esm', 'cjs'`                   | `'esm', 'cjs'`                  | निर्मित डिक्शनरी के आउटपुट फॉर्मेट को नियंत्रित करता है।                                                                                                                                                                                                   |

## इम्पोर्ट मोड्स

`importMode` सेटिंग यह निर्धारित करती है कि डिक्शनरी सामग्री आपके कंपोनेंट में कैसे इंजेक्ट की जाती है।

### 1. स्टैटिक मोड (`default`)

स्थैतिक मोड में, Intlayer `useIntlayer` को `useDictionary` से बदल देता है और डिक्शनरी को सीधे JavaScript बंडल में इंजेक्ट करता है।

- **फायदे:** त्वरित रेंडरिंग (सिंक्रोनस), हाइड्रेशन के दौरान कोई अतिरिक्त नेटवर्क अनुरोध नहीं।
- **नुकसान:** बंडल में उस विशिष्ट कंपोनेंट के लिए **सभी** उपलब्ध भाषाओं के अनुवाद शामिल होते हैं।
- **सबसे अच्छा:** सिंगल पेज एप्लिकेशन (SPA) के लिए।

**परिवर्तित कोड उदाहरण:**

```tsx
// आपका कोड
const content = useIntlayer("my-key");

// ऑप्टिमाइज़्ड कोड (स्थैतिक)
const content = useDictionary({
  key: "my-key",
  content: {
    nodeType: "translation",
    translation: {
      en: "My title",
      fr: "Mon titre",
    },
  },
});
```

### 2. डायनेमिक मोड

डायनामिक मोड में, Intlayer `useIntlayer` को `useDictionaryAsync` से बदल देता है। यह `import()` (Suspense-जैसे तंत्र) का उपयोग करता है ताकि वर्तमान लोकल के लिए JSON को लेज़ी-लोड किया जा सके।

- **फायदे:** **लोकल-स्तर पर ट्री शेकिंग।** अंग्रेज़ी संस्करण देखने वाला उपयोगकर्ता केवल अंग्रेज़ी डिक्शनरी डाउनलोड करेगा। फ्रेंच डिक्शनरी कभी लोड नहीं होती।
- **नुकसान:** हाइड्रेशन के दौरान प्रत्येक कंपोनेंट के लिए एक नेटवर्क अनुरोध (एसेट फेच) ट्रिगर होता है।
- **सबसे अच्छा:** बड़े टेक्स्ट ब्लॉक्स, लेख, या कई भाषाओं का समर्थन करने वाले एप्लिकेशन जहां बंडल का आकार महत्वपूर्ण हो।

**परिवर्तित कोड उदाहरण:**

```tsx
// आपका कोड
const content = useIntlayer("my-key");

// अनुकूलित कोड (डायनामिक)
const content = useDictionaryAsync({
  en: () =>
    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
      (mod) => mod.default
    ),
  fr: () =>
    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
      (mod) => mod.default
    ),
});
```

> जब `importMode: 'dynamic'` का उपयोग किया जाता है, यदि आपके पास एक पेज पर 100 कंपोनेंट्स हैं जो `useIntlayer` का उपयोग करते हैं, तो ब्राउज़र 100 अलग-अलग फेच करने का प्रयास करेगा। इस "वाटरफॉल" अनुरोधों से बचने के लिए, सामग्री को कम `.content` फाइलों में समूहित करें (जैसे, पेज सेक्शन के लिए एक डिक्शनरी) बजाय कि प्रत्येक एटम कंपोनेंट के लिए एक।

> वर्तमान में, `importMode: 'dynamic'` Vue और Svelte के लिए पूरी तरह से समर्थित नहीं है। इन फ्रेमवर्क्स के लिए आगे के अपडेट तक `importMode: 'static'` का उपयोग करने की सलाह दी जाती है।

### 3. लाइव मोड

डायनामिक मोड के समान व्यवहार करता है लेकिन पहले Intlayer लाइव सिंक API से शब्दकोश प्राप्त करने का प्रयास करता है। यदि API कॉल विफल हो जाती है या सामग्री लाइव अपडेट के लिए चिह्नित नहीं है, तो यह डायनामिक इम्पोर्ट पर वापस चला जाता है।

> अधिक जानकारी के लिए CMS दस्तावेज़ देखें: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md)

## सारांश: स्टैटिक बनाम डायनामिक

| फीचर                      | स्टैटिक मोड                                        | डायनामिक मोड                           |
| :------------------------ | :------------------------------------------------- | :------------------------------------- |
| **JS बंडल आकार**          | बड़ा (कंपोनेंट के लिए सभी भाषाओं को शामिल करता है) | सबसे छोटा (केवल कोड, कोई सामग्री नहीं) |
| **प्रारंभिक लोड**         | त्वरित (सामग्री बंडल में है)                       | थोड़ा विलंब (JSON प्राप्त करता है)     |
| **नेटवर्क अनुरोध**        | 0 अतिरिक्त अनुरोध                                  | प्रति शब्दकोश 1 अनुरोध                 |
| **ट्री शेकिंग**           | कंपोनेंट-स्तर                                      | कंपोनेंट-स्तर + लोकल-स्तर              |
| **सर्वोत्तम उपयोग मामला** | UI कंपोनेंट्स, छोटे ऐप्स                           | बहुत सारे टेक्स्ट वाले पेज, कई भाषाएँ  |
