@intlayer/docs 9.2.0 → 9.3.0
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/blog/ar/index.md +1 -1
- package/blog/de/index.md +1 -1
- package/blog/en/index.md +1 -1
- package/blog/en-GB/index.md +1 -1
- package/blog/es/index.md +1 -1
- package/blog/fr/index.md +1 -1
- package/blog/hi/index.md +1 -1
- package/blog/id/index.md +1 -1
- package/blog/it/index.md +1 -1
- package/blog/ja/index.md +1 -1
- package/blog/ko/index.md +1 -1
- package/blog/pl/index.md +1 -1
- package/blog/pt/index.md +1 -1
- package/blog/ru/index.md +1 -1
- package/blog/uk/index.md +1 -1
- package/blog/vi/index.md +1 -1
- package/blog/zh/index.md +1 -1
- package/dist/cjs/common.cjs +24 -1
- package/dist/cjs/common.cjs.map +1 -1
- package/dist/cjs/generated/blog.entry.cjs +31 -4
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/cjs/generated/docs.entry.cjs +31 -4
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/cjs/generated/frequentQuestions.entry.cjs +31 -4
- package/dist/cjs/generated/frequentQuestions.entry.cjs.map +1 -1
- package/dist/cjs/generated/legal.entry.cjs +31 -4
- package/dist/cjs/generated/legal.entry.cjs.map +1 -1
- package/dist/esm/common.mjs +24 -1
- package/dist/esm/common.mjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +31 -4
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +31 -4
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/esm/generated/frequentQuestions.entry.mjs +31 -4
- package/dist/esm/generated/frequentQuestions.entry.mjs.map +1 -1
- package/dist/esm/generated/legal.entry.mjs +31 -4
- package/dist/esm/generated/legal.entry.mjs.map +1 -1
- package/dist/types/common.d.ts.map +1 -1
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/dist/types/generated/frequentQuestions.entry.d.ts.map +1 -1
- package/dist/types/generated/legal.entry.d.ts.map +1 -1
- package/docs/ar/bundle_optimization.md +58 -25
- package/docs/ar/live-sync.md +4 -0
- package/docs/bn/bundle_optimization.md +58 -25
- package/docs/cs/bundle_optimization.md +58 -25
- package/docs/de/bundle_optimization.md +58 -25
- package/docs/de/live-sync.md +4 -0
- package/docs/en/bundle_optimization.md +51 -23
- package/docs/en/live-sync.md +4 -0
- package/docs/en-GB/bundle_optimization.md +58 -25
- package/docs/en-GB/live-sync.md +4 -0
- package/docs/es/bundle_optimization.md +58 -25
- package/docs/es/live-sync.md +4 -0
- package/docs/fr/bundle_optimization.md +58 -25
- package/docs/fr/live-sync.md +4 -0
- package/docs/hi/bundle_optimization.md +58 -25
- package/docs/hi/live-sync.md +4 -0
- package/docs/id/bundle_optimization.md +58 -25
- package/docs/id/live-sync.md +4 -0
- package/docs/it/bundle_optimization.md +58 -25
- package/docs/it/live-sync.md +4 -0
- package/docs/ja/bundle_optimization.md +58 -25
- package/docs/ja/live-sync.md +4 -0
- package/docs/ko/bundle_optimization.md +58 -25
- package/docs/ko/live-sync.md +4 -0
- package/docs/nl/bundle_optimization.md +58 -25
- package/docs/pl/bundle_optimization.md +58 -25
- package/docs/pl/live-sync.md +4 -0
- package/docs/pt/bundle_optimization.md +58 -24
- package/docs/pt/live-sync.md +4 -0
- package/docs/ru/bundle_optimization.md +58 -25
- package/docs/ru/live-sync.md +4 -0
- package/docs/tr/bundle_optimization.md +58 -25
- package/docs/tr/live-sync.md +4 -0
- package/docs/uk/bundle_optimization.md +58 -25
- package/docs/uk/live-sync.md +4 -0
- package/docs/ur/bundle_optimization.md +58 -25
- package/docs/vi/bundle_optimization.md +58 -25
- package/docs/vi/live-sync.md +4 -0
- package/docs/zh/bundle_optimization.md +58 -25
- package/docs/zh/live-sync.md +4 -0
- package/docs/zh-TW/bundle_optimization.md +58 -25
- package/package.json +7 -7
- package/src/common.ts +39 -2
- package/src/generated/blog.entry.ts +39 -7
- package/src/generated/docs.entry.ts +39 -7
- package/src/generated/frequentQuestions.entry.ts +39 -7
- package/src/generated/legal.entry.ts +39 -7
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-11-25
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-08-09
|
|
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,6 +16,9 @@ slugs:
|
|
|
16
16
|
- concept
|
|
17
17
|
- bundle-optimization
|
|
18
18
|
history:
|
|
19
|
+
- version: 9.2.1
|
|
20
|
+
date: 2026-08-09
|
|
21
|
+
changes: "`purge` and `minify` now work on Next.js through `@intlayer/swc` — no `babel.config.js` required"
|
|
19
22
|
- version: 8.12.0
|
|
20
23
|
date: 2026-06-24
|
|
21
24
|
changes: "List Babel plugins in required pipeline order (extract → purge → minify → optimize) in the reference tables"
|
|
@@ -225,6 +228,20 @@ Vite users **never configure these directly**. They are wired up automatically w
|
|
|
225
228
|
| Dictionary minify | Same as `intlayerMinifyBabelPlugin` JSON-write pass |
|
|
226
229
|
| Babel transform | Same as `intlayerMinifyBabelPlugin` source-code rename + `intlayerOptimizeBabelPlugin` |
|
|
227
230
|
|
|
231
|
+
### SWC plugin (`@intlayer/swc`)
|
|
232
|
+
|
|
233
|
+
Next.js users **never configure these directly** either. Since **v9.2.1**, `withIntlayer()` in `next.config.ts` runs the full pipeline — purge, minify and import rewriting — from the `build.purge` and `build.minify` flags alone.
|
|
234
|
+
|
|
235
|
+
The work is split in two, because an SWC Wasm plugin transforms one file at a time with no file-system access:
|
|
236
|
+
|
|
237
|
+
| Pass | Where it runs | What it does |
|
|
238
|
+
| :---------------------------------------- | :---------------------------- | :---------------------------------------------------------------------------------------- |
|
|
239
|
+
| Usage analysis + JSON purge/minify | Node, inside `withIntlayer()` | Reads every component source file, rewrites `.intlayer/**/*.json`, produces rename tables |
|
|
240
|
+
| Source rewriting (`content.title` → `.a`) | `@intlayer/swc` (Wasm) | Applies the rename tables to the matching property accesses in your code |
|
|
241
|
+
| Import rewriting (`useIntlayer` → dict) | `@intlayer/swc` (Wasm) | Same as `intlayerOptimizeBabelPlugin` |
|
|
242
|
+
|
|
243
|
+
Deciding _which_ fields are unused and _what_ alias each one gets requires cross-file state and file I/O, so that half runs in Node; the SWC plugin only receives the resulting tables.
|
|
244
|
+
|
|
228
245
|
## Setup by Platform
|
|
229
246
|
|
|
230
247
|
<Tabs>
|
|
@@ -232,10 +249,12 @@ Vite users **never configure these directly**. They are wired up automatically w
|
|
|
232
249
|
|
|
233
250
|
### Next.js
|
|
234
251
|
|
|
235
|
-
Next.js requires the `@intlayer/swc` plugin for the optimize (import rewriting)
|
|
252
|
+
Next.js requires the `@intlayer/swc` plugin, because Next.js uses SWC for builds. Since **v9.2.1** this single package covers the whole pipeline — optimize (import rewriting), purge and minify.
|
|
236
253
|
|
|
237
254
|
> This plugin is not installed by default because SWC plugins are still experimental for Next.js. It may change in the future.
|
|
238
255
|
|
|
256
|
+
> **Next.js 16.1.0 is the minimum version.** It is the first release built on SWC's forward-compatible Wasm plugin ABI; earlier releases reject the plugin. `withIntlayer` reads your Next.js version and simply does not register the plugin below 16.1.0 — those builds still succeed, they just run without bundle optimization.
|
|
257
|
+
|
|
239
258
|
<Tabs>
|
|
240
259
|
<Tab value="npm">
|
|
241
260
|
|
|
@@ -270,33 +289,40 @@ intlayer-swc-plugin = "*"
|
|
|
270
289
|
|
|
271
290
|
Once installed, Intlayer will automatically detect and use the plugin.
|
|
272
291
|
|
|
273
|
-
|
|
292
|
+
The **purge and minify** passes (field removal and field renaming) require no extra package and no `babel.config.js`. Wrap your config with `withIntlayer` and toggle the flags in `intlayer.config.ts`:
|
|
274
293
|
|
|
275
|
-
```
|
|
276
|
-
|
|
294
|
+
```typescript fileName="next.config.ts"
|
|
295
|
+
import { withIntlayer } from "next-intlayer/server";
|
|
296
|
+
import type { NextConfig } from "next";
|
|
297
|
+
|
|
298
|
+
const nextConfig: NextConfig = {/* your config */};
|
|
299
|
+
|
|
300
|
+
export default withIntlayer(nextConfig);
|
|
277
301
|
```
|
|
278
302
|
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
intlayerPurgeBabelPlugin,
|
|
282
|
-
intlayerMinifyBabelPlugin,
|
|
283
|
-
getPurgePluginOptions,
|
|
284
|
-
getMinifyPluginOptions,
|
|
285
|
-
} = require("@intlayer/babel");
|
|
303
|
+
```typescript fileName="intlayer.config.ts"
|
|
304
|
+
import type { IntlayerConfig } from "intlayer";
|
|
286
305
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
// Minify: rename content field keys in JSON + source code
|
|
293
|
-
[intlayerMinifyBabelPlugin, getMinifyPluginOptions()],
|
|
294
|
-
// Note: intlayerOptimizeBabelPlugin is NOT needed here because
|
|
295
|
-
// @intlayer/swc handles the useIntlayer → useDictionary rewrite.
|
|
296
|
-
],
|
|
306
|
+
const config: IntlayerConfig = {
|
|
307
|
+
build: {
|
|
308
|
+
purge: true, // remove unused content fields from bundled JSON
|
|
309
|
+
minify: true, // rename content field keys to short aliases
|
|
310
|
+
},
|
|
297
311
|
};
|
|
312
|
+
|
|
313
|
+
export default config;
|
|
298
314
|
```
|
|
299
315
|
|
|
316
|
+
During `next build`, `withIntlayer` analyzes your sources, rewrites the compiled dictionaries, and forwards the resulting field-rename tables to `@intlayer/swc`, which updates the matching property accesses in your code.
|
|
317
|
+
|
|
318
|
+
> Use the async `withIntlayer`, not `withIntlayerSync`. The sync variant does not run the analysis pipeline, so purge and minify have no effect with it.
|
|
319
|
+
|
|
320
|
+
> Purge and minify run on `next build` only — the optimize pipeline is off during `next dev`.
|
|
321
|
+
|
|
322
|
+
> They are also disabled when compat-adapter callers are configured (`swcExtraCallers`, set by the compat packages such as `@intlayer/next-intl` or `@intlayer/react-i18next`): those call sites are invisible to the usage analyzer, so purging would remove fields the code still reads. Import rewriting stays active.
|
|
323
|
+
|
|
324
|
+
**Earlier versions (before 9.2.1)** required `@intlayer/babel` and a `babel.config.js` declaring `intlayerPurgeBabelPlugin` and `intlayerMinifyBabelPlugin`. That file is no longer needed and can be deleted.
|
|
325
|
+
|
|
300
326
|
</Tab>
|
|
301
327
|
<Tab value="vite">
|
|
302
328
|
|
|
@@ -452,6 +478,8 @@ export default config;
|
|
|
452
478
|
|
|
453
479
|
> Minification is skipped when `optimize` is `false` or when `editor.enabled` is `true` (the visual editor requires the original field names to allow editing).
|
|
454
480
|
|
|
481
|
+
> On Next.js, minification is also skipped when `@intlayer/swc` is not installed or cannot be loaded (Next.js below 16.1.0). The plugin is the half that rewrites the source accesses, so renaming the dictionaries without it would leave your code reading field names that no longer exist.
|
|
482
|
+
|
|
455
483
|
> Minification is also skipped for dictionaries loaded via `importMode: 'fetch'` because their JSON is served from a remote API using the original field names — renaming the client-side keys would break the server/client contract.
|
|
456
484
|
|
|
457
485
|
### Purging (unused field removal)
|
|
@@ -480,7 +508,7 @@ export default config;
|
|
|
480
508
|
{ "title": "…", "subtitle": "…" }
|
|
481
509
|
```
|
|
482
510
|
|
|
483
|
-
> Purge is skipped when `optimize` is `false` or when `editor.enabled` is `true`.
|
|
511
|
+
> Purge is skipped when `optimize` is `false` or when `editor.enabled` is `true`. On Next.js it is additionally skipped when `@intlayer/swc` is unavailable, and when compat-adapter callers are configured.
|
|
484
512
|
|
|
485
513
|
> Purge is also skipped conservatively when a source file cannot be parsed, or when the result of `useIntlayer` is assigned to a variable and passed around in ways the static analyser cannot follow (e.g. spread into an object, passed as a prop without destructuring). In those cases the full dictionary is kept.
|
|
486
514
|
|
package/docs/en/live-sync.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-11-25
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-08-09
|
|
4
4
|
title: i18n Bundle Size & Performance Optimisation
|
|
5
5
|
description: Reduce your application bundle size by optimising internationalisation (i18n) content. Learn how to leverage tree shaking and lazy loading for dictionaries with Intlayer.
|
|
6
6
|
keywords:
|
|
@@ -16,6 +16,12 @@ slugs:
|
|
|
16
16
|
- concept
|
|
17
17
|
- bundle-optimization
|
|
18
18
|
history:
|
|
19
|
+
- version: 9.2.1
|
|
20
|
+
date: 2026-08-09
|
|
21
|
+
changes: "`purge` and `minify` now work on Next.js through `@intlayer/swc` — no `babel.config.js` required"
|
|
22
|
+
- version: 8.12.0
|
|
23
|
+
date: 2026-06-24
|
|
24
|
+
changes: "List Babel plugins in required pipeline order (extract → purge → minify → optimize) in the reference tables"
|
|
19
25
|
- version: 8.12.0
|
|
20
26
|
date: 2026-06-07
|
|
21
27
|
changes: "Added `intlayerPurgeBabelPlugin` and `intlayerMinifyBabelPlugin` for Babel/Webpack; clarified the plugin pipeline"
|
|
@@ -191,12 +197,14 @@ Intlayer's build optimisation is split into several discrete plugins, each with
|
|
|
191
197
|
|
|
192
198
|
These are used directly in `babel.config.js` for Webpack-based setups (Next.js with Babel, CRA, custom Webpack, etc).
|
|
193
199
|
|
|
200
|
+
The table below lists them in their required pipeline order (the same order they must appear in `babel.config.js`):
|
|
201
|
+
|
|
194
202
|
| Plugin | What it does |
|
|
195
203
|
| :---------------------------- | :------------------------------------------------------------------------------------------------------------------ |
|
|
196
204
|
| `intlayerExtractBabelPlugin` | Scans `.content.ts` files and writes compiled dictionaries to `.intlayer/` |
|
|
197
|
-
| `intlayerOptimizeBabelPlugin` | Rewrites `useIntlayer('key')` → `useDictionary(hash)` and injects the matching dictionary `import` |
|
|
198
205
|
| `intlayerPurgeBabelPlugin` | Scans all source files, removes **unused content fields** from the compiled `.intlayer/**/*.json` dictionary files |
|
|
199
206
|
| `intlayerMinifyBabelPlugin` | **Renames content field keys** to short alphabetical aliases (`title` → `a`) in both JSON files and the source code |
|
|
207
|
+
| `intlayerOptimizeBabelPlugin` | Rewrites `useIntlayer('key')` → `useDictionary(hash)` and injects the matching dictionary `import` |
|
|
200
208
|
|
|
201
209
|
> **Plugin order matters.** In your `babel.config.js` the purge and minify plugins must appear **before** the optimize plugin. The optimize pass replaces `useIntlayer('key')` with an opaque `useDictionary(hash)` call, wiping out the dictionary key information the purge and minify passes need to identify which fields are used.
|
|
202
210
|
|
|
@@ -205,9 +213,9 @@ Each Babel plugin has a corresponding options helper that reads your `intlayer.c
|
|
|
205
213
|
| Options helper | Used with |
|
|
206
214
|
| :--------------------------- | :---------------------------- |
|
|
207
215
|
| `getExtractPluginOptions()` | `intlayerExtractBabelPlugin` |
|
|
208
|
-
| `getOptimizePluginOptions()` | `intlayerOptimizeBabelPlugin` |
|
|
209
216
|
| `getPurgePluginOptions()` | `intlayerPurgeBabelPlugin` |
|
|
210
217
|
| `getMinifyPluginOptions()` | `intlayerMinifyBabelPlugin` |
|
|
218
|
+
| `getOptimizePluginOptions()` | `intlayerOptimizeBabelPlugin` |
|
|
211
219
|
|
|
212
220
|
### Vite plugins (`vite-intlayer`)
|
|
213
221
|
|
|
@@ -220,6 +228,20 @@ Vite users **never configure these directly**. They are wired up automatically w
|
|
|
220
228
|
| Dictionary minify | Same as `intlayerMinifyBabelPlugin` JSON write pass |
|
|
221
229
|
| Babel transform | Same as `intlayerMinifyBabelPlugin` source code rename + `intlayerOptimizeBabelPlugin` |
|
|
222
230
|
|
|
231
|
+
### SWC plugin (`@intlayer/swc`)
|
|
232
|
+
|
|
233
|
+
Next.js users **never configure these directly** either. Since **v9.2.1**, `withIntlayer()` in `next.config.ts` runs the full pipeline — purge, minify and import rewriting — from the `build.purge` and `build.minify` flags alone.
|
|
234
|
+
|
|
235
|
+
The work is split in two, because an SWC Wasm plugin transforms one file at a time with no file-system access:
|
|
236
|
+
|
|
237
|
+
| Pass | Where it runs | What it does |
|
|
238
|
+
| :---------------------------------------- | :---------------------------- | :---------------------------------------------------------------------------------------- |
|
|
239
|
+
| Usage analysis + JSON purge/minify | Node, inside `withIntlayer()` | Reads every component source file, rewrites `.intlayer/**/*.json`, produces rename tables |
|
|
240
|
+
| Source rewriting (`content.title` → `.a`) | `@intlayer/swc` (Wasm) | Applies the rename tables to the matching property accesses in your code |
|
|
241
|
+
| Import rewriting (`useIntlayer` → dict) | `@intlayer/swc` (Wasm) | Same as `intlayerOptimizeBabelPlugin` |
|
|
242
|
+
|
|
243
|
+
Deciding _which_ fields are unused and _what_ alias each one gets requires cross-file state and file I/O, so that half runs in Node; the SWC plugin only receives the resulting tables.
|
|
244
|
+
|
|
223
245
|
## Setup by Platform
|
|
224
246
|
|
|
225
247
|
<Tabs>
|
|
@@ -227,10 +249,12 @@ Vite users **never configure these directly**. They are wired up automatically w
|
|
|
227
249
|
|
|
228
250
|
### Next.js
|
|
229
251
|
|
|
230
|
-
Next.js requires the `@intlayer/swc` plugin
|
|
252
|
+
Next.js requires the `@intlayer/swc` plugin, because Next.js uses SWC for builds. Since **v9.2.1** this single package covers the whole pipeline — optimise (import rewriting), purge and minify.
|
|
231
253
|
|
|
232
254
|
> This plugin is not installed by default as SWC plugins are still experimental for Next.js. This may change in the future.
|
|
233
255
|
|
|
256
|
+
> **Next.js 16.1.0 is the minimum version.** It is the first release built on SWC's forward-compatible Wasm plugin ABI; earlier releases reject the plugin. `withIntlayer` reads your Next.js version and simply does not register the plugin below 16.1.0 — those builds still succeed, they just run without bundle optimisation.
|
|
257
|
+
|
|
234
258
|
<Tabs>
|
|
235
259
|
<Tab value="npm">
|
|
236
260
|
|
|
@@ -265,33 +289,40 @@ intlayer-swc-plugin = "*"
|
|
|
265
289
|
|
|
266
290
|
Once installed, Intlayer will automatically detect and use the plugin.
|
|
267
291
|
|
|
268
|
-
|
|
292
|
+
The **purge and minify** passes (field removal and field renaming) require no extra package and no `babel.config.js`. Wrap your config with `withIntlayer` and toggle the flags in `intlayer.config.ts`:
|
|
269
293
|
|
|
270
|
-
```
|
|
271
|
-
|
|
294
|
+
```typescript fileName="next.config.ts"
|
|
295
|
+
import { withIntlayer } from "next-intlayer/server";
|
|
296
|
+
import type { NextConfig } from "next";
|
|
297
|
+
|
|
298
|
+
const nextConfig: NextConfig = {/* your config */};
|
|
299
|
+
|
|
300
|
+
export default withIntlayer(nextConfig);
|
|
272
301
|
```
|
|
273
302
|
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
intlayerPurgeBabelPlugin,
|
|
277
|
-
intlayerMinifyBabelPlugin,
|
|
278
|
-
getPurgePluginOptions,
|
|
279
|
-
getMinifyPluginOptions,
|
|
280
|
-
} = require("@intlayer/babel");
|
|
303
|
+
```typescript fileName="intlayer.config.ts"
|
|
304
|
+
import type { IntlayerConfig } from "intlayer";
|
|
281
305
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
// Minify: rename content field keys in JSON + source code
|
|
288
|
-
[intlayerMinifyBabelPlugin, getMinifyPluginOptions()],
|
|
289
|
-
// Note: intlayerOptimizeBabelPlugin is NOT needed here because
|
|
290
|
-
// @intlayer/swc handles the useIntlayer → useDictionary rewrite.
|
|
291
|
-
],
|
|
306
|
+
const config: IntlayerConfig = {
|
|
307
|
+
build: {
|
|
308
|
+
purge: true, // remove unused content fields from bundled JSON
|
|
309
|
+
minify: true, // rename content field keys to short aliases
|
|
310
|
+
},
|
|
292
311
|
};
|
|
312
|
+
|
|
313
|
+
export default config;
|
|
293
314
|
```
|
|
294
315
|
|
|
316
|
+
During `next build`, `withIntlayer` analyses your sources, rewrites the compiled dictionaries, and forwards the resulting field-rename tables to `@intlayer/swc`, which updates the matching property accesses in your code.
|
|
317
|
+
|
|
318
|
+
> Use the async `withIntlayer`, not `withIntlayerSync`. The sync variant does not run the analysis pipeline, so purge and minify have no effect with it.
|
|
319
|
+
|
|
320
|
+
> Purge and minify run on `next build` only — the optimise pipeline is off during `next dev`.
|
|
321
|
+
|
|
322
|
+
> They are also disabled when compat-adapter callers are configured (`swcExtraCallers`, set by the compat packages such as `@intlayer/next-intl` or `@intlayer/react-i18next`): those call sites are invisible to the usage analyser, so purging would remove fields the code still reads. Import rewriting stays active.
|
|
323
|
+
|
|
324
|
+
**Earlier versions (before 9.2.1)** required `@intlayer/babel` and a `babel.config.js` declaring `intlayerPurgeBabelPlugin` and `intlayerMinifyBabelPlugin`. That file is no longer needed and can be deleted.
|
|
325
|
+
|
|
295
326
|
</Tab>
|
|
296
327
|
<Tab value="vite">
|
|
297
328
|
|
|
@@ -447,6 +478,8 @@ export default config;
|
|
|
447
478
|
|
|
448
479
|
> Minification is skipped when `optimize` is `false` or when `editor.enabled` is `true` (the visual editor requires the original field names to allow editing).
|
|
449
480
|
|
|
481
|
+
> On Next.js, minification is also skipped when `@intlayer/swc` is not installed or cannot be loaded (Next.js below 16.1.0). The plugin is the half that rewrites the source accesses, so renaming the dictionaries without it would leave your code reading field names that no longer exist.
|
|
482
|
+
|
|
450
483
|
> Minification is also skipped for dictionaries loaded via `importMode: 'fetch'` because their JSON is served from a remote API using the original field names — renaming the client-side keys would break the server/client contract.
|
|
451
484
|
|
|
452
485
|
### Purging (unused field removal)
|
|
@@ -475,7 +508,7 @@ export default config;
|
|
|
475
508
|
{ "title": "…", "subtitle": "…" }
|
|
476
509
|
```
|
|
477
510
|
|
|
478
|
-
> Purge is skipped when `optimize` is `false` or when `editor.enabled` is `true`.
|
|
511
|
+
> Purge is skipped when `optimize` is `false` or when `editor.enabled` is `true`. On Next.js it is additionally skipped when `@intlayer/swc` is unavailable, and when compat-adapter callers are configured.
|
|
479
512
|
|
|
480
513
|
> Purge is also conservatively skipped when a source file cannot be parsed, or when the result of `useIntlayer` is assigned to a variable and passed around in ways the static analyser cannot track (e.g. spread into an object, passed as a prop without destructuring). In those cases, the full dictionary is preserved.
|
|
481
514
|
|
package/docs/en-GB/live-sync.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-11-25
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-08-09
|
|
4
4
|
title: Optimización del tamaño y rendimiento del paquete i18n
|
|
5
5
|
description: Reduce el tamaño del paquete de tu aplicación optimizando el contenido de internacionalización (i18n). Aprende cómo aprovechar el tree shaking y el lazy loading para diccionarios con Intlayer.
|
|
6
6
|
keywords:
|
|
@@ -16,6 +16,12 @@ slugs:
|
|
|
16
16
|
- concept
|
|
17
17
|
- bundle-optimization
|
|
18
18
|
history:
|
|
19
|
+
- version: 9.2.1
|
|
20
|
+
date: 2026-08-09
|
|
21
|
+
changes: "`purge` y `minify` ahora funcionan en Next.js a través de `@intlayer/swc` — no se requiere `babel.config.js`"
|
|
22
|
+
- version: 8.12.0
|
|
23
|
+
date: 2026-06-24
|
|
24
|
+
changes: "Listar los plugins de Babel en el orden de pipeline requerido (extract → purge → minify → optimize) en las tablas de referencia"
|
|
19
25
|
- version: 8.12.0
|
|
20
26
|
date: 2026-06-07
|
|
21
27
|
changes: "Añadidos `intlayerPurgeBabelPlugin` y `intlayerMinifyBabelPlugin` para Babel/Webpack; aclaración del flujo de plugins"
|
|
@@ -191,12 +197,14 @@ La optimización de compilación de Intlayer se divide en varios complementos di
|
|
|
191
197
|
|
|
192
198
|
Se utilizan directamente en `babel.config.js` para configuraciones basadas en Webpack (Next.js con Babel, CRA, Webpack personalizado, etc.).
|
|
193
199
|
|
|
200
|
+
La siguiente tabla los enumera en su orden de pipeline requerido (el mismo orden en que deben aparecer en `babel.config.js`):
|
|
201
|
+
|
|
194
202
|
| Plugin | Qué hace |
|
|
195
203
|
| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
196
204
|
| `intlayerExtractBabelPlugin` | Analiza archivos `.content.ts` y escribe los diccionarios compilados en `.intlayer/` |
|
|
197
|
-
| `intlayerOptimizeBabelPlugin` | Reescribe `useIntlayer('key')` → `useDictionary(hash)` e inyecta la declaración `import` del diccionario correspondiente |
|
|
198
205
|
| `intlayerPurgeBabelPlugin` | Analiza todos los archivos fuente y elimina **los campos de contenido no utilizados** de los archivos JSON `.intlayer/**/*.json` |
|
|
199
206
|
| `intlayerMinifyBabelPlugin` | **Renombra las claves de campos de contenido** por alias alfabéticos cortos (`title` → `a`) tanto en archivos JSON como en el código fuente |
|
|
207
|
+
| `intlayerOptimizeBabelPlugin` | Reescribe `useIntlayer('key')` → `useDictionary(hash)` e inyecta la declaración `import` del diccionario correspondiente |
|
|
200
208
|
|
|
201
209
|
> **El orden de los plugins es importante.** En tu `babel.config.js`, los complementos de purga (purge) y minificación (minify) deben aparecer **antes** del complemento de optimización. La fase de optimización reemplaza `useIntlayer('key')` con una llamada opaca `useDictionary(hash)`, lo que borra la información de clave del diccionario que las fases de purga y minificación necesitan para saber qué campos se usan.
|
|
202
210
|
|
|
@@ -205,9 +213,9 @@ Cada complemento de Babel cuenta con una función auxiliar de opciones que lee t
|
|
|
205
213
|
| Helper de opciones | Utilizado con |
|
|
206
214
|
| :--------------------------- | :---------------------------- |
|
|
207
215
|
| `getExtractPluginOptions()` | `intlayerExtractBabelPlugin` |
|
|
208
|
-
| `getOptimizePluginOptions()` | `intlayerOptimizeBabelPlugin` |
|
|
209
216
|
| `getPurgePluginOptions()` | `intlayerPurgeBabelPlugin` |
|
|
210
217
|
| `getMinifyPluginOptions()` | `intlayerMinifyBabelPlugin` |
|
|
218
|
+
| `getOptimizePluginOptions()` | `intlayerOptimizeBabelPlugin` |
|
|
211
219
|
|
|
212
220
|
### Plugins de Vite (`vite-intlayer`)
|
|
213
221
|
|
|
@@ -220,6 +228,20 @@ Los usuarios de Vite **nunca los configuran directamente**. Se vinculan de forma
|
|
|
220
228
|
| Minificar diccionario | Igual que la fase de escritura JSON del `intlayerMinifyBabelPlugin` |
|
|
221
229
|
| Transformación Babel | Igual que la fase de renombramiento en código de `intlayerMinifyBabelPlugin` + `intlayerOptimizeBabelPlugin` |
|
|
222
230
|
|
|
231
|
+
### Plugin SWC (`@intlayer/swc`)
|
|
232
|
+
|
|
233
|
+
Los usuarios de Next.js **tampoco configuran esto directamente**. Desde la **v9.2.1**, `withIntlayer()` en `next.config.ts` ejecuta el pipeline completo — purga, minificación y reescritura de imports — únicamente a partir de las banderas `build.purge` y `build.minify`.
|
|
234
|
+
|
|
235
|
+
El trabajo se divide en dos, porque un plugin Wasm de SWC transforma un archivo a la vez y sin acceso al sistema de archivos:
|
|
236
|
+
|
|
237
|
+
| Pasada | Dónde se ejecuta | Qué hace |
|
|
238
|
+
| :----------------------------------------------------- | :------------------------------- | :-------------------------------------------------------------------------------------------------------- |
|
|
239
|
+
| Análisis de uso + purga/minificación de JSON | Node, dentro de `withIntlayer()` | Lee cada archivo fuente de componente, reescribe `.intlayer/**/*.json` y produce las tablas de renombrado |
|
|
240
|
+
| Reescritura del código fuente (`content.title` → `.a`) | `@intlayer/swc` (Wasm) | Aplica las tablas de renombrado a los accesos a propiedades correspondientes en tu código |
|
|
241
|
+
| Reescritura de imports (`useIntlayer` → dict) | `@intlayer/swc` (Wasm) | Igual que `intlayerOptimizeBabelPlugin` |
|
|
242
|
+
|
|
243
|
+
Decidir _qué_ campos no se usan y _qué_ alias recibe cada uno requiere estado entre archivos y E/S de archivos, por lo que esa mitad se ejecuta en Node; el plugin SWC solo recibe las tablas resultantes.
|
|
244
|
+
|
|
223
245
|
## Configuración por plataforma
|
|
224
246
|
|
|
225
247
|
<Tabs>
|
|
@@ -227,10 +249,12 @@ Los usuarios de Vite **nunca los configuran directamente**. Se vinculan de forma
|
|
|
227
249
|
|
|
228
250
|
### Next.js
|
|
229
251
|
|
|
230
|
-
Next.js requiere el
|
|
252
|
+
Next.js requiere el plugin `@intlayer/swc`, porque Next.js usa SWC para las compilaciones. Desde la **v9.2.1**, este único paquete cubre todo el pipeline: optimización (reescritura de imports), purga y minificación.
|
|
231
253
|
|
|
232
254
|
> Este complemento no se instala por defecto ya que los complementos SWC son experimentales en Next.js. Podría cambiar en el futuro.
|
|
233
255
|
|
|
256
|
+
> **Next.js 16.1.0 es la versión mínima.** Es la primera versión construida sobre la ABI de plugins Wasm compatible hacia adelante de SWC; las versiones anteriores rechazan el plugin. `withIntlayer` lee tu versión de Next.js y simplemente no registra el plugin por debajo de 16.1.0 — esas compilaciones siguen teniendo éxito, solo se ejecutan sin la optimización del bundle.
|
|
257
|
+
|
|
234
258
|
<Tabs>
|
|
235
259
|
<Tab value="npm">
|
|
236
260
|
|
|
@@ -265,33 +289,40 @@ intlayer-swc-plugin = "*"
|
|
|
265
289
|
|
|
266
290
|
Una vez instalado, Intlayer detectará y utilizará automáticamente el complemento.
|
|
267
291
|
|
|
268
|
-
|
|
292
|
+
Las pasadas de **purga y minificación** (eliminación y renombrado de campos) no requieren ningún paquete adicional ni `babel.config.js`. Envuelve tu configuración con `withIntlayer` y activa las banderas en `intlayer.config.ts`:
|
|
269
293
|
|
|
270
|
-
```
|
|
271
|
-
|
|
294
|
+
```typescript fileName="next.config.ts"
|
|
295
|
+
import { withIntlayer } from "next-intlayer/server";
|
|
296
|
+
import type { NextConfig } from "next";
|
|
297
|
+
|
|
298
|
+
const nextConfig: NextConfig = {/* tu configuración */};
|
|
299
|
+
|
|
300
|
+
export default withIntlayer(nextConfig);
|
|
272
301
|
```
|
|
273
302
|
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
intlayerPurgeBabelPlugin,
|
|
277
|
-
intlayerMinifyBabelPlugin,
|
|
278
|
-
getPurgePluginOptions,
|
|
279
|
-
getMinifyPluginOptions,
|
|
280
|
-
} = require("@intlayer/babel");
|
|
303
|
+
```typescript fileName="intlayer.config.ts"
|
|
304
|
+
import type { IntlayerConfig } from "intlayer";
|
|
281
305
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
//
|
|
286
|
-
|
|
287
|
-
// Minificar: renombrar claves de campos en el JSON y el código fuente
|
|
288
|
-
[intlayerMinifyBabelPlugin, getMinifyPluginOptions()],
|
|
289
|
-
// Nota: intlayerOptimizeBabelPlugin NO es necesario aquí porque
|
|
290
|
-
// @intlayer/swc se encarga de reescribir useIntlayer → useDictionary.
|
|
291
|
-
],
|
|
306
|
+
const config: IntlayerConfig = {
|
|
307
|
+
build: {
|
|
308
|
+
purge: true, // elimina los campos de contenido no usados del JSON empaquetado
|
|
309
|
+
minify: true, // renombra las claves de campos a alias cortos
|
|
310
|
+
},
|
|
292
311
|
};
|
|
312
|
+
|
|
313
|
+
export default config;
|
|
293
314
|
```
|
|
294
315
|
|
|
316
|
+
Durante `next build`, `withIntlayer` analiza tus fuentes, reescribe los diccionarios compilados y pasa las tablas de renombrado resultantes a `@intlayer/swc`, que actualiza los accesos a propiedades correspondientes en tu código.
|
|
317
|
+
|
|
318
|
+
> Usa el `withIntlayer` asíncrono, no `withIntlayerSync`. La variante síncrona no ejecuta el pipeline de análisis, por lo que la purga y la minificación no tienen efecto con ella.
|
|
319
|
+
|
|
320
|
+
> La purga y la minificación solo se ejecutan en `next build` — el pipeline de optimización está desactivado durante `next dev`.
|
|
321
|
+
|
|
322
|
+
> También se desactivan cuando hay llamadores de adaptadores de compatibilidad configurados (`swcExtraCallers`, establecidos por los paquetes de compatibilidad como `@intlayer/next-intl` o `@intlayer/react-i18next`): esos puntos de llamada son invisibles para el analizador de uso, por lo que purgar eliminaría campos que el código todavía lee. La reescritura de imports permanece activa.
|
|
323
|
+
|
|
324
|
+
**Las versiones anteriores (antes de 9.2.1)** requerían `@intlayer/babel` y un `babel.config.js` que declarara `intlayerPurgeBabelPlugin` e `intlayerMinifyBabelPlugin`. Ese archivo ya no es necesario y puede eliminarse.
|
|
325
|
+
|
|
295
326
|
</Tab>
|
|
296
327
|
<Tab value="vite">
|
|
297
328
|
|
|
@@ -447,6 +478,8 @@ export default config;
|
|
|
447
478
|
|
|
448
479
|
> La minificación se omite cuando `optimize` es `false` o cuando `editor.enabled` es `true` (el Editor Visual requiere de los nombres de los campos originales para editarlos).
|
|
449
480
|
|
|
481
|
+
> En Next.js, la minificación también se omite cuando `@intlayer/swc` no está instalado o no puede cargarse (Next.js por debajo de 16.1.0). El plugin es la mitad que reescribe los accesos en el código fuente, así que renombrar los diccionarios sin él dejaría tu código leyendo nombres de campos que ya no existen.
|
|
482
|
+
|
|
450
483
|
> La minificación también se omite con diccionarios de `importMode: 'fetch'`, dado que esos JSON son provistos por una API de terceros bajo sus nombres de campos originales; renombrarlo en el cliente perjudicaría a esa sincronización.
|
|
451
484
|
|
|
452
485
|
### Purga (eliminación de campos no utilizados)
|
|
@@ -475,7 +508,7 @@ export default config;
|
|
|
475
508
|
{ "title": "…", "subtitle": "…" }
|
|
476
509
|
```
|
|
477
510
|
|
|
478
|
-
> La purga se omite cuando `optimize` es `false` o cuando `editor.enabled` es `true`.
|
|
511
|
+
> La purga se omite cuando `optimize` es `false` o cuando `editor.enabled` es `true`. En Next.js se omite además cuando `@intlayer/swc` no está disponible y cuando hay llamadores de adaptadores de compatibilidad configurados.
|
|
479
512
|
|
|
480
513
|
> La purga también se omite por protección cuando un archivo del código fuente sea irreparable y no logre ejecutarse `useIntlayer` al mismo tiempo que una destructuración. Por lo cual todo el diccionario pasaría a formar parte por completo y sin purgar.
|
|
481
514
|
|