@intlayer/docs 8.6.1 → 8.6.10

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.
Files changed (197) hide show
  1. package/dist/cjs/doc.cjs.map +1 -1
  2. package/dist/cjs/generated/docs.entry.cjs +60 -0
  3. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  4. package/dist/esm/doc.mjs.map +1 -1
  5. package/dist/esm/generated/docs.entry.mjs +60 -0
  6. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  7. package/dist/types/doc.d.ts.map +1 -1
  8. package/dist/types/generated/docs.entry.d.ts +3 -0
  9. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  10. package/docs/ar/cli/index.md +54 -42
  11. package/docs/ar/cli/init.md +32 -20
  12. package/docs/ar/cli/standalone.md +91 -0
  13. package/docs/ar/configuration.md +39 -7
  14. package/docs/ar/custom_domains.md +250 -0
  15. package/docs/ar/intlayer_with_tanstack+solid.md +14 -33
  16. package/docs/ar/intlayer_with_tanstack.md +25 -16
  17. package/docs/ar/intlayer_with_vanilla.md +506 -0
  18. package/docs/bn/cli/index.md +195 -0
  19. package/docs/bn/cli/init.md +96 -0
  20. package/docs/bn/cli/standalone.md +91 -0
  21. package/docs/bn/configuration.md +46 -14
  22. package/docs/bn/custom_domains.md +250 -0
  23. package/docs/bn/intlayer_with_vanilla.md +506 -0
  24. package/docs/cs/cli/index.md +195 -0
  25. package/docs/cs/cli/init.md +96 -0
  26. package/docs/cs/cli/standalone.md +91 -0
  27. package/docs/cs/configuration.md +46 -7
  28. package/docs/cs/custom_domains.md +250 -0
  29. package/docs/cs/intlayer_with_vanilla.md +506 -0
  30. package/docs/de/cli/index.md +53 -41
  31. package/docs/de/cli/standalone.md +91 -0
  32. package/docs/de/configuration.md +46 -7
  33. package/docs/de/custom_domains.md +250 -0
  34. package/docs/de/intlayer_with_tanstack+solid.md +14 -33
  35. package/docs/de/intlayer_with_tanstack.md +25 -16
  36. package/docs/de/intlayer_with_vanilla.md +506 -0
  37. package/docs/en/bundle_optimization.md +288 -23
  38. package/docs/en/cli/index.md +6 -1
  39. package/docs/en/cli/init.md +13 -1
  40. package/docs/en/cli/standalone.md +91 -0
  41. package/docs/en/configuration.md +46 -7
  42. package/docs/en/custom_domains.md +245 -0
  43. package/docs/en/intlayer_with_tanstack+solid.md +14 -33
  44. package/docs/en/intlayer_with_tanstack.md +25 -16
  45. package/docs/en/intlayer_with_vanilla.md +506 -0
  46. package/docs/en-GB/cli/index.md +56 -44
  47. package/docs/en-GB/cli/init.md +28 -21
  48. package/docs/en-GB/cli/standalone.md +91 -0
  49. package/docs/en-GB/configuration.md +53 -14
  50. package/docs/en-GB/custom_domains.md +250 -0
  51. package/docs/en-GB/intlayer_with_tanstack+solid.md +14 -33
  52. package/docs/en-GB/intlayer_with_tanstack.md +25 -16
  53. package/docs/en-GB/intlayer_with_vanilla.md +506 -0
  54. package/docs/es/cli/index.md +65 -53
  55. package/docs/es/cli/init.md +33 -21
  56. package/docs/es/cli/standalone.md +91 -0
  57. package/docs/es/configuration.md +39 -1
  58. package/docs/es/custom_domains.md +250 -0
  59. package/docs/es/intlayer_with_tanstack+solid.md +14 -33
  60. package/docs/es/intlayer_with_tanstack.md +25 -16
  61. package/docs/es/intlayer_with_vanilla.md +506 -0
  62. package/docs/fr/cli/index.md +43 -31
  63. package/docs/fr/cli/init.md +37 -25
  64. package/docs/fr/cli/standalone.md +91 -0
  65. package/docs/fr/configuration.md +46 -7
  66. package/docs/fr/custom_domains.md +250 -0
  67. package/docs/fr/intlayer_with_tanstack+solid.md +14 -33
  68. package/docs/fr/intlayer_with_tanstack.md +25 -16
  69. package/docs/fr/intlayer_with_vanilla.md +506 -0
  70. package/docs/hi/cli/index.md +71 -59
  71. package/docs/hi/cli/init.md +37 -33
  72. package/docs/hi/cli/standalone.md +91 -0
  73. package/docs/hi/configuration.md +39 -7
  74. package/docs/hi/custom_domains.md +250 -0
  75. package/docs/hi/intlayer_with_tanstack+solid.md +14 -33
  76. package/docs/hi/intlayer_with_tanstack.md +25 -16
  77. package/docs/hi/intlayer_with_vanilla.md +506 -0
  78. package/docs/id/cli/index.md +59 -47
  79. package/docs/id/cli/init.md +32 -25
  80. package/docs/id/cli/standalone.md +91 -0
  81. package/docs/id/configuration.md +46 -7
  82. package/docs/id/custom_domains.md +250 -0
  83. package/docs/id/intlayer_with_tanstack+solid.md +14 -33
  84. package/docs/id/intlayer_with_tanstack.md +25 -16
  85. package/docs/id/intlayer_with_vanilla.md +506 -0
  86. package/docs/it/cli/index.md +58 -41
  87. package/docs/it/cli/init.md +37 -38
  88. package/docs/it/cli/standalone.md +91 -0
  89. package/docs/it/configuration.md +46 -7
  90. package/docs/it/custom_domains.md +250 -0
  91. package/docs/it/intlayer_with_tanstack+solid.md +14 -33
  92. package/docs/it/intlayer_with_tanstack.md +25 -16
  93. package/docs/it/intlayer_with_vanilla.md +506 -0
  94. package/docs/ja/cli/index.md +59 -47
  95. package/docs/ja/cli/init.md +36 -24
  96. package/docs/ja/cli/standalone.md +91 -0
  97. package/docs/ja/configuration.md +46 -7
  98. package/docs/ja/custom_domains.md +250 -0
  99. package/docs/ja/intlayer_with_tanstack+solid.md +14 -33
  100. package/docs/ja/intlayer_with_tanstack.md +25 -16
  101. package/docs/ja/intlayer_with_vanilla.md +506 -0
  102. package/docs/ko/cli/index.md +58 -46
  103. package/docs/ko/cli/init.md +39 -35
  104. package/docs/ko/cli/standalone.md +91 -0
  105. package/docs/ko/configuration.md +47 -8
  106. package/docs/ko/custom_domains.md +250 -0
  107. package/docs/ko/intlayer_with_tanstack+solid.md +14 -33
  108. package/docs/ko/intlayer_with_tanstack.md +25 -16
  109. package/docs/ko/intlayer_with_vanilla.md +506 -0
  110. package/docs/nl/cli/index.md +195 -0
  111. package/docs/nl/cli/init.md +96 -0
  112. package/docs/nl/cli/standalone.md +91 -0
  113. package/docs/nl/configuration.md +46 -7
  114. package/docs/nl/custom_domains.md +250 -0
  115. package/docs/nl/intlayer_with_vanilla.md +506 -0
  116. package/docs/pl/cli/index.md +56 -44
  117. package/docs/pl/cli/init.md +36 -32
  118. package/docs/pl/cli/standalone.md +91 -0
  119. package/docs/pl/configuration.md +46 -7
  120. package/docs/pl/custom_domains.md +250 -0
  121. package/docs/pl/intlayer_with_tanstack+solid.md +14 -33
  122. package/docs/pl/intlayer_with_tanstack.md +25 -16
  123. package/docs/pl/intlayer_with_vanilla.md +506 -0
  124. package/docs/pt/cli/index.md +64 -52
  125. package/docs/pt/cli/init.md +35 -31
  126. package/docs/pt/cli/standalone.md +91 -0
  127. package/docs/pt/configuration.md +46 -7
  128. package/docs/pt/custom_domains.md +250 -0
  129. package/docs/pt/intlayer_with_tanstack+solid.md +14 -33
  130. package/docs/pt/intlayer_with_tanstack.md +25 -16
  131. package/docs/pt/intlayer_with_vanilla.md +506 -0
  132. package/docs/ru/cli/index.md +54 -42
  133. package/docs/ru/cli/init.md +31 -27
  134. package/docs/ru/cli/standalone.md +91 -0
  135. package/docs/ru/configuration.md +46 -7
  136. package/docs/ru/custom_domains.md +250 -0
  137. package/docs/ru/intlayer_with_tanstack+solid.md +14 -33
  138. package/docs/ru/intlayer_with_tanstack.md +25 -16
  139. package/docs/ru/intlayer_with_vanilla.md +506 -0
  140. package/docs/tr/cli/index.md +64 -52
  141. package/docs/tr/cli/init.md +37 -30
  142. package/docs/tr/cli/standalone.md +91 -0
  143. package/docs/tr/configuration.md +46 -7
  144. package/docs/tr/custom_domains.md +250 -0
  145. package/docs/tr/intlayer_with_tanstack+solid.md +14 -33
  146. package/docs/tr/intlayer_with_tanstack.md +25 -16
  147. package/docs/tr/intlayer_with_vanilla.md +506 -0
  148. package/docs/uk/cli/index.md +60 -55
  149. package/docs/uk/cli/init.md +32 -20
  150. package/docs/uk/cli/standalone.md +91 -0
  151. package/docs/uk/configuration.md +46 -7
  152. package/docs/uk/custom_domains.md +250 -0
  153. package/docs/uk/intlayer_with_tanstack+solid.md +14 -33
  154. package/docs/uk/intlayer_with_tanstack.md +25 -16
  155. package/docs/uk/intlayer_with_vanilla.md +506 -0
  156. package/docs/ur/cli/index.md +195 -0
  157. package/docs/ur/cli/init.md +96 -0
  158. package/docs/ur/cli/standalone.md +91 -0
  159. package/docs/ur/configuration.md +46 -7
  160. package/docs/ur/custom_domains.md +250 -0
  161. package/docs/ur/intlayer_with_vanilla.md +506 -0
  162. package/docs/vi/cli/index.md +72 -61
  163. package/docs/vi/cli/init.md +33 -21
  164. package/docs/vi/cli/standalone.md +91 -0
  165. package/docs/vi/configuration.md +46 -7
  166. package/docs/vi/custom_domains.md +250 -0
  167. package/docs/vi/intlayer_with_tanstack+solid.md +14 -33
  168. package/docs/vi/intlayer_with_tanstack.md +25 -16
  169. package/docs/vi/intlayer_with_vanilla.md +506 -0
  170. package/docs/zh/cli/index.md +56 -49
  171. package/docs/zh/cli/init.md +30 -18
  172. package/docs/zh/cli/standalone.md +91 -0
  173. package/docs/zh/configuration.md +46 -7
  174. package/docs/zh/custom_domains.md +250 -0
  175. package/docs/zh/intlayer_with_tanstack+solid.md +14 -33
  176. package/docs/zh/intlayer_with_tanstack.md +25 -16
  177. package/docs/zh/intlayer_with_vanilla.md +506 -0
  178. package/package.json +8 -8
  179. package/src/doc.ts +4 -1
  180. package/src/generated/docs.entry.ts +60 -0
  181. package/docs/ar/bundle_optimization.md +0 -185
  182. package/docs/de/bundle_optimization.md +0 -195
  183. package/docs/en-GB/bundle_optimization.md +0 -184
  184. package/docs/es/bundle_optimization.md +0 -194
  185. package/docs/fr/bundle_optimization.md +0 -184
  186. package/docs/hi/bundle_optimization.md +0 -185
  187. package/docs/id/bundle_optimization.md +0 -185
  188. package/docs/it/bundle_optimization.md +0 -185
  189. package/docs/ja/bundle_optimization.md +0 -185
  190. package/docs/ko/bundle_optimization.md +0 -185
  191. package/docs/pl/bundle_optimization.md +0 -185
  192. package/docs/pt/bundle_optimization.md +0 -184
  193. package/docs/ru/bundle_optimization.md +0 -185
  194. package/docs/tr/bundle_optimization.md +0 -184
  195. package/docs/uk/bundle_optimization.md +0 -186
  196. package/docs/vi/bundle_optimization.md +0 -185
  197. package/docs/zh/bundle_optimization.md +0 -185
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2025-11-25
3
- updatedAt: 2025-11-25
3
+ updatedAt: 2026-04-08
4
4
  title: Optimizing i18n Bundle Size & Performance
5
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
6
  keywords:
@@ -16,9 +16,9 @@ slugs:
16
16
  - concept
17
17
  - bundle-optimization
18
18
  history:
19
- - version: 6.0.0
20
- date: 2025-11-25
21
- changes: "Init history"
19
+ - version: 8.7.0
20
+ date: 2026-04-08
21
+ changes: "Add `minify` and `purge` options to the build configuration"
22
22
  ---
23
23
 
24
24
  # Optimizing i18n Bundle Size & Performance
@@ -27,14 +27,145 @@ One of the most common challenges with traditional i18n solutions relying on JSO
27
27
 
28
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
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
30
  **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
31
 
34
32
  ## Table of Contents
35
33
 
36
34
  <TOC />
37
35
 
36
+ ## Scan your bundle
37
+
38
+ Analyzing your bundle is the first step in identifying "heavy" JSON files and code-splitting opportunities. These tools generate a visual treemap of your application's compiled code, allowing you to see exactly which libraries are consuming the most space.
39
+
40
+ <Tabs>
41
+ <Tab value="vite">
42
+
43
+ ### Vite / Rollup
44
+
45
+ Vite uses Rollup under the hood. The `rollup-plugin-visualizer` generates an interactive HTML file showing the size of every module in your graph.
46
+
47
+ ```bash
48
+ npm install -D rollup-plugin-visualizer
49
+ ```
50
+
51
+ ```typescript fileName="vite.config.ts"
52
+ import { defineConfig } from "vite";
53
+ import { visualizer } from "rollup-plugin-visualizer";
54
+
55
+ export default defineConfig({
56
+ plugins: [
57
+ visualizer({
58
+ open: true, // Automatically open the report in your browser
59
+ filename: "stats.html",
60
+ gzipSize: true,
61
+ brotliSize: true,
62
+ }),
63
+ ],
64
+ });
65
+ ```
66
+
67
+ </Tab>
68
+ <Tab value="nextjs (turbopack)">
69
+
70
+ ### Next.js (Turbopack)
71
+
72
+ For projects using the App Router and Turbopack, Next.js provides a built-in experimental analyzer that requires no extra dependencies.
73
+
74
+ ```bash packageManager='npm'
75
+ npx next experimental-analyze
76
+ ```
77
+
78
+ ```bash packageManager='yarn'
79
+ yarn next experimental-analyze
80
+ ```
81
+
82
+ ```bash packageManager='pnpm'
83
+ pnpm next experimental-analyze
84
+ ```
85
+
86
+ ```bash packageManager='bun'
87
+ bun next experimental-analyze
88
+ ```
89
+
90
+ </Tab>
91
+ <Tab value="nextjs (Webpack)">
92
+
93
+ ### Next.js (Webpack)
94
+
95
+ If you are using the default Webpack bundler in Next.js, use the official bundle analyzer. Trigger it by setting an environment variable during your build.
96
+
97
+ ```bash packageManager='npm'
98
+ npm install -D @next/bundle-analyzer
99
+ ```
100
+
101
+ ```bash packageManager='yarn'
102
+ yarn add -D @next/bundle-analyzer
103
+ ```
104
+
105
+ ```bash packageManager='pnpm'
106
+ pnpm add -D @next/bundle-analyzer
107
+ ```
108
+
109
+ ```bash packageManager='bun'
110
+ bun add -d @next/bundle-analyzer
111
+ ```
112
+
113
+ ```javascript fileName="next.config.js"
114
+ const withBundleAnalyzer = require("@next/bundle-analyzer")({
115
+ enabled: process.env.ANALYZE === "true",
116
+ });
117
+
118
+ module.exports = withBundleAnalyzer({
119
+ // Your Next.js config
120
+ });
121
+ ```
122
+
123
+ **Usage:**
124
+
125
+ ```bash
126
+ ANALYZE=true npm run build
127
+ ```
128
+
129
+ </Tab>
130
+ <Tab value="Webpack (CRA / Angular / etc)"\>
131
+
132
+ ### Standard Webpack
133
+
134
+ For Create React App (ejected), Angular, or custom Webpack setups, use the industry-standard `webpack-bundle-analyzer`.
135
+
136
+ ```bash packageManager='npm'
137
+ npm install -D webpack-bundle-analyzer
138
+ ```
139
+
140
+ ```bash packageManager='yarn'
141
+ yarn add -D webpack-bundle-analyzer
142
+ ```
143
+
144
+ ```bash packageManager='pnpm'
145
+ pnpm add -D webpack-bundle-analyzer
146
+ ```
147
+
148
+ ```bash packageManager='bun'
149
+ bun add -d webpack-bundle-analyzer
150
+ ```
151
+
152
+ ```typescript fileName="webpack.config.ts
153
+ import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
154
+
155
+ export default {
156
+ plugins: [
157
+ new BundleAnalyzerPlugin({
158
+ analyzerMode: "static",
159
+ reportFilename: "bundle-analyzer.html",
160
+ openAnalyzer: false,
161
+ }),
162
+ ],
163
+ };
164
+ ```
165
+
166
+ </Tab>
167
+ </Tabs>
168
+
38
169
  ## How It Works
39
170
 
40
171
  Intlayer uses a **per-component approach**. Unlike global JSON files, your content is defined alongside or within your components. During the build process, Intlayer:
@@ -50,23 +181,73 @@ This ensures that:
50
181
 
51
182
  ## Setup by Platform
52
183
 
184
+ <Tabs>
185
+ <Tab value="nextjs">
186
+
53
187
  ### Next.js
54
188
 
55
189
  Next.js requires the `@intlayer/swc` plugin to handle the transformation, as Next.js uses SWC for builds.
56
190
 
57
- > This plugin is installed by default because SWC plugins are still experimental for Next.js. It may change in the future.
191
+ > This plugin is not installed by default because SWC plugins are still experimental for Next.js. It may change in the future.
192
+
193
+ ```bash packageManager="npm"
194
+ npm install -D @intlayer/swc
195
+ ```
196
+
197
+ ```bash packageManager="yarn"
198
+ yarn add -D @intlayer/swc
199
+ ```
200
+
201
+ ```bash packageManager="pnpm"
202
+ pnpm add -D @intlayer/swc
203
+ ```
204
+
205
+ ```bash packageManager="bun"
206
+ bun add -d @intlayer/swc
207
+ ```
208
+
209
+ Once Installed. Intlayer will automatically detect and use the plugin.
210
+
211
+ </Tab>
212
+ <Tab value="vite">
58
213
 
59
214
  ### Vite
60
215
 
61
- Vite uses `@intlayer/babel` plugin which is included as dependency of `vite-intlayer`. The optimization is enabled by default.
216
+ Vite uses `@intlayer/babel` plugin which is included as dependency of `vite-intlayer`. The optimization is enabled by default. Nothing else to do.
217
+
218
+ </Tab>
219
+ <Tab value="webpack">
62
220
 
63
221
  ### Webpack
64
222
 
65
223
  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
224
 
67
- ### Expo / Lynx
225
+ ```bash packageManager="npm"
226
+ npm install -D @intlayer/babel
227
+ ```
228
+
229
+ ```bash packageManager="yarn"
230
+ yarn add -D @intlayer/babel
231
+ ```
232
+
233
+ ```bash packageManager="pnpm"
234
+ pnpm add -D @intlayer/babel
235
+ ```
236
+
237
+ ```bash packageManager="bun"
238
+ bun add -d @intlayer/babel
239
+ ```
240
+
241
+ ```typescript fileName="babel.config.js"
242
+ const { getOptimizePluginOptions } = require("@intlayer/babel");
68
243
 
69
- Bundle optimization is **not available yet** for this platform. Support will be added in a future release.
244
+ module.exports = {
245
+ plugins: [[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()]],
246
+ };
247
+ ```
248
+
249
+ </Tab>
250
+ </Tabs>
70
251
 
71
252
  ## Configuration
72
253
 
@@ -81,11 +262,23 @@ const config: IntlayerConfig = {
81
262
  defaultLocale: Locales.ENGLISH,
82
263
  },
83
264
  dictionary: {
84
- importMode: "static", // or 'dynamic'
265
+ importMode: "dynamic",
85
266
  },
86
267
  build: {
87
- optimize: true,
88
- traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
268
+ /**
269
+ * Minify the dictionaries to reduce the bundle size.
270
+ */
271
+ minify: true;
272
+
273
+ /**
274
+ * Purge the unused keys in a dictionaries
275
+ */
276
+ purge: true;
277
+
278
+ /**
279
+ * Indicates if the build should check TypeScript types
280
+ */
281
+ checkTypes: false;
89
282
  },
90
283
  };
91
284
 
@@ -100,16 +293,88 @@ export default config;
100
293
 
101
294
  The following options are available under the `build` configuration object:
102
295
 
103
- | Property | Type | Default | Description |
104
- | :-------------------- | :------------------------------- | :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
105
- | **`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. |
106
- | **`importMode`** | `'static' , 'dynamic' , 'fetch'` | `'static'` | **Deprecated**: Use `dictionary.importMode` instead. Determines how dictionaries are loaded (see details below). |
107
- | **`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. |
108
- | **`outputFormat`** | `'esm', 'cjs'` | `'esm', 'cjs'` | Controls the output format of the built dictionaries. |
296
+ | Property | Type | Default | Description |
297
+ | :------------- | :-------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
298
+ | **`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. |
299
+ | **`minify`** | `boolean` | `false` | Whether to minify the dictionaries to reduce the bundle size. |
300
+ | **`purge`** | `boolean` | `false` | Whether to purge the unused keys in dictionaries. |
301
+
302
+ ### Minification
303
+
304
+ Minifying dictionaries removes unnecessary whitespace, comments, and reduces the size of the JSON content. This is especially useful for large dictionaries.
305
+
306
+ ```typescript fileName="intlayer.config.ts"
307
+ import type { IntlayerConfig } from "intlayer";
308
+
309
+ const config: IntlayerConfig = {
310
+ build: {
311
+ minify: true,
312
+ },
313
+ };
314
+
315
+ export default config;
316
+ ```
317
+
318
+ > Note: Minification is ignored if `optimize` is disabled or if the Visual Editor is enabled (as the editor needs the full content to allow editing).
319
+
320
+ ### Purging
321
+
322
+ Purging ensures that only the keys actually used in your code are included in the final dictionary bundle. This can significantly reduce the size of your bundle if you have large dictionaries with many keys that are not used in every part of your application.
323
+
324
+ ```typescript fileName="intlayer.config.ts"
325
+ import type { IntlayerConfig } from "intlayer";
326
+
327
+ const config: IntlayerConfig = {
328
+ build: {
329
+ purge: true,
330
+ },
331
+ };
332
+
333
+ export default config;
334
+ ```
335
+
336
+ > Note: Purging is ignored if `optimize` is disabled.
337
+
338
+ ### Import Mode
339
+
340
+ For large applications, including several pages and locales, your JSON can represent a significant part of your bundle size. Intlayer allows you to control how dictionaries are loaded.
341
+
342
+ The import mode can be defined by default globally in your `intlayer.config.ts` file.
343
+
344
+ ```typescript fileName="intlayer.config.ts"
345
+ import type { IntlayerConfig } from "intlayer";
346
+
347
+ const config: IntlayerConfig = {
348
+ build: {
349
+ minify: true,
350
+ },
351
+ };
352
+
353
+ export default config;
354
+ ```
355
+
356
+ As well as for each dictionaries in your `.content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}}` files.
357
+
358
+ ```ts
359
+ import { type Dictionary, t } from "intlayer";
109
360
 
110
- ## Import Modes
361
+ const appContent: Dictionary = {
362
+ key: "app",
363
+ importMode: "dynamic", // Override the default import mode
364
+ content: {
365
+ // ...
366
+ },
367
+ };
368
+
369
+ export default appContent;
370
+ ```
371
+
372
+ | Property | Type | Default | Description |
373
+ | :--------------- | :--------------------------------- | :--------- | :--------------------------------------------------------------------------------------------------------------- |
374
+ | **`importMode`** | `'static'`, `'dynamic'`, `'fetch'` | `'static'` | **Deprecated**: Use `dictionary.importMode` instead. Determines how dictionaries are loaded (see details below). |
111
375
 
112
376
  The `importMode` setting dictates how the dictionary content is injected into your component.
377
+ You can define it globally in the `intlayer.config.ts` file under the `dictionary` object, or you can overwrite it for a specific dictionary in its `.content.ts` file.
113
378
 
114
379
  ### 1. Static Mode (`default`)
115
380
 
@@ -167,14 +432,14 @@ const content = useDictionaryAsync({
167
432
 
168
433
  > 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.
169
434
 
170
- > Currently, `importMode: 'dynamic'` is not fully supported for Vue and Svelte. It is recommended to use `importMode: 'static'` for these frameworks until further updates.
171
-
172
- ### 3. Live Mode
435
+ ### 3. Fetch Mode
173
436
 
174
437
  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.
175
438
 
176
439
  > See CMS documentation for more details: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)
177
440
 
441
+ > In fetch mode, purge and minification can't be used.
442
+
178
443
  ## Summary: Static vs Dynamic
179
444
 
180
445
  | Feature | Static Mode | Dynamic Mode |
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2024-08-11
3
- updatedAt: 2026-01-06
3
+ updatedAt: 2026-03-31
4
4
  title: CLI - All Intlayer CLI commands for your multilingual website
5
5
  description: Discover how to use the Intlayer CLI to manage your multilingual website. Follow the steps in this online documentation to set up your project in a few minutes.
6
6
  keywords:
@@ -17,6 +17,9 @@ slugs:
17
17
  - concept
18
18
  - cli
19
19
  history:
20
+ - version: 8.6.4
21
+ date: 2026-03-31
22
+ changes: "Add standalone command"
20
23
  - version: 7.5.11
21
24
  date: 2026-01-06
22
25
  changes: "Add CI command"
@@ -124,6 +127,7 @@ To see how to configure available locales, or other parameters, refer to the [co
124
127
 
125
128
  - **[Build Dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/build.md)** - Build your dictionaries from content declaration files
126
129
  - **[Watch Dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/watch.md)** - Watch for changes and automatically build dictionaries
130
+ - **[Create Standalone Bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/standalone.md)** - Create a standalone JavaScript bundle containing Intlayer and specified packages
127
131
  - **[Check CLI Version](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/version.md)** - Check the installed Intlayer CLI version
128
132
  - **[List Projects](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/list_projects.md)** - List all Intlayer projects in a directory or git repository
129
133
 
@@ -171,6 +175,7 @@ To see how to configure available locales, or other parameters, refer to the [co
171
175
  "intlayer:login": "npx intlayer login",
172
176
  "intlayer:build": "npx intlayer build",
173
177
  "intlayer:watch": "npx intlayer build --watch",
178
+ "intlayer:standalone": "npx intlayer standalone --packages intlayer vanilla-intlayer",
174
179
  "intlayer:push": "npx intlayer push",
175
180
  "intlayer:pull": "npx intlayer pull",
176
181
  "intlayer:fill": "npx intlayer fill",
@@ -14,6 +14,9 @@ slugs:
14
14
  - cli
15
15
  - init
16
16
  history:
17
+ - version: 8.6.4
18
+ date: 2026-03-31
19
+ changes: "Add --no-gitignore option"
17
20
  - version: 7.5.9
18
21
  date: 2025-12-30
19
22
  changes: "Add init command"
@@ -34,13 +37,14 @@ The `init` command automatically sets up Intlayer in your project by configuring
34
37
  ## Arguments:
35
38
 
36
39
  - `--project-root [projectRoot]` - Optional. Specify the project root directory. If not provided, the command will search for the project root starting from the current working directory.
40
+ - `--no-gitignore` - Optional. Skip the automatic update of the `.gitignore` file. If this flag is set, `.intlayer` will not be added to `.gitignore`.
37
41
 
38
42
  ## What it does:
39
43
 
40
44
  The `init` command performs the following setup tasks:
41
45
 
42
46
  1. **Validates project structure** - Ensures you're in a valid project directory with a `package.json` file
43
- 2. **Updates `.gitignore`** - Adds `.intlayer` to your `.gitignore` file to exclude generated files from version control
47
+ 2. **Updates `.gitignore`** - Adds `.intlayer` to your `.gitignore` file to exclude generated files from version control (can be skipped with `--no-gitignore`)
44
48
  3. **Configures TypeScript** - Updates all `tsconfig.json` files to include Intlayer type definitions (`.intlayer/**/*.ts`)
45
49
  4. **Creates configuration file** - Generates an `intlayer.config.ts` (for TypeScript projects) or `intlayer.config.mjs` (for JavaScript projects) with default settings
46
50
  5. **Updates Vite config** - If a Vite configuration file is detected, adds the `vite-intlayer` plugin import
@@ -64,6 +68,14 @@ npx intlayer init --project-root ./my-project
64
68
 
65
69
  This will initialize Intlayer in the specified directory.
66
70
 
71
+ ### Initialize without updating .gitignore:
72
+
73
+ ```bash
74
+ npx intlayer init --no-gitignore
75
+ ```
76
+
77
+ This will set up all configuration files but will not modify your `.gitignore`.
78
+
67
79
  ## Example output:
68
80
 
69
81
  ```bash
@@ -0,0 +1,91 @@
1
+ ---
2
+ createdAt: 2024-08-11
3
+ updatedAt: 2026-03-31
4
+ title: Standalone Bundle
5
+ description: Learn how to create a standalone bundle of the application content.
6
+ keywords:
7
+ - Standalone
8
+ - Bundle
9
+ - CLI
10
+ - Intlayer
11
+ - Editor
12
+ - CMS
13
+ slugs:
14
+ - doc
15
+ - concept
16
+ - cli
17
+ - standalone
18
+ history:
19
+ - version: 8.6.4
20
+ date: 2026-03-31
21
+ changes: "Init standalone command documentation"
22
+ ---
23
+
24
+ # Standalone Bundle
25
+
26
+ The `standalone` command allows you to create a standalone JavaScript bundle containing Intlayer and any other specified packages. This is particularly useful for using Intlayer in environments without a package manager or bundler, such as a plain HTML/JS application.
27
+
28
+ The bundle uses [esbuild](https://esbuild.github.io/) to combine the requested packages and their dependencies into a single file that can be easily imported into any web project.
29
+
30
+ ## Usage
31
+
32
+ ```bash
33
+ npx intlayer standalone --packages [packages...] [options]
34
+ ```
35
+
36
+ ## Options
37
+
38
+ - `-o, --outfile [outfile]` - Optional. The name of the output file. Defaults to `intlayer-bundle.js`.
39
+ - `--packages [packages...]` - Required. A list of packages to include in the bundle (e.g., `intlayer`, `vanilla-intlayer`).
40
+ - `--version [version]` - Optional. The version of the packages to bundle. If not specified, it defaults to the version of the Intlayer CLI.
41
+ - `--minify` - Optional. Whether to minify the output. Defaults to `true`.
42
+ - `--platform [platform]` - Optional. The target platform for the bundle (e.g., `browser`, `node`). Defaults to `browser`.
43
+ - `--format [format]` - Optional. The output format for the bundle (e.g., `esm`, `cjs`, `iife`). Defaults to `esm`.
44
+
45
+ ## Common Options
46
+
47
+ - `--env-file [envFile]` - Environment file.
48
+ - `-e, --env [env]` - Environment.
49
+ - `--base-dir [baseDir]` - Base directory.
50
+ - `--no-cache` - Disable cache.
51
+ - `--verbose` - Verbose output.
52
+
53
+ ## Examples:
54
+
55
+ ### Create a bundle for Vanilla JS:
56
+
57
+ ```bash
58
+ npx intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js
59
+ ```
60
+
61
+ This will create an `intlayer.js` file containing both `intlayer` and `vanilla-intlayer` packages, minified and in ESM format, ready to be used in a browser via a `<script>` tag.
62
+
63
+ ### Bundle a specific version:
64
+
65
+ ```bash
66
+ npx intlayer standalone --packages intlayer --version 8.6.4
67
+ ```
68
+
69
+ ### Bundle with different format:
70
+
71
+ ```bash
72
+ npx intlayer standalone --packages intlayer --format iife
73
+ ```
74
+
75
+ ## What it does:
76
+
77
+ 1. **Creates a temporary environment** - Sets up a temporary directory to manage dependencies.
78
+ 2. **Installs packages** - Uses `npm` or `bun` (if available) to install the requested packages and their dependencies.
79
+ 3. **Generates an entry point** - Creates a temporary entry file that exports all requested packages and exposes them as global variables when running in a browser.
80
+ 4. **Bundles with esbuild** - Uses esbuild to bundle everything into a single file, applying minification and formatting as requested.
81
+ 5. **Outputs the file** - Writes the resulting bundle to your specified output path.
82
+
83
+ ## Global Variables
84
+
85
+ When the bundle is loaded in a browser, it exposes the requested packages as global variables on the `window` object. The variable names are derived from the package names (e.g., `intlayer` becomes `Intlayer`, `vanilla-intlayer` becomes `VanillaIntlayer`).
86
+
87
+ ```javascript
88
+ // Accessing Intlayer from the bundle
89
+ const { getLocaleName } = window.Intlayer;
90
+ const { installIntlayer, useIntlayer } = window.VanillaIntlayer;
91
+ ```
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2024-08-13
3
- updatedAt: 2026-03-12
3
+ updatedAt: 2026-04-08
4
4
  title: Configuration
5
5
  description: Learn how to configure Intlayer for your application. Understand the various settings and options available to customize Intlayer to your needs.
6
6
  keywords:
@@ -14,6 +14,12 @@ slugs:
14
14
  - concept
15
15
  - configuration
16
16
  history:
17
+ - version: 8.7.0
18
+ date: 2026-04-08
19
+ changes: "Add `prune` and `minify` options to the build configuration"
20
+ - version: 8.7.0
21
+ date: 2026-04-03
22
+ changes: "Add `currentDomain` option"
17
23
  - version: 8.4.0
18
24
  date: 2026-03-20
19
25
  changes: "Add object per-locale notation for 'compiler.output' and 'dictionary.fill'"
@@ -237,6 +243,17 @@ const config: IntlayerConfig = {
237
243
  fr: "/[locale]/a-propos",
238
244
  },
239
245
  }),
246
+
247
+ /**
248
+ * Maps locales to domain hostnames for domain-based routing.
249
+ * URLs for these locales will be absolute (e.g., https://intlayer.cn/).
250
+ * The domain implies the locale, so no locale prefix is added to the path.
251
+ * Default: undefined
252
+ */
253
+ domains: {
254
+ en: "intlayer.org",
255
+ zh: "intlayer.cn",
256
+ },
240
257
  },
241
258
 
242
259
  /**
@@ -388,6 +405,25 @@ const config: IntlayerConfig = {
388
405
  */
389
406
  optimize: true,
390
407
 
408
+ /**
409
+ * Minify the dictionaries to reduce the bundle size.
410
+ * Default: false
411
+ *
412
+ * Note:
413
+ * - This option will be ignored if `optimize` is disabled.
414
+ * - This option will be ignored if `editor.enabled` is true.
415
+ */
416
+ minify: false,
417
+
418
+ /**
419
+ * Purge the unused keys in a dictionaries.
420
+ * Default: false
421
+ *
422
+ * Note:
423
+ * - This option will be ignored if `optimize` is disabled.
424
+ */
425
+ purge: false,
426
+
391
427
  /**
392
428
  * Output format for generated dictionary files.
393
429
  * Default: ['cjs', 'esm']
@@ -598,12 +634,13 @@ Defines settings related to the integrated editor, including server port and act
598
634
 
599
635
  Settings that control routing behavior, including URL structure, locale storage, and middleware handling.
600
636
 
601
- | Field | Description | Type | Default | Example | Note |
602
- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
603
- | `mode` | URL routing mode for locale handling. | `'prefix-no-default'` &#124; <br/> `'prefix-all'` &#124; <br/> `'no-prefix'` &#124; <br/> `'search-params'` | `'prefix-no-default'` | `'prefix-no-default'`: `/dashboard` (en) or `/fr/dashboard` (fr). `'prefix-all'`: `/en/dashboard`. `'no-prefix'`: locale handled via other means. `'search-params'`: `/dashboard?locale=fr` | Does not impact cookie or locale storage management. |
604
- | `storage` | Configuration for storing the locale in the client. | `false` &#124; <br/> `'cookie'` &#124; <br/> `'localStorage'` &#124; <br/> `'sessionStorage'` &#124; <br/> `'header'` &#124; <br/> `CookiesAttributes` &#124; <br/> `StorageAttributes` &#124; <br/> `Array` | `['cookie', 'header']` | `'localStorage'` <br/> `[{ type: 'cookie', name: 'custom-locale', secure: true }]` | See Storage Options table below. |
605
- | `basePath` | The base path for the application URLs. | `string` | `''` | `'/my-app'` | If app is at `https://example.com/my-app, basePath is `'/my-app'`and URLs become`https://example.com/my-app/en`. |
606
- | `rewrite` | Custom URL rewriting rules that override the default routing mode for specific paths. Supports `[param]` dynamic parameters. | `Record<string, StrictModeLocaleMap<string>>` | `undefined` | See example below | • Rewrite rules take precedence over `mode`.<br/>• Works with Next.js and Vite.<br/>• `getLocalizedUrl()` automatically applies matching rules.<br/>• See [Custom URL Rewrites](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/custom_url_rewrites.md). |
637
+ | Field | Description | Type | Default | Example | Note |
638
+ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
639
+ | `mode` | URL routing mode for locale handling. | `'prefix-no-default'` &#124; <br/> `'prefix-all'` &#124; <br/> `'no-prefix'` &#124; <br/> `'search-params'` | `'prefix-no-default'` | `'prefix-no-default'`: `/dashboard` (en) or `/fr/dashboard` (fr). `'prefix-all'`: `/en/dashboard`. `'no-prefix'`: locale handled via other means. `'search-params'`: `/dashboard?locale=fr` | Does not impact cookie or locale storage management. |
640
+ | `storage` | Configuration for storing the locale in the client. | `false` &#124; <br/> `'cookie'` &#124; <br/> `'localStorage'` &#124; <br/> `'sessionStorage'` &#124; <br/> `'header'` &#124; <br/> `CookiesAttributes` &#124; <br/> `StorageAttributes` &#124; <br/> `Array` | `['cookie', 'header']` | `'localStorage'` <br/> `[{ type: 'cookie', name: 'custom-locale', secure: true }]` | See Storage Options table below. |
641
+ | `basePath` | The base path for the application URLs. | `string` | `''` | `'/my-app'` | If app is at `https://example.com/my-app, basePath is `'/my-app'`and URLs become`https://example.com/my-app/en`. |
642
+ | `rewrite` | Custom URL rewriting rules that override the default routing mode for specific paths. Supports `[param]` dynamic parameters. | `Record<string, StrictModeLocaleMap<string>>` | `undefined` | See example below | • Rewrite rules take precedence over `mode`.<br/>• Works with Next.js and Vite.<br/>• `getLocalizedUrl()` automatically applies matching rules.<br/>• See [Custom URL Rewrites](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/custom_url_rewrites.md). |
643
+ | `domains` | Maps locales to domain hostnames for domain-based routing. When set, URLs for a locale use that domain as the base (absolute URL) and no locale prefix is added to the path. | `Partial<Record<Locale, string>>` | `undefined` | `{ zh: 'intlayer.zh', fr: 'intlayer.org' }` | • Protocol defaults to `https://` when not included in the hostname.<br/>• The domain itself identifies the locale, so no `/zh/` prefix is added.<br/>• `getLocalizedUrl('/', 'zh')` returns `https://intlayer.zh/`. |
607
644
 
608
645
  **`rewrite` example**:
609
646
 
@@ -926,6 +963,8 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
926
963
  | ----------------- | -------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
927
964
  | `mode` | Controls the mode of the build. | `'auto'` &#124; <br/> `'manual'` | `'auto'` | `'manual'` | • `'auto'`: build enabled automatically when the application is built.<br/>• `'manual'`: only runs when the build command is executed.<br/>• Can be used to disable dictionary builds (e.g. to avoid running in Node.js environments). |
928
965
  | `optimize` | Controls whether the build should be optimized. | `boolean` | `undefined` | `process.env.NODE_ENV === 'production'` | • If unset, optimization is triggered on framework build (Vite/Next.js).<br/>• `true` forces optimization including dev mode.<br/>• `false` disables it.<br/>• When enabled, replaces dictionary calls to optimize chunking — only used dictionaries are imported.<br/>• Relies on `@intlayer/babel` and `@intlayer/swc` plugins.<br/>• Keys must be declared statically. |
966
+ | `minify` | Whether to minify the dictionaries to reduce the bundle size. | `boolean` | `false` | | • Indicates whether the bundle should be minified.<br/>• Default: `false`.<br/>• This option will be ignored if `optimize` is disabled.<br/>• This option will be ignored if `editor.enabled` is true. |
967
+ | `purge` | Whether to purge the unused keys in a dictionaries. | `boolean` | `false` | | • Indicates whether the bundle should be purged.<br/>• Default: `false`.<br/>• This option will be ignored if `optimize` is disabled. |
929
968
  | `checkTypes` | Indicates if the build should check TypeScript types and log errors. | `boolean` | `false` | | Can slow down the build. |
930
969
  | `outputFormat` | Controls the output format of the dictionaries. | `('esm' &#124; 'cjs')[]` | `['esm', 'cjs']` | `['cjs']` | |
931
970
  | `traversePattern` | Patterns defining which files to traverse during optimization. | `string[]` | `['**/*.{tsx,ts,js,mjs,cjs,jsx,vue,svelte,svte}', '!**/node_modules/**', '!**/dist/**', '!**/.intlayer/**', '!**/*.config.*', '!**/*.test.*', '!**/*.spec.*', '!**/*.stories.*']` | `['src/**/*.{ts,tsx}', '../ui-library/**/*.{ts,tsx}', '!**/node_modules/**']` | • Limit optimization to relevant files to improve build performance.<br/>• Ignored if `optimize` is disabled.<br/>• Uses glob pattern. |