@intlayer/docs 7.3.0-canary.0 → 7.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/generated/docs.entry.cjs +19 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +19 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/bundle_optimization.md +180 -0
- package/docs/ar/vs_code_extension.md +4 -0
- package/docs/de/bundle_optimization.md +190 -0
- package/docs/de/how_works_intlayer.md +1 -1
- package/docs/de/vs_code_extension.md +4 -0
- package/docs/en/bundle_optimization.md +180 -0
- package/docs/en/configuration.md +5 -2
- package/docs/en/how_works_intlayer.md +1 -1
- package/docs/en/vs_code_extension.md +7 -0
- package/docs/en-GB/bundle_optimization.md +180 -0
- package/docs/en-GB/how_works_intlayer.md +1 -1
- package/docs/en-GB/vs_code_extension.md +4 -0
- package/docs/es/bundle_optimization.md +190 -0
- package/docs/es/how_works_intlayer.md +1 -1
- package/docs/es/vs_code_extension.md +4 -0
- package/docs/fr/bundle_optimization.md +180 -0
- package/docs/fr/how_works_intlayer.md +1 -1
- package/docs/fr/vs_code_extension.md +4 -0
- package/docs/hi/bundle_optimization.md +180 -0
- package/docs/hi/vs_code_extension.md +4 -0
- package/docs/id/bundle_optimization.md +180 -0
- package/docs/id/how_works_intlayer.md +1 -1
- package/docs/id/vs_code_extension.md +4 -0
- package/docs/it/bundle_optimization.md +180 -0
- package/docs/it/how_works_intlayer.md +1 -1
- package/docs/it/vs_code_extension.md +4 -0
- package/docs/ja/bundle_optimization.md +180 -0
- package/docs/ja/vs_code_extension.md +4 -0
- package/docs/ko/bundle_optimization.md +180 -0
- package/docs/ko/vs_code_extension.md +4 -0
- package/docs/pl/bundle_optimization.md +180 -0
- package/docs/pl/how_works_intlayer.md +1 -1
- package/docs/pl/vs_code_extension.md +4 -0
- package/docs/pt/bundle_optimization.md +180 -0
- package/docs/pt/how_works_intlayer.md +1 -1
- package/docs/pt/vs_code_extension.md +4 -0
- package/docs/ru/bundle_optimization.md +180 -0
- package/docs/ru/vs_code_extension.md +4 -0
- package/docs/tr/bundle_optimization.md +180 -0
- package/docs/tr/how_works_intlayer.md +1 -1
- package/docs/tr/vs_code_extension.md +4 -0
- package/docs/vi/bundle_optimization.md +180 -0
- package/docs/vi/vs_code_extension.md +4 -0
- package/docs/zh/bundle_optimization.md +180 -0
- package/docs/zh/vs_code_extension.md +4 -0
- package/package.json +8 -8
- package/src/generated/docs.entry.ts +19 -0
|
@@ -4,6 +4,7 @@ import { LocalesValues } from "@intlayer/types";
|
|
|
4
4
|
declare const docsEntry: {
|
|
5
5
|
readonly './docs/en/CI_CD.md': Record<LocalesValues, Promise<string>>;
|
|
6
6
|
readonly './docs/en/autoFill.md': Record<LocalesValues, Promise<string>>;
|
|
7
|
+
readonly './docs/en/bundle_optimization.md': Record<LocalesValues, Promise<string>>;
|
|
7
8
|
readonly './docs/en/cli/build.md': Record<LocalesValues, Promise<string>>;
|
|
8
9
|
readonly './docs/en/cli/configuration.md': Record<LocalesValues, Promise<string>>;
|
|
9
10
|
readonly './docs/en/cli/debug.md': Record<LocalesValues, Promise<string>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"docs.entry.d.ts","names":[],"sources":["../../../src/generated/docs.entry.ts"],"sourcesContent":[],"mappings":";;;cAsDa;iCAmBK,OAAO,eAAe;EAnB3B,SAAA,
|
|
1
|
+
{"version":3,"file":"docs.entry.d.ts","names":[],"sources":["../../../src/generated/docs.entry.ts"],"sourcesContent":[],"mappings":"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"}
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-11-25
|
|
3
|
+
updatedAt: 2025-11-25
|
|
4
|
+
title: تحسين حجم وأداء حزمة i18n
|
|
5
|
+
description: تقليل حجم حزمة التطبيق من خلال تحسين محتوى التدويل (i18n). تعلّم كيفية الاستفادة من tree shaking والتحميل الكسول للقواميس باستخدام Intlayer.
|
|
6
|
+
keywords:
|
|
7
|
+
- تحسين الحزمة
|
|
8
|
+
- أتمتة المحتوى
|
|
9
|
+
- المحتوى الديناميكي
|
|
10
|
+
- Intlayer
|
|
11
|
+
- Next.js
|
|
12
|
+
- JavaScript
|
|
13
|
+
- React
|
|
14
|
+
slugs:
|
|
15
|
+
- doc
|
|
16
|
+
- concept
|
|
17
|
+
- bundle-optimization
|
|
18
|
+
history:
|
|
19
|
+
- version: 6.0.0
|
|
20
|
+
date: 2025-11-25
|
|
21
|
+
changes: بدء السجل
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# تحسين حجم وأداء حزمة i18n
|
|
25
|
+
|
|
26
|
+
واحدة من أكثر التحديات شيوعًا مع حلول i18n التقليدية التي تعتمد على ملفات JSON هي إدارة حجم المحتوى. إذا لم يقم المطورون بفصل المحتوى يدويًا إلى مساحات أسماء، غالبًا ما ينتهي الأمر بالمستخدمين إلى تنزيل ترجمات لكل صفحة وربما لكل لغة لمجرد عرض صفحة واحدة.
|
|
27
|
+
|
|
28
|
+
على سبيل المثال، قد يؤدي تطبيق يحتوي على 10 صفحات مترجمة إلى 10 لغات إلى قيام المستخدم بتنزيل محتوى 100 صفحة، على الرغم من حاجته إلى **صفحة واحدة** فقط (الصفحة الحالية باللغة الحالية). هذا يؤدي إلى هدر في عرض النطاق الترددي وبطء في أوقات التحميل.
|
|
29
|
+
|
|
30
|
+
> لاكتشاف ذلك، يمكنك استخدام محلل الحزمة مثل `rollup-plugin-visualizer` (vite)، `@next/bundle-analyzer` (next.js)، أو `webpack-bundle-analyzer` (React CRA / Angular / إلخ).
|
|
31
|
+
|
|
32
|
+
**تحل Intlayer هذه المشكلة من خلال تحسين وقت البناء.** تقوم بتحليل الكود الخاص بك لاكتشاف القواميس المستخدمة فعليًا لكل مكون وتعيد حقن المحتوى الضروري فقط في الحزمة الخاصة بك.
|
|
33
|
+
|
|
34
|
+
## جدول المحتويات
|
|
35
|
+
|
|
36
|
+
<TOC />
|
|
37
|
+
|
|
38
|
+
## كيف تعمل
|
|
39
|
+
|
|
40
|
+
تستخدم Intlayer **نهجًا لكل مكون**. على عكس ملفات JSON العالمية، يتم تعريف المحتوى الخاص بك بجانب مكوناتك أو داخلها. خلال عملية البناء، تقوم Intlayer بـ:
|
|
41
|
+
|
|
42
|
+
1. **تحليل** الكود الخاص بك للعثور على استدعاءات `useIntlayer`.
|
|
43
|
+
2. **بناء** محتوى القاموس المقابل.
|
|
44
|
+
3. **استبدال** استدعاء `useIntlayer` بكود محسن بناءً على تكوينك.
|
|
45
|
+
|
|
46
|
+
هذا يضمن أن:
|
|
47
|
+
|
|
48
|
+
- إذا لم يتم استيراد مكون، فلن يتم تضمين محتواه في الحزمة (إزالة الكود الميت).
|
|
49
|
+
- إذا تم تحميل مكون بشكل كسول، فسيتم أيضًا تحميل محتواه بشكل كسول.
|
|
50
|
+
|
|
51
|
+
## الإعداد حسب المنصة
|
|
52
|
+
|
|
53
|
+
### Next.js
|
|
54
|
+
|
|
55
|
+
يتطلب Next.js إضافة `@intlayer/swc` للتعامل مع التحويل، حيث يستخدم Next.js SWC في عمليات البناء.
|
|
56
|
+
|
|
57
|
+
> يتم تثبيت هذه الإضافة بشكل افتراضي لأن إضافات SWC لا تزال تجريبية لـ Next.js. قد يتغير ذلك في المستقبل.
|
|
58
|
+
|
|
59
|
+
### Vite
|
|
60
|
+
|
|
61
|
+
يستخدم Vite إضافة `@intlayer/babel` التي تدرج كاعتماد ضمن `vite-intlayer`. يتم تمكين التحسين بشكل افتراضي.
|
|
62
|
+
|
|
63
|
+
### Webpack
|
|
64
|
+
|
|
65
|
+
لتمكين تحسين الحزمة مع Intlayer على Webpack، تحتاج إلى تثبيت وتكوين إضافة Babel المناسبة (`@intlayer/babel`) أو SWC (`@intlayer/swc`).
|
|
66
|
+
|
|
67
|
+
### Expo / Lynx
|
|
68
|
+
|
|
69
|
+
تحسين الحزمة **غير متوفر بعد** لهذه المنصة. سيتم إضافة الدعم في إصدار مستقبلي.
|
|
70
|
+
|
|
71
|
+
## التكوين
|
|
72
|
+
|
|
73
|
+
يمكنك التحكم في كيفية تحسين Intlayer لحزمتك عبر خاصية `build` في ملف `intlayer.config.ts` الخاص بك.
|
|
74
|
+
|
|
75
|
+
```typescript fileName="intlayer.config.ts"
|
|
76
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
77
|
+
|
|
78
|
+
const config: IntlayerConfig = {
|
|
79
|
+
internationalization: {
|
|
80
|
+
locales: [Locales.ENGLISH, Locales.FRENCH],
|
|
81
|
+
defaultLocale: Locales.ENGLISH,
|
|
82
|
+
},
|
|
83
|
+
build: {
|
|
84
|
+
optimize: true,
|
|
85
|
+
importMode: "static", // أو 'dynamic'
|
|
86
|
+
traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export default config;
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
> يُنصح بالاحتفاظ بالخيار الافتراضي لـ `optimize` في معظم الحالات.
|
|
94
|
+
|
|
95
|
+
> راجع توثيق التكوين لمزيد من التفاصيل: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md)
|
|
96
|
+
|
|
97
|
+
### خيارات البناء
|
|
98
|
+
|
|
99
|
+
الخيارات التالية متاحة ضمن كائن تكوين `build`:
|
|
100
|
+
|
|
101
|
+
| الخاصية | النوع | القيمة الافتراضية | الوصف |
|
|
102
|
+
| :-------------------- | :------------------------------ | :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
103
|
+
| **`optimize`** | `boolean` | `undefined` | يتحكم فيما إذا كان تفعيل تحسين البناء ممكّنًا. إذا كانت القيمة `true`، يقوم Intlayer باستبدال استدعاءات القاموس بحقنات محسّنة. إذا كانت `false`، يتم تعطيل التحسين. من المثالي تعيينها إلى `true` في بيئة الإنتاج. |
|
|
104
|
+
| **`importMode`** | `'static' , 'dynamic' , 'live'` | `'static'` | يحدد كيفية تحميل القواميس (انظر التفاصيل أدناه). |
|
|
105
|
+
| **`traversePattern`** | `string[]` | `['**/*.{js,ts,jsx,tsx}', ...]` | أنماط Glob التي تحدد الملفات التي يجب على Intlayer فحصها للتحسين. استخدم هذا لاستبعاد الملفات غير المتعلقة وتسريع عمليات البناء. |
|
|
106
|
+
| **`outputFormat`** | `'esm', 'cjs'` | `'esm', 'cjs'` | يتحكم في تنسيق الإخراج للقواميس المبنية. |
|
|
107
|
+
|
|
108
|
+
## أوضاع الاستيراد
|
|
109
|
+
|
|
110
|
+
تحدد إعدادات `importMode` كيفية حقن محتوى القاموس في مكونك.
|
|
111
|
+
|
|
112
|
+
### 1. الوضع الثابت (`default`)
|
|
113
|
+
|
|
114
|
+
في الوضع الثابت، يقوم Intlayer باستبدال `useIntlayer` بـ `useDictionary` ويحقن القاموس مباشرة في حزمة جافا سكريبت.
|
|
115
|
+
|
|
116
|
+
- **الإيجابيات:** عرض فوري (متزامن)، بدون طلبات شبكة إضافية أثناء التهيئة.
|
|
117
|
+
- **السلبيات:** الحزمة تتضمن ترجمات **لكل** اللغات المتاحة لذلك المكون المحدد.
|
|
118
|
+
- **الأفضل لـ:** تطبيقات الصفحة الواحدة (SPA).
|
|
119
|
+
|
|
120
|
+
**مثال على الكود المحول:**
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
// كودك
|
|
124
|
+
const content = useIntlayer("my-key");
|
|
125
|
+
|
|
126
|
+
// الكود المحسن (الوضع الثابت)
|
|
127
|
+
const content = useDictionary({
|
|
128
|
+
key: "my-key",
|
|
129
|
+
content: {
|
|
130
|
+
nodeType: "translation",
|
|
131
|
+
translation: {
|
|
132
|
+
en: "My title",
|
|
133
|
+
fr: "Mon titre",
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
});
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### 2. الوضع الديناميكي
|
|
140
|
+
|
|
141
|
+
في الوضع الديناميكي، يستبدل Intlayer الدالة `useIntlayer` بـ `useDictionaryAsync`. تستخدم هذه الدالة `import()` (آلية تشبه Suspense) لتحميل ملف JSON الخاص باللغة الحالية بشكل كسول.
|
|
142
|
+
|
|
143
|
+
- **الإيجابيات:** **تحسين على مستوى اللغة (Locale-level tree shaking).** المستخدم الذي يعرض النسخة الإنجليزية سيقوم بتحميل قاموس اللغة الإنجليزية فقط. قاموس اللغة الفرنسية لن يتم تحميله أبدًا.
|
|
144
|
+
- **السلبيات:** يؤدي إلى طلب شبكة (جلب الأصول) لكل مكون أثناء عملية التهيئة (hydration).
|
|
145
|
+
- **الأفضل لـ:** كتل نصية كبيرة، مقالات، أو تطبيقات تدعم العديد من اللغات حيث يكون حجم الحزمة أمرًا حاسمًا.
|
|
146
|
+
|
|
147
|
+
**مثال على الكود المحول:**
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
// Your code
|
|
151
|
+
const content = useIntlayer("my-key");
|
|
152
|
+
|
|
153
|
+
// Optimized code (Dynamic)
|
|
154
|
+
const content = useDictionaryAsync({
|
|
155
|
+
en: () =>
|
|
156
|
+
import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
|
|
157
|
+
fr: () =>
|
|
158
|
+
import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
|
|
159
|
+
});
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
> عند استخدام `importMode: 'dynamic'`، إذا كان لديك 100 مكون يستخدم `useIntlayer` في صفحة واحدة، سيحاول المتصفح إجراء 100 طلب تحميل منفصل. لتجنب هذا "تسلسل" الطلبات، قم بتجميع المحتوى في عدد أقل من ملفات `.content` (مثل قاموس واحد لكل قسم من الصفحة) بدلاً من واحد لكل مكون ذرة.
|
|
163
|
+
|
|
164
|
+
> حاليًا، `importMode: 'dynamic'` غير مدعوم بالكامل لـ Vue و Svelte. يُنصح باستخدام `importMode: 'static'` لهذه الأُطُر حتى صدور تحديثات لاحقة.
|
|
165
|
+
|
|
166
|
+
### 3. الوضع الحي (Live Mode)
|
|
167
|
+
|
|
168
|
+
يتصرف بشكل مشابه للوضع الديناميكي لكنه يحاول أولاً جلب القواميس من واجهة برمجة تطبيقات المزامنة الحية Intlayer Live Sync API. إذا فشل استدعاء API أو لم يكن المحتوى معلمًا للتحديثات الحية، فإنه يعود إلى الاستيراد الديناميكي.
|
|
169
|
+
|
|
170
|
+
> راجع توثيق CMS لمزيد من التفاصيل: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_CMS.md)
|
|
171
|
+
|
|
172
|
+
## الملخص: الوضع الثابت مقابل الوضع الديناميكي
|
|
173
|
+
|
|
174
|
+
| الميزة | الوضع الثابت | الوضع الديناميكي |
|
|
175
|
+
| :----------------------- | :--------------------------------------- | :-------------------------------------------------- |
|
|
176
|
+
| **حجم حزمة جافا سكريبت** | أكبر (يشمل جميع اللغات للمكون) | الأصغر (كود فقط، بدون محتوى) |
|
|
177
|
+
| **التحميل الأولي** | فوري (المحتوى موجود في الحزمة) | تأخير بسيط (يجلب JSON) |
|
|
178
|
+
| **طلبات الشبكة** | 0 طلبات إضافية | طلب واحد لكل قاموس |
|
|
179
|
+
| **Tree Shaking** | على مستوى المكون | على مستوى المكون + مستوى اللغة |
|
|
180
|
+
| **أفضل استخدام** | مكونات واجهة المستخدم، التطبيقات الصغيرة | الصفحات التي تحتوي على نصوص كثيرة، العديد من اللغات |
|
|
@@ -42,6 +42,10 @@ history:
|
|
|
42
42
|
|
|
43
43
|
## الميزات
|
|
44
44
|
|
|
45
|
+

|
|
46
|
+
|
|
47
|
+
- **استخراج المحتوى** – استخرج المحتوى من مكونات React / Vue / Svelte الخاصة بك
|
|
48
|
+
|
|
45
49
|

|
|
46
50
|
|
|
47
51
|
- **التنقل الفوري** – القفز بسرعة إلى ملف المحتوى الصحيح عند النقر على مفتاح `useIntlayer`.
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-11-25
|
|
3
|
+
updatedAt: 2025-11-25
|
|
4
|
+
title: Optimierung der i18n-Bündelgröße & Leistung
|
|
5
|
+
description: Reduzieren Sie die Anwendungs-Bündelgröße durch Optimierung der Internationalisierungsinhalte (i18n). Erfahren Sie, wie Sie Tree Shaking und Lazy Loading für Wörterbücher mit Intlayer nutzen können.
|
|
6
|
+
keywords:
|
|
7
|
+
- Bündeloptimierung
|
|
8
|
+
- Inhaltsautomatisierung
|
|
9
|
+
- Dynamische Inhalte
|
|
10
|
+
- Intlayer
|
|
11
|
+
- Next.js
|
|
12
|
+
- JavaScript
|
|
13
|
+
- React
|
|
14
|
+
slugs:
|
|
15
|
+
- doc
|
|
16
|
+
- concept
|
|
17
|
+
- bundle-optimization
|
|
18
|
+
history:
|
|
19
|
+
- version: 6.0.0
|
|
20
|
+
date: 2025-11-25
|
|
21
|
+
changes: Initiale Historie
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# Optimierung der i18n-Bündelgröße & Leistung
|
|
25
|
+
|
|
26
|
+
Eine der häufigsten Herausforderungen bei herkömmlichen i18n-Lösungen, die auf JSON-Dateien basieren, ist die Verwaltung der Inhaltsgröße. Wenn Entwickler den Inhalt nicht manuell in Namespaces aufteilen, laden Benutzer oft Übersetzungen für jede Seite und potenziell jede Sprache herunter, nur um eine einzelne Seite anzusehen.
|
|
27
|
+
|
|
28
|
+
Zum Beispiel kann eine Anwendung mit 10 Seiten, die in 10 Sprachen übersetzt sind, dazu führen, dass ein Benutzer den Inhalt von 100 Seiten herunterlädt, obwohl er nur **eine** (die aktuelle Seite in der aktuellen Sprache) benötigt. Dies führt zu verschwendeter Bandbreite und längeren Ladezeiten.
|
|
29
|
+
|
|
30
|
+
> Um dies zu erkennen, können Sie Bundle-Analyzer wie `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js) oder `webpack-bundle-analyzer` (React CRA / Angular / etc) verwenden.
|
|
31
|
+
|
|
32
|
+
**Intlayer löst dieses Problem durch Optimierung zur Build-Zeit.** Es analysiert Ihren Code, um zu erkennen, welche Wörterbücher tatsächlich pro Komponente verwendet werden, und injiziert nur den notwendigen Inhalt in Ihr Bundle zurück.
|
|
33
|
+
|
|
34
|
+
## Inhaltsverzeichnis
|
|
35
|
+
|
|
36
|
+
<TOC />
|
|
37
|
+
|
|
38
|
+
## Funktionsweise
|
|
39
|
+
|
|
40
|
+
Intlayer verwendet einen **pro-Komponente-Ansatz**. Im Gegensatz zu globalen JSON-Dateien wird Ihr Inhalt neben oder innerhalb Ihrer Komponenten definiert. Während des Build-Prozesses:
|
|
41
|
+
|
|
42
|
+
1. **Analysiert** Intlayer Ihren Code, um `useIntlayer`-Aufrufe zu finden.
|
|
43
|
+
2. **Erstellt** den entsprechenden Wörterbuchinhalt.
|
|
44
|
+
3. **Ersetzt** den `useIntlayer`-Aufruf durch optimierten Code basierend auf Ihrer Konfiguration.
|
|
45
|
+
|
|
46
|
+
Dies stellt sicher, dass:
|
|
47
|
+
|
|
48
|
+
- Wenn eine Komponente nicht importiert wird, ihr Inhalt nicht im Bundle enthalten ist (Dead Code Elimination).
|
|
49
|
+
- Wenn eine Komponente lazy geladen wird, wird ihr Inhalt ebenfalls lazy geladen.
|
|
50
|
+
|
|
51
|
+
## Einrichtung nach Plattform
|
|
52
|
+
|
|
53
|
+
### Next.js
|
|
54
|
+
|
|
55
|
+
Next.js benötigt das `@intlayer/swc` Plugin, um die Transformation zu verarbeiten, da Next.js SWC für Builds verwendet.
|
|
56
|
+
|
|
57
|
+
> Dieses Plugin ist standardmäßig installiert, da SWC-Plugins für Next.js noch experimentell sind. Dies kann sich in Zukunft ändern.
|
|
58
|
+
|
|
59
|
+
### Vite
|
|
60
|
+
|
|
61
|
+
Vite verwendet das `@intlayer/babel` Plugin, das als Abhängigkeit von `vite-intlayer` enthalten ist. Die Optimierung ist standardmäßig aktiviert.
|
|
62
|
+
|
|
63
|
+
### Webpack
|
|
64
|
+
|
|
65
|
+
Um die Bundle-Optimierung mit Intlayer in Webpack zu aktivieren, müssen Sie das entsprechende Babel- (`@intlayer/babel`) oder SWC- (`@intlayer/swc`) Plugin installieren und konfigurieren.
|
|
66
|
+
|
|
67
|
+
### Expo / Lynx
|
|
68
|
+
|
|
69
|
+
Die Bundle-Optimierung ist für diese Plattform **noch nicht verfügbar**. Die Unterstützung wird in einer zukünftigen Version hinzugefügt.
|
|
70
|
+
|
|
71
|
+
## Konfiguration
|
|
72
|
+
|
|
73
|
+
Sie können steuern, wie Intlayer Ihr Bundle über die `build`-Eigenschaft in Ihrer `intlayer.config.ts` optimiert.
|
|
74
|
+
|
|
75
|
+
```typescript fileName="intlayer.config.ts"
|
|
76
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
77
|
+
|
|
78
|
+
const config: IntlayerConfig = {
|
|
79
|
+
internationalization: {
|
|
80
|
+
locales: [Locales.ENGLISH, Locales.FRENCH],
|
|
81
|
+
defaultLocale: Locales.ENGLISH,
|
|
82
|
+
},
|
|
83
|
+
build: {
|
|
84
|
+
optimize: true,
|
|
85
|
+
importMode: "static", // oder 'dynamic'
|
|
86
|
+
traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export default config;
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
> Es wird empfohlen, die Standardoption für `optimize` in den meisten Fällen beizubehalten.
|
|
94
|
+
|
|
95
|
+
> Weitere Details finden Sie in der Dokumentation zur Konfiguration: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md)
|
|
96
|
+
|
|
97
|
+
### Build-Optionen
|
|
98
|
+
|
|
99
|
+
Die folgenden Optionen sind im `build`-Konfigurationsobjekt verfügbar:
|
|
100
|
+
|
|
101
|
+
| Eigenschaft | Typ | Standardwert | Beschreibung |
|
|
102
|
+
| :-------------------- | :------------------------------ | :------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
103
|
+
| **`optimize`** | `boolean` | `undefined` | Steuert, ob die Build-Optimierung aktiviert ist. Wenn `true`, ersetzt Intlayer Wörterbuchaufrufe durch optimierte Injektionen. Wenn `false`, ist die Optimierung deaktiviert. Idealerweise in der Produktion auf `true` setzen. |
|
|
104
|
+
| **`importMode`** | `'static' , 'dynamic' , 'live'` | `'static'` | Bestimmt, wie Wörterbücher geladen werden (siehe Details unten). |
|
|
105
|
+
| **`traversePattern`** | `string[]` | `['**/*.{js,ts,jsx,tsx}', ...]` | Glob-Muster, die definieren, welche Dateien Intlayer für die Optimierung durchsuchen soll. Verwenden Sie dies, um nicht verwandte Dateien auszuschließen und den Build zu beschleunigen. |
|
|
106
|
+
| **`outputFormat`** | `'esm', 'cjs'` | `'esm', 'cjs'` | Steuert das Ausgabeformat der erstellten Wörterbücher. |
|
|
107
|
+
|
|
108
|
+
## Import-Modi
|
|
109
|
+
|
|
110
|
+
Die Einstellung `importMode` bestimmt, wie der Wörterbuchinhalt in Ihre Komponente injiziert wird.
|
|
111
|
+
|
|
112
|
+
### 1. Statischer Modus (`default`)
|
|
113
|
+
|
|
114
|
+
Im statischen Modus ersetzt Intlayer `useIntlayer` durch `useDictionary` und injiziert das Wörterbuch direkt in das JavaScript-Bündel.
|
|
115
|
+
|
|
116
|
+
- **Vorteile:** Sofortiges Rendering (synchron), keine zusätzlichen Netzwerk-Anfragen während der Hydrierung.
|
|
117
|
+
- **Nachteile:** Das Bündel enthält Übersetzungen für **alle** verfügbaren Sprachen für die jeweilige Komponente.
|
|
118
|
+
- **Am besten geeignet für:** Single Page Applications (SPA).
|
|
119
|
+
|
|
120
|
+
**Beispiel für transformierten Code:**
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
// Ihr Code
|
|
124
|
+
const content = useIntlayer("my-key");
|
|
125
|
+
|
|
126
|
+
// Optimierter Code (Statisch)
|
|
127
|
+
const content = useDictionary({
|
|
128
|
+
key: "my-key",
|
|
129
|
+
content: {
|
|
130
|
+
nodeType: "translation",
|
|
131
|
+
translation: {
|
|
132
|
+
en: "My title",
|
|
133
|
+
fr: "Mon titre",
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
});
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### 2. Dynamischer Modus
|
|
140
|
+
|
|
141
|
+
Im dynamischen Modus ersetzt Intlayer `useIntlayer` durch `useDictionaryAsync`. Dies verwendet `import()` (ein Suspense-ähnlicher Mechanismus), um speziell das JSON für die aktuelle Locale lazy zu laden.
|
|
142
|
+
|
|
143
|
+
- **Vorteile:** **Tree Shaking auf Locale-Ebene.** Ein Benutzer, der die englische Version ansieht, lädt _nur_ das englische Wörterbuch herunter. Das französische Wörterbuch wird niemals geladen.
|
|
144
|
+
- **Nachteile:** Löst während der Hydration pro Komponente eine Netzwerk-Anfrage (Asset-Fetch) aus.
|
|
145
|
+
- **Am besten geeignet für:** Große Textblöcke, Artikel oder Anwendungen, die viele Sprachen unterstützen und bei denen die Bundle-Größe kritisch ist.
|
|
146
|
+
|
|
147
|
+
**Transformiertes Code-Beispiel:**
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
// Ihr Code
|
|
151
|
+
const content = useIntlayer("my-key");
|
|
152
|
+
|
|
153
|
+
// Optimierter Code (Dynamisch)
|
|
154
|
+
const content = useDictionaryAsync({
|
|
155
|
+
en: () =>
|
|
156
|
+
import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
|
|
157
|
+
fr: () =>
|
|
158
|
+
import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
|
|
159
|
+
});
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
> Wenn Sie `importMode: 'dynamic'` verwenden und auf einer Seite 100 Komponenten `useIntlayer` nutzen, wird der Browser versuchen, 100 separate Abrufe durchzuführen. Um diese "Wasserfall"-Anfragen zu vermeiden, gruppieren Sie Inhalte in weniger `.content`-Dateien (z. B. ein Wörterbuch pro Seitenabschnitt) anstatt eines pro Atom-Komponente.
|
|
163
|
+
|
|
164
|
+
> Derzeit wird `importMode: 'dynamic'` für Vue und Svelte nicht vollständig unterstützt. Es wird empfohlen, für diese Frameworks bis zu weiteren Updates `importMode: 'static'` zu verwenden.
|
|
165
|
+
|
|
166
|
+
### 3. Live-Modus
|
|
167
|
+
|
|
168
|
+
Verhält sich ähnlich wie der Dynamische Modus, versucht jedoch zuerst, Wörterbücher von der Intlayer Live Sync API abzurufen. Wenn der API-Aufruf fehlschlägt oder der Inhalt nicht für Live-Updates markiert ist, wird auf den dynamischen Import zurückgegriffen.
|
|
169
|
+
|
|
170
|
+
> Siehe CMS-Dokumentation für weitere Details: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md)
|
|
171
|
+
|
|
172
|
+
## Zusammenfassung: Statisch vs Dynamisch
|
|
173
|
+
|
|
174
|
+
| Funktion | Statischer Modus | Dynamischer Modus |
|
|
175
|
+
| :----------------- | :------------------------------------------------ | :----------------------------------- |
|
|
176
|
+
| **JS-Bündelgröße** | Größer (enthält alle Sprachen für die Komponente) | Am kleinsten (nur Code, kein Inhalt) |
|
|
177
|
+
|
|
178
|
+
Verhält sich ähnlich wie der dynamische Modus, versucht jedoch zuerst, Wörterbücher von der Intlayer Live Sync API abzurufen. Wenn der API-Aufruf fehlschlägt oder der Inhalt nicht für Live-Updates markiert ist, wird auf den dynamischen Import zurückgegriffen.
|
|
179
|
+
|
|
180
|
+
> Siehe CMS-Dokumentation für weitere Details: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md)
|
|
181
|
+
|
|
182
|
+
## Zusammenfassung: Statisch vs Dynamisch
|
|
183
|
+
|
|
184
|
+
| Funktion | Statischer Modus | Dynamischer Modus |
|
|
185
|
+
| :------------------------ | :------------------------------------------------ | :----------------------------------- |
|
|
186
|
+
| **JS-Bündelgröße** | Größer (enthält alle Sprachen für die Komponente) | Am kleinsten (nur Code, kein Inhalt) |
|
|
187
|
+
| **Initiale Ladezeit** | Sofort (Inhalt ist im Bündel) | Leichte Verzögerung (lädt JSON) |
|
|
188
|
+
| **Netzwerk-Anfragen** | 0 zusätzliche Anfragen | 1 Anfrage pro Wörterbuch |
|
|
189
|
+
| **Tree Shaking** | Komponenten-Ebene | Komponenten-Ebene + Sprachebene |
|
|
190
|
+
| **Beste Anwendungsfälle** | UI-Komponenten, kleine Apps | Seiten mit viel Text, viele Sprachen |
|
|
@@ -139,7 +139,7 @@ Das `vue-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpret
|
|
|
139
139
|
|
|
140
140
|
Das `nuxt-intlayer`-Paket ist ein Nuxt-Modul, um Intlayer-Wörterbücher in Nuxt-Anwendungen nutzbar zu machen. Es integriert wesentliche Funktionen, damit Intlayer in einer Nuxt-Umgebung funktioniert, wie z. B. Übersetzungs-Middleware, Routing oder die Konfiguration der `nuxt.config.js`-Datei.
|
|
141
141
|
|
|
142
|
-
### svelte-intlayer
|
|
142
|
+
### svelte-intlayer
|
|
143
143
|
|
|
144
144
|
Das `svelte-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Svelte-Anwendungen nutzbar zu machen.
|
|
145
145
|
|
|
@@ -42,6 +42,10 @@ Erweiterungslink: [https://marketplace.visualstudio.com/items?itemName=Intlayer.
|
|
|
42
42
|
|
|
43
43
|
## Funktionen
|
|
44
44
|
|
|
45
|
+

|
|
46
|
+
|
|
47
|
+
- **Inhalt extrahieren** – Extrahieren Sie Inhalte aus Ihren React / Vue / Svelte Komponenten
|
|
48
|
+
|
|
45
49
|

|
|
46
50
|
|
|
47
51
|
- **Sofortige Navigation** – Schneller Sprung zur richtigen Inhaltsdatei beim Klicken auf einen `useIntlayer`-Schlüssel.
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-11-25
|
|
3
|
+
updatedAt: 2025-11-25
|
|
4
|
+
title: Optimizing i18n Bundle Size & Performance
|
|
5
|
+
description: Reduce application bundle size by optimizing internationalization (i18n) content. Learn how to leverage tree shaking and lazy loading for dictionaries with Intlayer.
|
|
6
|
+
keywords:
|
|
7
|
+
- Bundle Optimization
|
|
8
|
+
- Content Automation
|
|
9
|
+
- Dynamic Content
|
|
10
|
+
- Intlayer
|
|
11
|
+
- Next.js
|
|
12
|
+
- JavaScript
|
|
13
|
+
- React
|
|
14
|
+
slugs:
|
|
15
|
+
- doc
|
|
16
|
+
- concept
|
|
17
|
+
- bundle-optimization
|
|
18
|
+
history:
|
|
19
|
+
- version: 6.0.0
|
|
20
|
+
date: 2025-11-25
|
|
21
|
+
changes: Init history
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# Optimizing i18n Bundle Size & Performance
|
|
25
|
+
|
|
26
|
+
One of the most common challenges with traditional i18n solutions relying on JSON files is managing content size. If developers do not manually separate content into namespaces, users often end up downloading translations for every page and potentially every language just to view a single page.
|
|
27
|
+
|
|
28
|
+
For example, an application with 10 pages translated into 10 languages might result in a user downloading the content of 100 pages, even though they only need **one** (the current page in the current language). This leads to wasted bandwidth and slower load times.
|
|
29
|
+
|
|
30
|
+
> To detect it, you can use bundle analyzer like `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js), or `webpack-bundle-analyzer` (React CRA / Angular / etc).
|
|
31
|
+
|
|
32
|
+
**Intlayer solves this problem through build-time optimization.** It analyzes your code to detect which dictionaries are actually used per component and reinjects only the necessary content into your bundle.
|
|
33
|
+
|
|
34
|
+
## Table of Contents
|
|
35
|
+
|
|
36
|
+
<TOC />
|
|
37
|
+
|
|
38
|
+
## How It Works
|
|
39
|
+
|
|
40
|
+
Intlayer uses a **per-component approach**. Unlike global JSON files, your content is defined alongside or within your components. During the build process, Intlayer:
|
|
41
|
+
|
|
42
|
+
1. **Analyzes** your code to find `useIntlayer` calls.
|
|
43
|
+
2. **Builds** the corresponding dictionary content.
|
|
44
|
+
3. **Replaces** the `useIntlayer` call with optimized code based on your configuration.
|
|
45
|
+
|
|
46
|
+
This ensures that:
|
|
47
|
+
|
|
48
|
+
- If a component is not imported, its content is not included in the bundle (Dead Code Elimination).
|
|
49
|
+
- If a component is lazy-loaded, its content is also lazy-loaded.
|
|
50
|
+
|
|
51
|
+
## Setup by Platform
|
|
52
|
+
|
|
53
|
+
### Next.js
|
|
54
|
+
|
|
55
|
+
Next.js requires the `@intlayer/swc` plugin to handle the transformation, as Next.js uses SWC for builds.
|
|
56
|
+
|
|
57
|
+
> This plugin is installed by default because SWC plugins are still experimental for Next.js. It may change in the future.
|
|
58
|
+
|
|
59
|
+
### Vite
|
|
60
|
+
|
|
61
|
+
Vite uses `@intlayer/babel` plugin which is included as dependency of `vite-intlayer`. The optimization is enabled by default.
|
|
62
|
+
|
|
63
|
+
### Webpack
|
|
64
|
+
|
|
65
|
+
To enable bundle optimization with Intlayer on Webpack, you need to install and configure the appropriate Babel (`@intlayer/babel`) or SWC (`@intlayer/swc`) plugin.
|
|
66
|
+
|
|
67
|
+
### Expo / Lynx
|
|
68
|
+
|
|
69
|
+
Bundle optimization is **not available yet** for this platform. Support will be added in a future release.
|
|
70
|
+
|
|
71
|
+
## Configuration
|
|
72
|
+
|
|
73
|
+
You can control how Intlayer optimizes your bundle via the `build` property in your `intlayer.config.ts`.
|
|
74
|
+
|
|
75
|
+
```typescript fileName="intlayer.config.ts"
|
|
76
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
77
|
+
|
|
78
|
+
const config: IntlayerConfig = {
|
|
79
|
+
internationalization: {
|
|
80
|
+
locales: [Locales.ENGLISH, Locales.FRENCH],
|
|
81
|
+
defaultLocale: Locales.ENGLISH,
|
|
82
|
+
},
|
|
83
|
+
build: {
|
|
84
|
+
optimize: true,
|
|
85
|
+
importMode: "static", // or 'dynamic'
|
|
86
|
+
traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export default config;
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
> Keeping the default option for `optimize` is recommended in the most majority of cases.
|
|
94
|
+
|
|
95
|
+
> See doc configuration for more details: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
|
|
96
|
+
|
|
97
|
+
### Build Options
|
|
98
|
+
|
|
99
|
+
The following options are available under the `build` configuration object:
|
|
100
|
+
|
|
101
|
+
| Property | Type | Default | Description |
|
|
102
|
+
| :-------------------- | :------------------------------ | :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
103
|
+
| **`optimize`** | `boolean` | `undefined` | Controls whether build optimization is enabled. If `true`, Intlayer replaces dictionary calls with optimized injects. If `false`, optimization is disabled. Ideally set to `true` in production. |
|
|
104
|
+
| **`importMode`** | `'static' , 'dynamic' , 'live'` | `'static'` | Determines how dictionaries are loaded (see details below). |
|
|
105
|
+
| **`traversePattern`** | `string[]` | `['**/*.{js,ts,jsx,tsx}', ...]` | Glob patterns defining which files Intlayer should scan for optimization. Use this to exclude unrelated files and speed up builds. |
|
|
106
|
+
| **`outputFormat`** | `'esm', 'cjs'` | `'esm', 'cjs'` | Controls the output format of the built dictionaries. |
|
|
107
|
+
|
|
108
|
+
## Import Modes
|
|
109
|
+
|
|
110
|
+
The `importMode` setting dictates how the dictionary content is injected into your component.
|
|
111
|
+
|
|
112
|
+
### 1. Static Mode (`default`)
|
|
113
|
+
|
|
114
|
+
In static mode, Intlayer replaces `useIntlayer` with `useDictionary` and injects the dictionary directly into the JavaScript bundle.
|
|
115
|
+
|
|
116
|
+
- **Pros:** Instant rendering (synchronous), zero extra network requests during hydration.
|
|
117
|
+
- **Cons:** The bundle includes translations for **all** available languages for that specific component.
|
|
118
|
+
- **Best for:** Single Page Applications (SPA).
|
|
119
|
+
|
|
120
|
+
**Transformed Code Example:**
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
// Your code
|
|
124
|
+
const content = useIntlayer("my-key");
|
|
125
|
+
|
|
126
|
+
// Optimized code (Static)
|
|
127
|
+
const content = useDictionary({
|
|
128
|
+
key: "my-key",
|
|
129
|
+
content: {
|
|
130
|
+
nodeType: "translation",
|
|
131
|
+
translation: {
|
|
132
|
+
en: "My title",
|
|
133
|
+
fr: "Mon titre",
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
});
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### 2. Dynamic Mode
|
|
140
|
+
|
|
141
|
+
In dynamic mode, Intlayer replaces `useIntlayer` with `useDictionaryAsync`. This uses `import()` (Suspense-like mechanism) to lazy-load specifically the JSON for the current locale.
|
|
142
|
+
|
|
143
|
+
- **Pros:** **Locale-level tree shaking.** A user viewing the English version will _only_ download the English dictionary. The French dictionary is never loaded.
|
|
144
|
+
- **Cons:** Triggers a network request (asset fetch) per component during hydration.
|
|
145
|
+
- **Best for:** Large text blocks, articles, or applications supporting many languages where bundle size is critical.
|
|
146
|
+
|
|
147
|
+
**Transformed Code Example:**
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
// Your code
|
|
151
|
+
const content = useIntlayer("my-key");
|
|
152
|
+
|
|
153
|
+
// Optimized code (Dynamic)
|
|
154
|
+
const content = useDictionaryAsync({
|
|
155
|
+
en: () =>
|
|
156
|
+
import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
|
|
157
|
+
fr: () =>
|
|
158
|
+
import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
|
|
159
|
+
});
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
> When using `importMode: 'dynamic'`, if you have 100 components using `useIntlayer` on a single page, the browser will attempt 100 separate fetches. To avoid this "waterfall" of requests, group content into fewer `.content` files (e.g., one dictionary per page section) rather than one per atom component.
|
|
163
|
+
|
|
164
|
+
> Currently, `importMode: 'dynamic'` is not fully supported for Vue and Svelte. It is recommended to use `importMode: 'static'` for these frameworks until further updates.
|
|
165
|
+
|
|
166
|
+
### 3. Live Mode
|
|
167
|
+
|
|
168
|
+
Behaves similarly to Dynamic mode but attempts to fetch dictionaries from the Intlayer Live Sync API first. If the API call fails or the content is not marked for live updates, it falls back to the dynamic import.
|
|
169
|
+
|
|
170
|
+
> See CMS documentation for more details: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)
|
|
171
|
+
|
|
172
|
+
## Summary: Static vs Dynamic
|
|
173
|
+
|
|
174
|
+
| Feature | Static Mode | Dynamic Mode |
|
|
175
|
+
| :------------------- | :-------------------------------------------- | :----------------------------------- |
|
|
176
|
+
| **JS Bundle Size** | Larger (includes all langs for the component) | Smallest (only code, no content) |
|
|
177
|
+
| **Initial Load** | Instant (Content is in bundle) | Slight delay (Fetches JSON) |
|
|
178
|
+
| **Network Requests** | 0 extra requests | 1 request per dictionary |
|
|
179
|
+
| **Tree Shaking** | Component-level | Component-level + Locale-level |
|
|
180
|
+
| **Best Use Case** | UI Components, Small Apps | Pages with much text, Many Languages |
|