@intlayer/docs 9.5.7 → 9.5.8

package/blog/hi/is_intlayer_lighter_than_paraglide.md

@@ -0,0 +1,284 @@
+---
+createdAt: 2026-09-23
+updatedAt: 2026-09-23
+title: क्या Intlayer, Paraglide से हल्का है?
+description: Paraglide i18n बेंचमार्क में लगभग शून्य भार वाला प्रतीत होता है क्योंकि इसका कोड सीधे आपके रिपॉजिटरी में जेनरेट होता है। जानिए यह वजन वास्तव में कहाँ जाता है, प्रति-नोड लोकेल पढ़ना प्रदर्शन को कैसे प्रभावित करता है, और Intlayer का डायनामिक लोडिंग सभी के बजाय केवल एक लोकेल कैसे लोड करता है।
+keywords:
+  - Paraglide
+  - Intlayer
+  - अंतर्राष्ट्रीयकरण
+  - i18n
+  - Bundle size
+  - Tree shaking
+  - Benchmark
+  - Blog
+slugs:
+  - blog
+  - is-intlayer-lighter-than-paraglide
+author: aymericzip
+---
+
+# क्या Intlayer, Paraglide से हल्का है?
+
+हाँ।
+
+`Paraglide` सबसे हल्के i18n समाधान के रूप में जाना जाता है, और पहली नज़र में [बेंचमार्क](https://intlayer.org/hi/doc/benchmark/tanstack) भी इससे सहमत दिखता है: इसका लाइब्रेरी साइज शून्य के करीब है। लेकिन शून्य लाइब्रेरी साइज का मतलब यह नहीं है कि ब्राउज़र को शून्य बाइट भेजे गए हैं। इसका सीधा सा मतलब है कि बाइट्स ऐसी जगह मौजूद हैं जहाँ यह मेट्रिक ध्यान नहीं देती।
+
+<TOC/>
+
+## मुख्य निष्कर्ष
+
+**लाइब्रेरी का आकार छिपा हुआ है, समाप्त नहीं हुआ:**
+
+Paraglide अपने रनटाइम और मैसेज फ़ंक्शंस को सीधे आपके कोडबेस में जेनरेट करता है। वह कोड ब्राउज़र में भेजा जाता है, लेकिन उसे लाइब्रेरी के कोड के बजाय _आपके_ कोड के रूप में गिना जाता है।
+
+**बिना प्रोवाइडर के होना मुफ्त का लाभ नहीं है:**
+
+प्रत्येक `m.my_key()` कॉल लोकेल को अपने दम पर हल करता है, संदर्भ (context) से एक बार पढ़ने के बजाय रेंडर किए गए प्रत्येक नोड के लिए कुकी या स्टोरेज को पढ़ता है।
+
+**कोई डायनामिक लोडिंग नहीं:**
+
+Paraglide किसी मैसेज के सभी लोकेल्स को आपके क्लाइंट बंडल में इम्पोर्ट करता है। जबकि Intlayer `importMode: 'dynamic'` या `'fetch'` के साथ केवल उसी लोकेल को लोड करता है जो रेंडर हो रहा है।
+
+**Tree shaking की गारंटी नहीं है:**
+
+हमारे कुछ बेंचमार्क में, Paraglide का विज्ञापित Tree shaking काम नहीं कर सका। अपने स्वयं के बंडल की जाँच अवश्य करें।
+
+## Paraglide का वजन वास्तव में कहाँ जाता है?
+
+बेंचमार्क रिपोर्ट में, "लाइब्रेरी साइज" मेट्रिक किसी भी सामग्री को जोड़ने से पहले, खाली कंपोनेंट में प्रत्येक i18n लाइब्रेरी के प्रोवाइडर और हुक्स को मापती है।
+
+| लाइब्रेरी (TanStack Start)    | लाइब्रेरी साइज (gz) | लाइब्रेरी साइज (min) |
+| ----------------------------- | ------------------- | -------------------- |
+| `@inlang/paraglide-js@2.15.1` | 1.8 KB              | 4.5 KB               |
+| `react-intlayer@9.5.1`        | 5.0 KB              | 15.2 KB              |
+
+अलग से देखने पर Paraglide जीतता हुआ दिखता है। लेकिन Paraglide एक कंपाइलर है: यह आपकी `messages/*.json` फ़ाइलों को पढ़ता है और आपके रिपॉजिटरी में एक `paraglide/` फ़ोल्डर लिखता है, जिसमें एक `runtime.js` (लोकेल डिटेक्शन, कुकी और स्टोरेज रणनीतियाँ, URL स्थानीयकरण) और प्रति मैसेज एक जावास्क्रिप्ट फ़ंक्शन शामिल होता है।
+
+```bash
+src/paraglide/
+├── runtime.js      # लोकेल डिटेक्शन, रणनीतियाँ, URL हेल्पर्स
+├── server.js
+├── messages.js     # सभी संदेशों को पुनः निर्यात करता है
+└── messages/
+    ├── _index.js
+    ├── en.js
+    └── fr.js
+```
+
+चूँकि यह कोड आपके `src/` फ़ोल्डर में रहता है और आप इसे रिलेटिव पाथ से इम्पोर्ट करते हैं, इसलिए बंडलर इसे `node_modules` पैकेज के बजाय आपके एप्लिकेशन का हिस्सा मानता है। लाइब्रेरी साइज कॉलम में लगभग कुछ भी दिखाई नहीं देता, जबकि वही लॉजिक आपके पेज बंडल में भेजा जाता है।
+
+कोड जेनरेट करना अपने आप में कोई बुरा विचार नहीं है: जेनरेट किया गया रनटाइम केवल वही लॉजिक शामिल करता है जिसकी आपके कॉन्फ़िगरेशन को आवश्यकता होती है (प्रीफ़िक्स रणनीति, कुकी बनाम लोकल स्टोरेज, आदि)। Intlayer बिल्ड समय पर एनवायरनमेंट वेरिएबल्स इंजेक्ट करके अलग तरीके से यही परिणाम प्राप्त करता है, जिससे बंडलर उन शाखाओं को हटा देता है जिनका आपका कॉन्फ़िगरेशन उपयोग नहीं करता है। दोनों ही दृष्टिकोण `i18next` या `next-intl` की तुलना में 3 से 10 गुना हल्के साबित होते हैं।
+
+इसलिए निष्पक्ष तुलना लाइब्रेरी साइज की नहीं है। यह **प्रति पेज वास्तव में भेजे गए जावास्क्रिप्ट** की है।
+
+## मापा गया पेज वजन
+
+TanStack Start ऐप, 10 पेज, `en` और `fr` रूट्स पर मापा गया, gzip संपीड़न:
+
+| सेटअप                              | पेज JS औसत (gz) | बेस से अधिक | लोकेल लीकेज | अन्य पेज लीकेज |
+| ---------------------------------- | --------------- | ----------- | ----------- | -------------- |
+| बेस (कोई i18n नहीं)                | 111.0 KB        | -           | 0.0%        | 0.0%           |
+| `paraglide` (कोई भी रणनीति)        | 125.1 KB        | +14.1 KB    | 49.7%       | 0.0%           |
+| `intlayer` (`importMode: static`)  | 125.8 KB        | +14.8 KB    | 50.0%       | 0.0%           |
+| `intlayer` (`importMode: dynamic`) | **118.6 KB**    | **+7.6 KB** | **0.0%**    | **0.0%**       |
+
+Next.js 16 App Router, समान ऐप:
+
+| सेटअप               | पेज JS औसत (gz) | बेस से अधिक |
+| ------------------- | --------------- | ----------- |
+| बेस (कोई i18n नहीं) | 141.0 KB        | -           |
+| `paraglide-next`    | 155.3 KB        | +14.3 KB    |
+| `next-intlayer`     | **141.3 KB**    | **+0.3 KB** |
+
+<I18nBenchmark framework="tanstack" vertical/>
+
+> संपूर्ण डेटा [TanStack Start बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/tanstack) और [Next.js बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/nextjs) में उपलब्ध है। प्रत्येक बंडल का निरीक्षण [बेंचमार्क रिपॉजिटरी](https://github.com/intlayer-org/benchmark-i18n) में किया जा सकता है।
+
+दो बातें स्पष्ट रूप से सामने आती हैं:
+
+- `static` मोड में, Intlayer व्यावहारिक रूप से Paraglide के समान ही सामग्री भेजता है (125.8 KB बनाम 125.1 KB)। यह अपेक्षित है: दोनों में उस पेज द्वारा उपयोग किए जाने वाले संदेशों के सभी लोकेल शामिल होते हैं।
+- Paraglide किसी भी रणनीति में 125.1 KB पर बना रहता है, क्योंकि इसमें कोई डायनामिक मोड नहीं है। ऊपर दी गई तालिका की प्रत्येक पंक्ति इसके स्थिर मोड का प्रतिनिधित्व करती है।
+
+## कोई प्रोवाइडर नहीं: एक विचार जो अच्छा दिखता है पर है नहीं
+
+Paraglide को किसी प्रोवाइडर की आवश्यकता नहीं होती। आप सीधे मैसेज इम्पोर्ट करते हैं और कॉल करते हैं:
+
+```tsx fileName="Hero.tsx"
+import { m } from "../paraglide/messages.js";
+
+export const Hero = () => (
+  <section>
+    <h1>{m.hero_title()}</h1>
+    <p>{m.hero_description()}</p>
+    <button>{m.hero_cta()}</button>
+  </section>
+);
+```
+
+कोई संदर्भ नहीं, कोई रैपर नहीं, कोई हुक नहीं। यह सरल दिखता है। लेकिन लोकेल की जानकारी कहीं से तो आनी ही चाहिए। प्रत्येक जेनरेट किया गया मैसेज फ़ंक्शन लगभग ऐसा दिखता है (सरलीकृत):
+
+```js fileName="paraglide/messages/_index.js"
+export const hero_title = (inputs = {}, options = {}) => {
+  const locale = options.locale ?? getLocale(); // प्रत्येक कॉल पर हल किया जाता है
+
+  if (locale === "en") return en.hero_title(inputs);
+  if (locale === "fr") return fr.hero_title(inputs);
+  // ...प्रत्येक लोकेल के लिए एक ब्रांच
+};
+```
+
+और `getLocale()` वर्तमान लोकेल खोजने के लिए कॉन्फ़िगर की गई रणनीतियों (कुकी, लोकल स्टोरेज, URL, बेस लोकेल) को स्कैन करता है। इसलिए आपके द्वारा रेंडर किया जाने वाला प्रत्येक टेक्स्ट नोड (`<>{m.my_key()}</>`) अपना स्वयं का लोकेल रिज़ॉल्यूशन चलाता है, जिसमें ब्राउज़र में `document.cookie` पढ़ना भी शामिल है। 200 अनुवादित स्ट्रिंग्स वाला एक पेज प्रति रेंडर 200 बार लोकेल हल करता है, और प्रत्येक री-रेंडर पर इसे दोहराता है।
+
+एक प्रोवाइडर-आधारित लाइब्रेरी लोकेल को **केवल एक बार** पढ़ती है, इसे एक संदर्भ (या सिग्नल, या स्टोर) में संग्रहीत करती है, और प्रत्येक नोड मेमोरी में पहले से मौजूद मान को पढ़ता है। प्रोवाइडर का आकार कुछ सौ बाइट्स का होता है। इसे छोड़ने पर प्रत्येक रेंडर में सीपीयू की खपत होती है, जो बेंचमार्क में स्पष्ट दिखाई देता है: TanStack Start पर Paraglide का पेज लोड और भाषा बदलने का समय Intlayer से लगातार पीछे रहता है (पेज लोड में 22.1 ms बनाम 14.6 ms, E2E प्रतिक्रिया में 4.3 ms बनाम 3.2 ms)।
+
+## डेवलपर अनुभव (DX)
+
+Paraglide का सोर्स ऑफ ट्रुथ JSON है, लेकिन आप सीधे JSON को कभी इम्पोर्ट नहीं करते हैं। आप कंपाइलर द्वारा जेनरेट की गई `.js` फ़ाइल को इम्पोर्ट करते हैं:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="Paraglide" value="paraglide">
+
+```json fileName="messages/en.json"
+{
+  "hero_title": "Ship your app in every language"
+}
+```
+
+```json fileName="messages/hi.json"
+{
+  "hero_title": "अपने ऐप को हर भाषा में प्रकाशित करें"
+}
+```
+
+```tsx fileName="Hero.tsx"
+// कंपाइलर द्वारा JSON से पुनः उत्पन्न किए जाने के बाद ही मौजूद होता है
+import { m } from "../paraglide/messages.js";
+
+export const Hero = () => <h1>{m.hero_title()}</h1>;
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="Hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero",
+  content: {
+    title: t({
+      hi: "अपने ऐप को हर भाषा में प्रकाशित करें",
+      en: "Ship your app in every language",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```tsx fileName="Hero.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export const Hero = () => {
+  const { title } = useIntlayer("hero");
+
+  return <h1>{title}</h1>;
+};
+```
+
+  </Tab>
+</Tabs>
+
+इस कार्यप्रणाली की अपनी कमियां हैं:
+
+- JSON फ़ाइल में प्रत्येक परिवर्तन के लिए इम्पोर्ट के रिज़ॉल्व होने या प्रकारों के अपडेट होने से पहले पुनः जेनरेशन की आवश्यकता होती है।
+- जेनरेट किया गया `paraglide/` फ़ोल्डर या तो गिट में कमिट किया जाना चाहिए (जिससे टेक्स्ट बदलने वाले प्रत्येक पीआर में जेनरेट की गई फ़ाइलों पर मर्ज टकराव होता है), या इसे अनदेखा किया जाना चाहिए (जिसके लिए प्रत्येक टाइप चेक, टेस्ट और सीआई जॉब से पहले एक जेनरेशन चरण की आवश्यकता होती है)।
+- प्रत्येक स्ट्रिंग एक फ़ंक्शन कॉल बन जाती है। स्थिरांक हर जगह `m.key()` में बदल जाते हैं, यहाँ तक कि उन स्थानों पर भी जहाँ एक साधारण स्ट्रिंग मान पर्याप्त होता।
+
+## Tree Shaking: अपना बंडल जांचें
+
+Paraglide का मुख्य वादा यह है कि अप्रयुक्त संदेशों को Tree shaking द्वारा हटा दिया जाता है, क्योंकि प्रत्येक संदेश अपना स्वयं का निर्यात होता है। Svelte + Vite बेंचमार्क में, यह विज्ञापनों के अनुसार काम करता है।
+
+अन्य सेटअपों में ऐसा नहीं हुआ। हमारे [Next.js](https://intlayer.org/hi/doc/benchmark/nextjs) परीक्षण में, Paraglide के पेज बेस ऐप से 14 KB अधिक भारी थे, जबकि `next-intlayer` ने केवल 0.3 KB जोड़ा। TanStack Start पर पहले के परीक्षणों से यह भी पता चला कि अन्य पेजों के संदेश भी वर्तमान रूट बंडल में शामिल हो रहे थे।
+
+Tree shaking आपके बंडलर (Turbopack, Rolldown, Rollup), संदेशों को आयात करने के तरीके (`import { m }` बनाम `import * as m`) और साइड-इफेक्ट विश्लेषण पर निर्भर करता है। यदि आप इसके आकार के कारण Paraglide चुनते हैं, तो अपने बंडल विज़ुअलाइज़र को खोलें और सत्यापित करें कि यह आपके ऐप में सही काम कर रहा है या नहीं।
+
+## कोई डायनामिक लोडिंग नहीं
+
+यह संरचनात्मक सीमा है। Paraglide के पास एक समय में एक लोकेल लोड करने का कोई साधन नहीं है: प्रत्येक संदेश फ़ंक्शन प्रत्येक भाषा के कार्यान्वयन को स्थैतिक रूप से आयात करता है, इसलिए सभी भाषाएं आपके क्लाइंट बंडल में समाप्त हो जाती हैं।
+
+2 भाषाओं के साथ, आपका आधा अनुवाद पेलोड बर्बाद हो जाता है, जो ऊपर मापे गए ~50% लोकेल रिसाव से मेल खाता है। 10 भाषाओं के साथ, 90% पेलोड बर्बाद होता है। 30 भाषाओं के साथ, 97%।
+
+डायनामिक लोडिंग पर स्विच करने से भी इसका समाधान नहीं होगा: प्रति संदेश एक फ़ंक्शन होने के कारण, प्रत्येक फ़ंक्शन को लेज़ी-लोड करने का अर्थ हजारों नेटवर्क अनुरोध होगा।
+
+Intlayer आपको विश्व स्तर पर या प्रति डिक्शनरी चुनने की सुविधा देता है:
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  dictionary: {
+    importMode: "dynamic", // 'static' | 'dynamic' | 'fetch'
+  },
+};
+
+export default config;
+```
+
+| `importMode` | क्लाइंट को क्या भेजा जाता है                           | Paraglide की तुलना में             |
+| ------------ | ------------------------------------------------------ | ---------------------------------- |
+| `static`     | पेज द्वारा उपयोग की जाने वाली डिक्शनरी के सभी लोकेल्स  | सैद्धांतिक रूप से समान सामग्री     |
+| `dynamic`    | केवल वर्तमान लोकेल, प्रति डिक्शनरी लेज़ी-लोड किया गया  | N भाषाओं में **N गुना अधिक हल्का** |
+| `fetch`      | केवल वर्तमान लोकेल, Live Sync API के माध्यम से प्राप्त | N भाषाओं में **N गुना अधिक हल्का** |
+
+[बिल्ड ट्रांसफ़ॉर्मेशन](https://intlayer.org/hi/doc/concept/bundle-optimization) और `importMode: 'static'` के साथ, Intlayer सैद्धांतिक रूप से Paraglide के समान ही सामग्री लोड करता है। `'dynamic'` या `'fetch'` के साथ, यह केवल वही लोड करता है जिसकी वर्तमान लोकेल को आवश्यकता होती है: N भाषाओं वाले ऐप के लिए, अनुवाद पेलोड Paraglide की तुलना में N गुना छोटा होता है।
+
+## Paraglide कहाँ अभी भी उपयुक्त है
+
+<AccordionGroup>
+<Accordion header="कम भाषाओं के साथ Svelte + Vite">
+
+यदि आपका स्टैक Vite के साथ Svelte है और आप दो या तीन भाषाओं का समर्थन करते हैं, तो Tree shaking विज्ञापनों के अनुसार काम करता है और लोकेल का ओवरहेड छोटा रहता है।
+
+</Accordion>
+<Accordion header="मौजूदा inlang वर्कफ़्लो">
+
+यदि आपकी टीम पहले से ही inlang पारिस्थितिकी तंत्र (Fink, Sherlock, मैसेज फॉर्मेट प्लगइन्स) का उपयोग करती है, तो Paraglide इसके साथ मूल रूप से एकीकृत होता है।
+
+</Accordion>
+</AccordionGroup>
+
+## अपने ऐप पर इसे आज़माएं
+
+मुफ़्त [i18n SEO Scanner](https://intlayer.org/i18n-seo-scanner) के साथ अपने लाइव एप्लिकेशन के पेलोड और लोकेल लीकेज की जाँच करें:
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+Intlayer सेट अप करने के लिए:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+## अतिरिक्त संदर्भ
+
+- [TanStack Start i18n बेंचमार्क](https://intlayer.org/hi/doc/benchmark/tanstack)
+- [Next.js i18n बेंचमार्क](https://intlayer.org/hi/doc/benchmark/nextjs)
+- [बंडल अनुकूलन और `importMode`](https://intlayer.org/hi/doc/concept/bundle-optimization)
+- [React i18n लाइब्रेरी कैसे चुनें](https://intlayer.org/hi/blog/how-to-pick-react-i18n-library)
+- [कंपाइलर-संचालित अंतर्राष्ट्रीयकरण के पक्ष और विपक्ष](https://intlayer.org/hi/blog/compiler-vs-declarative-i18n)

package/blog/id/is_intlayer_lighter_than_paraglide.md

@@ -0,0 +1,284 @@
+---
+createdAt: 2026-09-23
+updatedAt: 2026-09-23
+title: Apakah Intlayer lebih ringan dari Paraglide?
+description: Paraglide terlihat hampir tanpa beban dalam tolok ukur i18n karena kodenya dibuat langsung di repositori Anda. Berikut analisis ke mana beban tersebut sebenarnya berada, mengapa pembacaan lokal per-node membebani performa, dan bagaimana pemuatan dinamis Intlayer mengirimkan satu bahasa saja alih-alih semuanya.
+keywords:
+  - Paraglide
+  - Intlayer
+  - Internasionalisasi
+  - i18n
+  - Bundle size
+  - Tree shaking
+  - Benchmark
+  - Blog
+slugs:
+  - blog
+  - is-intlayer-lighter-than-paraglide
+author: aymericzip
+---
+
+# Apakah Intlayer lebih ringan dari Paraglide?
+
+Ya.
+
+`Paraglide` memiliki reputasi yang sangat baik sebagai solusi i18n paling ringan, dan sekilas hasil [benchmark](https://intlayer.org/id/doc/benchmark/tanstack) mengonfirmasi hal tersebut: ukuran pustakanya mendekati nol. Namun, ukuran pustaka nol tidak berarti nol bita yang dikirim ke peramban. Itu hanya berarti bita-bita tersebut berada di tempat yang tidak diukur oleh metrik tersebut.
+
+<TOC/>
+
+## Poin Kunci
+
+**Ukuran pustaka disembunyikan, bukan dihilangkan:**
+
+Paraglide membuat kode runtime dan fungsi pesannya langsung di dalam codebase Anda. Kode tersebut tetap dikirim ke peramban, tetapi dihitung sebagai kode _Anda_, bukan sebagai kode pustaka pihak ketiga.
+
+**Tanpa provider bukan berarti kemenangan cuma-cuma:**
+
+Setiap pemanggilan `m.my_key()` menyelesaikan penentuan lokal secara mandiri, membaca cookie atau penyimpanan untuk setiap node yang dirender, alih-alih membacanya sekali saja dari sebuah konteks.
+
+**Tidak ada pemuatan dinamis (Dynamic Loading):**
+
+Paraglide mengimpor seluruh bahasa dari sebuah pesan ke dalam bundle klien Anda. Sebaliknya, Intlayer dengan `importMode: 'dynamic'` atau `'fetch'` hanya memuat bahasa yang sedang dirender.
+
+**Tree shaking tidak selalu terjamin:**
+
+Dalam beberapa pengujian tolok ukur kami, tree shaking yang digadang-gadang oleh Paraglide tidak bekerja efektif. Sebaiknya periksa bundle aplikasi Anda sendiri.
+
+## Ke Mana Sebenarnya Beban Paraglide Berada?
+
+Dalam laporan tolok ukur, metrik "ukuran pustaka" mengukur provider dan hook dari masing-masing pustaka i18n pada komponen kosong, sebelum konten apa pun ditambahkan.
+
+| Pustaka (TanStack Start)      | Ukuran lib (gz) | Ukuran lib (min) |
+| ----------------------------- | --------------- | ---------------- |
+| `@inlang/paraglide-js@2.15.1` | 1.8 KB          | 4.5 KB           |
+| `react-intlayer@9.5.1`        | 5.0 KB          | 15.2 KB          |
+
+Jika dibaca secara terpisah, Paraglide tampak unggul. Namun Paraglide adalah sebuah kompilator: ia membaca berkas `messages/*.json` Anda dan menulis folder `paraglide/` ke repositori Anda, yang berisi `runtime.js` (deteksi lokal, strategi cookie dan penyimpanan, pelokalan URL) serta satu fungsi JavaScript per pesan.
+
+```bash
+src/paraglide/
+├── runtime.js      # deteksi lokal, strategi, helper URL
+├── server.js
+├── messages.js     # mengekspor kembali semua pesan
+└── messages/
+    ├── _index.js
+    ├── en.js
+    └── fr.js
+```
+
+Karena kode ini berada di dalam folder `src/` Anda dan diimpor menggunakan jalur relatif, bundler menganggapnya sebagai bagian dari aplikasi Anda, bukan paket luar di `node_modules`. Kolom ukuran pustaka memperlihatkan angka mendekati nol, padahal logika yang sama tetap dikirim dalam bundle halaman Anda.
+
+Menghasilkan kode otomatis bukanlah ide buruk: runtime yang dihasilkan hanya memuat logika yang benar-benar dibutuhkan konfigurasi Anda (strategi awalan, cookie vs local storage, dll.). Intlayer mencapai hasil yang sama dengan cara berbeda, yaitu menyuntikkan variabel lingkungan saat proses build sehingga bundler membuang percabangan kode yang tidak digunakan konfigurasi Anda. Kedua pendekatan ini berakhir 3 hingga 10 kali lebih ringan daripada `i18next` atau `next-intl`.
+
+Oleh karena itu, perbandingan yang adil bukanlah ukuran pustakanya, melainkan **JavaScript yang benar-benar dikirimkan per halaman**.
+
+## Beban Halaman yang Terukur
+
+Aplikasi TanStack Start, 10 halaman, diukur pada rute `en` dan `fr`, dikompresi dengan gzip:
+
+| Konfigurasi                        | Rata-rata JS Hal (gz) | Di atas dasar | Kebocoran lokal | Kebocoran hal lain |
+| ---------------------------------- | --------------------- | ------------- | --------------- | ------------------ |
+| Dasar (tanpa i18n)                 | 111.0 KB              | -             | 0.0%            | 0.0%               |
+| `paraglide` (semua strategi)       | 125.1 KB              | +14.1 KB      | 49.7%           | 0.0%               |
+| `intlayer` (`importMode: static`)  | 125.8 KB              | +14.8 KB      | 50.0%           | 0.0%               |
+| `intlayer` (`importMode: dynamic`) | **118.6 KB**          | **+7.6 KB**   | **0.0%**        | **0.0%**           |
+
+Next.js 16 App Router, aplikasi yang sama:
+
+| Konfigurasi        | Rata-rata JS Hal (gz) | Di atas dasar |
+| ------------------ | --------------------- | ------------- |
+| Dasar (tanpa i18n) | 141.0 KB              | -             |
+| `paraglide-next`   | 155.3 KB              | +14.3 KB      |
+| `next-intlayer`    | **141.3 KB**          | **+0.3 KB**   |
+
+<I18nBenchmark framework="tanstack" vertical/>
+
+> Data lengkap tersedia di [laporan benchmark TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack) dan [laporan benchmark Next.js](https://intlayer.org/id/doc/benchmark/nextjs). Setiap bundle dapat diperiksa langsung di [repositori benchmark](https://github.com/intlayer-org/benchmark-i18n).
+
+Dua hal terlihat sangat jelas:
+
+- Dalam mode `static`, Intlayer mengirimkan konten yang hampir sama persis dengan Paraglide (125.8 KB vs 125.1 KB). Hal ini wajar: keduanya menyertakan semua bahasa dari pesan yang digunakan oleh halaman tersebut.
+- Paraglide tetap berada di angka 125.1 KB apa pun strateginya, karena tidak memiliki mode dinamis. Setiap baris pada tabel di atas mewakili mode statis.
+
+## Tanpa Provider: Ide yang Tampak Bagus Namun Berisiko
+
+Paraglide tidak memerlukan provider. Anda cukup mengimpor pesan dan memanggilnya:
+
+```tsx fileName="Hero.tsx"
+import { m } from "../paraglide/messages.js";
+
+export const Hero = () => (
+  <section>
+    <h1>{m.hero_title()}</h1>
+    <p>{m.hero_description()}</p>
+    <button>{m.hero_cta()}</button>
+  </section>
+);
+```
+
+Tanpa konteks, tanpa wrapper, tanpa hook. Tampak lebih sederhana. Namun, informasi bahasa tetap harus diperoleh dari suatu tempat. Setiap fungsi pesan yang dihasilkan kurang lebih tampak seperti ini (disederhanakan):
+
+```js fileName="paraglide/messages/_index.js"
+export const hero_title = (inputs = {}, options = {}) => {
+  const locale = options.locale ?? getLocale(); // diselesaikan pada setiap pemanggilan
+
+  if (locale === "en") return en.hero_title(inputs);
+  if (locale === "fr") return fr.hero_title(inputs);
+  // ...satu percabangan per bahasa
+};
+```
+
+Dan `getLocale()` menelusuri seluruh strategi yang dikonfigurasi (cookie, penyimpanan lokal, URL, bahasa dasar) untuk menemukan lokal aktif. Akibatnya, setiap node teks yang Anda render (`<>{m.my_key()}</>`) menjalankan proses resolusi lokalnya sendiri, termasuk membaca `document.cookie` di peramban. Halaman dengan 200 string terjemahan akan menyelesaikan lokal sebanyak 200 kali per render, dan berulang kembali pada setiap re-render.
+
+Pustaka berbasis provider membaca lokal **hanya sekali**, menyimpannya dalam konteks (atau sinyal, atau store), dan setiap node hanya membaca nilai yang sudah tersedia di memori. Biaya provider hanya beberapa ratus bita. Menghilangkannya justru membebani kerja CPU pada setiap render. Hal ini terbukti dalam tolok ukur: waktu muat halaman dan pergantian bahasa Paraglide konsisten berada di belakang Intlayer pada TanStack Start (waktu muat halaman 22.1 ms vs 14.6 ms, reaktivitas E2E 4.3 ms vs 3.2 ms).
+
+## Pengalaman Pengembang (DX)
+
+Sumber kebenaran Paraglide adalah berkas JSON, tetapi Anda tidak pernah mengimpor berkas JSON secara langsung. Anda mengimpor berkas `.js` yang dihasilkan:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="Paraglide" value="paraglide">
+
+```json fileName="messages/en.json"
+{
+  "hero_title": "Ship your app in every language"
+}
+```
+
+```json fileName="messages/id.json"
+{
+  "hero_title": "Rilis aplikasi Anda dalam semua bahasa"
+}
+```
+
+```tsx fileName="Hero.tsx"
+// Hanya ada setelah kompilator membuatnya ulang dari JSON
+import { m } from "../paraglide/messages.js";
+
+export const Hero = () => <h1>{m.hero_title()}</h1>;
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="Hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero",
+  content: {
+    title: t({
+      id: "Rilis aplikasi Anda dalam semua bahasa",
+      en: "Ship your app in every language",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```tsx fileName="Hero.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export const Hero = () => {
+  const { title } = useIntlayer("hero");
+
+  return <h1>{title}</h1>;
+};
+```
+
+  </Tab>
+</Tabs>
+
+Alur kerja semacam ini menimbulkan konsekuensi:
+
+- Setiap perubahan pada berkas JSON memerlukan pembuatan ulang (regeneration) sebelum import dapat dikenali atau tipe data diperbarui.
+- Folder `paraglide/` yang dibuat harus diikutsertakan dalam commit git (memicu konflik merge pada berkas buatan di setiap PR teks), atau diabaikan (mengharuskan langkah kompilasi sebelum pemeriksaan tipe, pengujian, dan tugas CI).
+- Setiap string berubah menjadi pemanggilan fungsi. Konstanta berubah menjadi `m.key()` di mana-mana, bahkan di tempat yang sebenarnya cukup dengan nilai statis biasa.
+
+## Tree Shaking: Periksa Bundle Anda
+
+Janji utama Paraglide adalah bahwa pesan yang tidak digunakan akan dibuang melalui tree shaking, karena setiap pesan merupakan ekspor mandiri. Pada tolok ukur Svelte + Vite, fitur ini bekerja sesuai klaim.
+
+Namun dalam konfigurasi lain, hal itu tidak terjadi. Pada pengujian [Next.js](https://intlayer.org/id/doc/benchmark/nextjs) kami, halaman Paraglide berbobot 14 KB lebih berat daripada aplikasi dasar, sedangkan `next-intlayer` hanya menambahkan 0.3 KB. Pengujian awal di TanStack Start juga memperlihatkan pesan dari halaman lain ikut terbawa ke dalam bundle rute yang sedang dibuka.
+
+Tree shaking sangat bergantung pada bundler Anda (Turbopack, Rolldown, Rollup), cara pesan diimpor (`import { m }` vs `import * as m`), dan analisis efek samping (side effects). Jika Anda memilih Paraglide karena pertimbangan ukuran, buka visualizer bundle Anda dan pastikan fitur tersebut bekerja di aplikasi Anda.
+
+## Tanpa Pemuatan Dinamis
+
+Inilah batasan struktural utamanya. Paraglide tidak memiliki mekanisme untuk memuat satu bahasa dalam satu waktu: setiap fungsi pesan secara statis mengimpor implementasi setiap bahasa, sehingga seluruh bahasa berakhir di dalam bundle klien Anda.
+
+Dengan 2 bahasa, separuh muatan terjemahan terbuang sia-sia, cocok dengan ~50% kebocoran lokal yang diukur sebelumnya. Dengan 10 bahasa, pemborosan mencapai 90%. Dengan 30 bahasa, melonjak hingga 97%.
+
+Beralih ke pemuatan dinamis pun tidak serta-merta menyelesaikan masalah: dengan satu fungsi untuk setiap pesan, memuat setiap fungsi secara lazy akan memicu ribuan permintaan jaringan yang terpisah-pisah.
+
+Intlayer memberi Anda fleksibilitas untuk memilih secara global maupun per kamus:
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  dictionary: {
+    importMode: "dynamic", // 'static' | 'dynamic' | 'fetch'
+  },
+};
+
+export default config;
+```
+
+| `importMode` | Yang dikirimkan ke klien                                | vs. Paraglide                           |
+| ------------ | ------------------------------------------------------- | --------------------------------------- |
+| `static`     | Seluruh bahasa dari kamus yang digunakan halaman        | Secara teori muatan sama                |
+| `dynamic`    | Hanya bahasa aktif, dimuat secara lazy per kamus        | **N kali lebih ringan** dengan N bahasa |
+| `fetch`      | Hanya bahasa aktif, diambil langsung dari Live Sync API | **N kali lebih ringan** dengan N bahasa |
+
+Dengan [transformasi build](https://intlayer.org/id/doc/concept/bundle-optimization) dan `importMode: 'static'`, Intlayer secara teoritis memuat konten yang sama persis dengan Paraglide. Namun dengan mode `'dynamic'` atau `'fetch'`, ia hanya memuat apa yang dibutuhkan bahasa saat ini: untuk aplikasi dengan N bahasa, beban terjemahan menjadi N kali lebih kecil daripada Paraglide.
+
+## Kapan Paraglide Masih Relevan?
+
+<AccordionGroup>
+<Accordion header="Svelte + Vite dengan sedikit bahasa">
+
+Jika teknologi Anda menggunakan Svelte bersama Vite dan Anda hanya mendukung dua atau tiga bahasa, tree shaking bekerja sesuai harapan dan overhead bahasa tambahan tetap minim.
+
+</Accordion>
+<Accordion header="Alur kerja inlang yang sudah ada">
+
+Jika tim Anda sudah terbiasa menggunakan ekosistem inlang (Fink, Sherlock, plugin format pesan), Paraglide terintegrasi secara mulus.
+
+</Accordion>
+</AccordionGroup>
+
+## Uji Sendiri di Aplikasi Anda
+
+Periksa ukuran muatan dan kebocoran lokal aplikasi produksi Anda dengan [i18n SEO Scanner](https://intlayer.org/i18n-seo-scanner) gratis:
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+Untuk menyiapkan Intlayer:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+## Bacaan Lanjutan
+
+- [Benchmark i18n TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack)
+- [Benchmark i18n Next.js](https://intlayer.org/id/doc/benchmark/nextjs)
+- [Optimasi Bundle dan `importMode`](https://intlayer.org/id/doc/concept/bundle-optimization)
+- [Cara Memilih Pustaka i18n untuk React](https://intlayer.org/id/blog/how-to-pick-react-i18n-library)
+- [Alasan Memilih Internasionalisasi Berbasis Kompilator](https://intlayer.org/id/blog/compiler-vs-declarative-i18n)