@intlayer/docs 8.12.2 → 8.12.4-canary.0

package/docs/it/bundle_optimization.md

@@ -1,12 +1,12 @@
 ---
 createdAt: 2025-11-25
-updatedAt: 2026-04-08
-title: Ottimizzazione della dimensione del bundle i18n e prestazioni
-description: Riduci la dimensione del bundle della tua applicazione ottimizzando i contenuti di internazionalizzazione (i18n). Scopri come sfruttare il tree shaking e il lazy loading per i dizionari con Intlayer.
+updatedAt: 2026-06-07
+title: Ottimizzazione delle dimensioni e delle prestazioni del bundle i18n
+description: Riduci le dimensioni del bundle della tua applicazione ottimizzando i contenuti di internazionalizzazione (i18n). Scopri come sfruttare il tree shaking e il lazy loading per i dizionari con Intlayer.
 keywords:
-  - Ottimizzazione del bundle
-  - Automazione dei contenuti
-  - Contenuto dinamico
+  - Ottimizzazione Bundle
+  - Automazione Contenuti
+  - Contenuto Dinamico
   - Intlayer
   - Next.js
   - JavaScript
@@ -16,33 +16,36 @@ slugs:
   - concept
   - bundle-optimization
 history:
+  - version: 8.12.0
+    date: 2026-06-07
+    changes: "Aggiunto `intlayerPurgeBabelPlugin` e `intlayerMinifyBabelPlugin` per Babel/Webpack; chiarimento della pipeline dei plugin"
   - version: 8.7.0
     date: 2026-04-08
     changes: "Aggiunte le opzioni `minify` e `purge` alla configurazione di build"
 ---
 
-# Ottimizzazione della dimensione del bundle i18n e prestazioni
+# Ottimizzazione delle dimensioni e delle prestazioni del bundle i18n
 
-Una delle sfide più comuni con le soluzioni i18n tradizionali che si affidano a file JSON è la gestione della dimensione dei contenuti. Se gli sviluppatori non separano manualmente i contenuti in namespace, gli utenti finiscono spesso per scaricare le traduzioni per ogni pagina e potenzialmente per ogni lingua solo per visualizzare una singola pagina.
+Una delle sfide più comuni con le tradizionali soluzioni i18n basate su file JSON è la gestione delle dimensioni dei contenuti. Se gli sviluppatori non separano manualmente i contenuti in namespace, gli utenti finiscono spesso per scaricare le traduzioni per ogni pagina e potenzialmente per ogni lingua solo per visualizzare una singola pagina.
 
-Ad esempio, un'applicazione con 10 pagine tradotte in 10 lingue potrebbe comportare il download dei contenuti di 100 pagine da parte di un utente, anche se ne serve solo **una** (quella corrente nella lingua corrente). Ciò comporta uno spreco di larghezza di banda e tempi di caricamento più lenti.
+Ad esempio, un'applicazione con 10 pagine tradotte in 10 lingue potrebbe far sì che un utente scarichi il contenuto di 100 pagine, anche se ne ha bisogno solo di **una** (la pagina attuale nella lingua attuale). Ciò porta a spreco di larghezza di banda e tempi di caricamento più lenti.
 
-**Intlayer risolve questo problema attraverso l'ottimizzazione in fase di build.** Analizza il tuo codice per rilevare quali dizionari sono effettivamente utilizzati per ogni componente e reinserisce solo il contenuto necessario nel tuo bundle.
+**Intlayer risolve questo problema attraverso l'ottimizzazione in fase di compilazione (build).** Analizza il tuo codice per rilevare quali dizionari sono effettivamente utilizzati in ciascun componente e inietta solo il contenuto necessario nel tuo bundle.
 
-## Sommario
+## Indice dei Contenuti
 
 <TOC />
 
-## Scansiona il tuo bundle
+## Analizza il tuo bundle
 
-Analizzare il tuo bundle è il primo passo per identificare file JSON "pesanti" e opportunità di code-splitting. Questi strumenti generano una mappa ad albero visiva del codice compilato della tua applicazione, permettendoti di vedere esattamente quali librerie stanno consumando più spazio.
+Analizzare il tuo bundle è il primo passo per identificare i file JSON "pesanti" e le opportunità di suddivisione del codice (code-splitting). Questi strumenti generano una visualizzazione treemap del codice compilato della tua applicazione, permettendoti di vedere esattamente quali librerie consumano più spazio.
 
 <Tabs>
  <Tab value="vite">
 
 ### Vite / Rollup
 
-Vite utilizza Rollup internamente. Il plugin `rollup-plugin-visualizer` genera un file HTML interattivo che mostra le dimensioni di ogni modulo nel tuo grafico.
+Vite utilizza Rollup sotto il cofano. Il plugin `rollup-plugin-visualizer` genera un file HTML interattivo che mostra le dimensioni di ogni modulo nel tuo grafo.
 
 ```bash
 npm install -D rollup-plugin-visualizer
@@ -69,7 +72,7 @@ export default defineConfig({
 
 ### Next.js (Turbopack)
 
-Per i progetti che utilizzano App Router e Turbopack, Next.js fornisce un analizzatore sperimentale integrato che non richiede dipendenze extra.
+Per i progetti che utilizzano l'App Router e Turbopack, Next.js fornisce un analizzatore sperimentale integrato che non richiede dipendenze extra.
 
 ```bash packageManager='npm'
 npx next experimental-analyze
@@ -92,7 +95,7 @@ bun next experimental-analyze
 
 ### Next.js (Webpack)
 
-Se stai utilizzando il bundler Webpack predefinito in Next.js, usa l'analizzatore di bundle ufficiale. Attivalo impostando una variabile d'ambiente durante la build.
+Se utilizzi il bundler Webpack predefinito in Next.js, usa l'analizzatore di bundle ufficiale. Attivalo impostando una variabile d'ambiente durante la tua build.
 
 ```bash packageManager='npm'
 npm install -D @next/bundle-analyzer
@@ -131,7 +134,7 @@ ANALYZE=true npm run build
 
 ### Webpack Standard
 
-Per Create React App (ejected), Angular o configurazioni Webpack personalizzate, usa lo standard di settore `webpack-bundle-analyzer`.
+Per Create React App (ejected), Angular, o configurazioni Webpack personalizzate, usa lo standard del settore `webpack-bundle-analyzer`.
 
 ```bash packageManager='npm'
 npm install -D webpack-bundle-analyzer
@@ -166,29 +169,66 @@ export default {
  </Tab>
 </Tabs>
 
-## Come funziona
+## Come Funziona
 
-Intlayer utilizza un **approccio per componente**. A differenza dei file JSON globali, i tuoi contenuti sono definiti insieme o all'interno dei tuoi componenti. Durante il processo di build, Intlayer:
+Intlayer utilizza un **approccio per componente**. A differenza dei file JSON globali, il tuo contenuto viene definito accanto o all'interno dei tuoi componenti. Durante il processo di build, Intlayer:
 
-1.  **Analizza** il tuo codice per trovare le chiamate a `useIntlayer`.
-2.  **Costruisce** il contenuto del dizionario corrispondente.
-3.  **Sostituisce** la chiamata a `useIntlayer` con codice ottimizzato in base alla tua configurazione.
+1. **Analizza** il tuo codice per trovare le chiamate a `useIntlayer`.
+2. **Costruisce** il contenuto del dizionario corrispondente.
+3. **Sostituisce** la chiamata a `useIntlayer` con un codice ottimizzato in base alla tua configurazione.
 
-Questo assicura che:
+Ciò garantisce che:
 
 - Se un componente non viene importato, il suo contenuto non viene incluso nel bundle (Dead Code Elimination).
-- Se un componente è caricato in modalità lazy, anche il suo contenuto viene caricato in modalità lazy.
+- Se un componente viene caricato tramite lazy loading, anche il suo contenuto viene caricato in modo lazy.
 
-## Configurazione per piattaforma
+## Riferimento Plugin
+
+L'ottimizzazione in fase di build di Intlayer è suddivisa tra diversi plugin discreti, ciascuno con una singola responsabilità. Capire cosa fa ciascuno evita confusione al momento della configurazione.
+
+### Plugin Babel (`@intlayer/babel`)
+
+Questi sono usati direttamente nel file `babel.config.js` per i setup basati su Webpack (Next.js con Babel, CRA, Webpack personalizzato, ecc.).
+
+| Plugin                        | Cosa fa                                                                                                                                    |
+| :---------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------- |
+| `intlayerExtractBabelPlugin`  | Scansiona i file `.content.ts` e scrive i dizionari compilati in `.intlayer/`                                                              |
+| `intlayerOptimizeBabelPlugin` | Riscrive `useIntlayer('key')` in `useDictionary(hash)` e inietta la dichiarazione di `import` corrispondente al dizionario                 |
+| `intlayerPurgeBabelPlugin`    | Scansiona tutti i file sorgente, rimuove i **campi di contenuto inutilizzati** dai file di dizionario JSON compilati `.intlayer/**/*.json` |
+| `intlayerMinifyBabelPlugin`   | **Rinomina le chiavi dei campi di contenuto** in brevi alias alfabetici (`title` → `a`) sia nei file JSON che nel codice sorgente          |
+
+> **L'ordine dei plugin è importante.** Nel tuo `babel.config.js` i plugin purge e minify devono apparire **prima** del plugin optimize. La fase optimize sostituisce `useIntlayer('key')` con una chiamata opaca a `useDictionary(hash)`, cancellando le informazioni della chiave del dizionario di cui le fasi purge e minify hanno bisogno per identificare quali campi vengono usati.
+
+Ogni plugin Babel ha un relativo helper per le opzioni che legge il tuo `intlayer.config.ts` una volta sola al momento del caricamento della configurazione e restituisce valori pre-risolti:
+
+| Helper opzioni               | Usato con                     |
+| :--------------------------- | :---------------------------- |
+| `getExtractPluginOptions()`  | `intlayerExtractBabelPlugin`  |
+| `getOptimizePluginOptions()` | `intlayerOptimizeBabelPlugin` |
+| `getPurgePluginOptions()`    | `intlayerPurgeBabelPlugin`    |
+| `getMinifyPluginOptions()`   | `intlayerMinifyBabelPlugin`   |
+
+### Plugin Vite (`vite-intlayer`)
+
+Gli utenti di Vite **non configurano mai questi direttamente**. Vengono cablati automaticamente quando chiami `withIntlayer()` in `vite.config.ts`. I flag `build.purge` e `build.minify` in `intlayer.config.ts` attivano o disattivano il comportamento corrispondente senza alcuna registrazione extra di plugin.
+
+| Plugin Vite interno | Comportamento equivalente                                                                                           |
+| :------------------ | :------------------------------------------------------------------------------------------------------------------ |
+| Usage analyzer      | Stesso comportamento della fase di analisi in `intlayerPurgeBabelPlugin`                                            |
+| Dictionary prune    | Stesso comportamento della fase di scrittura JSON in `intlayerPurgeBabelPlugin`                                     |
+| Dictionary minify   | Stesso comportamento della fase di scrittura JSON in `intlayerMinifyBabelPlugin`                                    |
+| Babel transform     | Stesso comportamento di ridenominazione codice sorgente `intlayerMinifyBabelPlugin` + `intlayerOptimizeBabelPlugin` |
+
+## Configurazione per Piattaforma
 
 <Tabs>
  <Tab value="nextjs">
 
 ### Next.js
 
-Next.js richiede il plugin `@intlayer/swc` per gestire la trasformazione, poiché Next.js utilizza SWC per le build.
+Next.js richiede il plugin `@intlayer/swc` per la fase optimize (riscrittura degli import), perché Next.js usa SWC per le build.
 
-> Questo plugin non è installato di default perché i plugin SWC sono ancora sperimentali per Next.js. Potrebbe cambiare in futuro.
+> Questo plugin non è installato di default perché i plugin SWC sono ancora sperimentali in Next.js. Questo aspetto potrebbe cambiare in futuro.
 
 ```bash packageManager="npm"
 npm install -D @intlayer/swc
@@ -208,19 +248,61 @@ bun add -d @intlayer/swc
 
 Una volta installato, Intlayer rileverà e utilizzerà automaticamente il plugin.
 
+Per i passaggi di **purge e minify** (rimozione dei campi e ridenominazione dei campi), installa `@intlayer/babel` insieme e aggiungi i plugin Babel. Dal momento che Next.js usa SWC per le trasformazioni ma valuta ancora `babel.config.js` per la configurazione dei plugin, i plugin Babel agiscono come fase preliminare rispetto ad SWC.
+
+```bash packageManager="npm"
+npm install -D @intlayer/babel
+```
+
+```javascript fileName="babel.config.js"
+const {
+  intlayerPurgeBabelPlugin,
+  intlayerMinifyBabelPlugin,
+  getPurgePluginOptions,
+  getMinifyPluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Purge: rimuove campi di contenuto inutilizzati da .intlayer/**/*.json
+    [intlayerPurgeBabelPlugin, getPurgePluginOptions()],
+    // Minify: rinomina le chiavi dei campi di contenuto nel JSON + codice sorgente
+    [intlayerMinifyBabelPlugin, getMinifyPluginOptions()],
+    // Nota: intlayerOptimizeBabelPlugin NON è necessario qui perché
+    // @intlayer/swc gestisce la riscrittura da useIntlayer a useDictionary.
+  ],
+};
+```
+
  </Tab>
  <Tab value="vite">
 
 ### Vite
 
-Vite utilizza il plugin `@intlayer/babel` che è incluso come dipendenza di `vite-intlayer`. L'ottimizzazione è abilitata di default. Non c'è altro da fare.
+Vite usa il plugin `@intlayer/babel`, che è incluso come dipendenza in `vite-intlayer`. L'intera pipeline di ottimizzazione — riscrittura import, purge e minify — è abilitata di default e non richiede registrazione di plugin extra.
+
+Abilita purge e minify impostando i flag corrispondenti in `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // rimuove i campi inutilizzati nei JSON all'interno del bundle
+    minify: true, // rinomina le chiavi dei campi in alias corti
+  },
+};
+
+export default config;
+```
 
  </Tab>
  <Tab value="webpack">
 
-### Webpack
+### Webpack (e Next.js con Babel)
 
-Per abilitare l'ottimizzazione del bundle con Intlayer su Webpack, è necessario installare e configurare il plugin Babel (`@intlayer/babel`) o SWC (`@intlayer/swc`) appropriato.
+Installa `@intlayer/babel`:
 
 ```bash packageManager="npm"
 npm install -D @intlayer/babel
@@ -238,14 +320,37 @@ pnpm add -D @intlayer/babel
 bun add -d @intlayer/babel
 ```
 
-```typescript fileName="babel.config.js"
+Aggiungi tutti e quattro i plugin a `babel.config.js` nel giusto ordine:
+
+```javascript fileName="babel.config.js"
 const {
-  getOptimizePluginOptions,
+  intlayerExtractBabelPlugin,
+  intlayerPurgeBabelPlugin,
+  intlayerMinifyBabelPlugin,
   intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getPurgePluginOptions,
+  getMinifyPluginOptions,
+  getOptimizePluginOptions,
 } = require("@intlayer/babel");
 
 module.exports = {
-  plugins: [[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()]],
+  plugins: [
+    // Extract: compila file .content.ts → .intlayer/**/*.json
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+
+    // Purge: rimuove i campi inutilizzati da .intlayer/**/*.json
+    //    (legge il flag build.purge da intlayer.config.ts)
+    [intlayerPurgeBabelPlugin, getPurgePluginOptions()],
+
+    // Minify: rinomina chiavi di campo nel JSON + codice sorgente
+    //    (legge il flag build.minify da intlayer.config.ts)
+    [intlayerMinifyBabelPlugin, getMinifyPluginOptions()],
+
+    // Optimize: riscrive useIntlayer('key') → useDictionary(hash)
+    //    Deve essere messo per ultimo perché elimina la chiave del dizionario.
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
 };
 ```
 
@@ -254,57 +359,62 @@ module.exports = {
 
 ## Configurazione
 
-Puoi controllare come Intlayer ottimizza il tuo bundle tramite la proprietà `build` nel tuo `intlayer.config.ts`.
+Puoi controllare come Intlayer ottimizza il tuo bundle tramite la proprietà `build` in `intlayer.config.ts`.
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH],
+    locales: [Locales.ENGLISH, Locales.ITALIAN],
     defaultLocale: Locales.ENGLISH,
   },
   dictionary: {
     importMode: "dynamic",
   },
   build: {
-    /**
-     * Minimizza i dizionari per ridurre la dimensione del bundle.
-     */
-     minify: true;
-
-    /**
-     * Elimina le chiavi inutilizzate nei dizionari
-     */
-     purge: true;
-
-    /**
-     * Indica se la build deve controllare i tipi TypeScript
-     */
-    checkTypes: false;
+    // Sostituisce le chiamate useIntlayer() con import diretti al dizionario a tempo di compilazione.
+    // undefined = automatico (abilitato in produzione), true = sempre, false = mai.
+    optimize: undefined,
+
+    // Rinomina chiavi dei campi di contenuto nei dizionari compilati con alias alfabetici corti
+    // (es. title → a). Riduce la dimensione del JSON; richiede optimize.
+    minify: true,
+
+    // Rimuove campi di contenuto mai accessibili staticamente nel codice sorgente.
+    // Richiede optimize.
+    purge: true,
   },
 };
 
 export default config;
 ```
 
-> Mantenere l'opzione predefinita per `optimize` è raccomandato nella stragrande maggioranza dei casi.
+> Mantenere il valore predefinito (`undefined`) per `optimize` è consigliato nella maggior parte dei casi.
 
-> Vedi la doc di configurazione per maggiori dettagli: [Configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md)
+> Consulta il riferimento per la configurazione per tutte le opzioni: [Configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md)
 
 ### Opzioni di Build
 
-Le seguenti opzioni sono disponibili sotto l'oggetto di configurazione `build`:
+| Proprietà      | Tipo                   | Default     | Descrizione                                                                                                                                                                                                  |
+| :------------- | :--------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`** | `boolean \| undefined` | `undefined` | Abilita il passaggio di riscrittura degli import. `undefined` = attivo solo nelle build di produzione. `false` disabilita anche purge e minify.                                                              |
+| **`minify`**   | `boolean`              | `false`     | Rinomina chiavi dei campi di contenuto nei file JSON compilati usando brevi alias alfabetici. Riscrive anche gli accessi a tali proprietà nel codice sorgente. Non ha alcun effetto se `optimize` è `false`. |
+| **`purge`**    | `boolean`              | `false`     | Rimuove i campi di contenuto a cui non si accede mai in modo statico dal codice sorgente all'interno dei file JSON. Non ha alcun effetto se `optimize` è `false`.                                            |
+
+### Minificazione (ridenominazione chiave dei campi)
 
-| Proprietà      | Tipo      | Predefinito | Descrizione                                                                                                                                                                                                                |
-| :------------- | :-------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`optimize`** | `boolean` | `undefined` | Controlla se l'ottimizzazione della build è abilitata. Se `true`, Intlayer sostituisce le chiamate ai dizionari con iniezioni ottimizzate. Se `false`, l'ottimizzazione è disabilitata. Idealmente a `true` in produzione. |
-| **`minify`**   | `boolean` | `false`     | Se minimizzare i dizionari per ridurre la dimensione del bundle.                                                                                                                                                           |
-| **`purge`**    | `boolean` | `false`     | Se eliminare le chiavi inutilizzate nei dizionari.                                                                                                                                                                         |
+`build.minify` **non** si occupa di minificare il tuo bundle JavaScript — quello viene gestito dal tuo bundler. Rimpicciolisce invece i file JSON del dizionario compilato sostituendo ciascuna chiave definita dall'utente con un breve alias alfabetico:
 
-### Minimizzazione
+```
+// Prima della minificazione
+{ "title": "Ciao", "subtitle": "Mondo" }
+
+// Dopo la minificazione
+{ "a": "Ciao", "b": "Mondo" }
+```
 
-Minimizzare i dizionari rimuove spazi bianchi non necessari, commenti e riduce la dimensione dei contenuti JSON. Ciò è particolarmente utile per dizionari di grandi dimensioni.
+La medesima modifica viene apportata agli accessi di tali proprietà all'interno del codice sorgente, così che `content.title` diventi `content.a` nell'output compilato. Il comportamento in esecuzione rimane identico.
 
 ```typescript fileName="intlayer.config.ts"
 import type { IntlayerConfig } from "intlayer";
@@ -318,11 +428,13 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-> Nota: La minimizzazione viene ignorata se `optimize` è disabilitato o se il Visual Editor è abilitato (poiché l'editor ha bisogno del contenuto completo per consentire le modifiche).
+> La minificazione viene saltata quando `optimize` è `false` o quando `editor.enabled` è `true` (l'editor visuale richiede il nome completo della proprietà per consentire la modifica).
 
-### Purging (Eliminazione)
+> La minificazione viene ignorata anche per i dizionari caricati tramite `importMode: 'fetch'` perché i loro JSON vengono serviti tramite API remote usando le chiavi dei campi originali; rinominarle rovinerebbe il contratto tra client e server.
 
-Il purging assicura che solo le chiavi effettivamente utilizzate nel codice siano incluse nel bundle finale dei dizionari. Ciò può ridurre significativamente la dimensione del bundle se si hanno dizionari grandi con molte chiavi che non vengono utilizzate in ogni parte dell'applicazione.
+### Purging (rimozione dei campi non usati)
+
+`build.purge` analizza a quali campi di contenuto accedi effettivamente nel tuo codice sorgente, provvedendo a rimuovere il resto dai file JSON.
 
 ```typescript fileName="intlayer.config.ts"
 import type { IntlayerConfig } from "intlayer";
@@ -336,34 +448,50 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-> Nota: Il purging viene ignorato se `optimize` è disabilitato.
+**Esempio:** un dizionario di cinque campi dal quale vengono adoperati solamente due:
+
+```
+// Prima di purge
+{ "title": "…", "subtitle": "…", "cta": "…", "footer": "…", "badge": "…" }
+
+// Dopo aver effettuato purge (solamente accessi di title e subtitle presenti)
+{ "title": "…", "subtitle": "…" }
+```
+
+> Il purge viene saltato se `optimize` è `false` o quando `editor.enabled` è `true`.
+
+> Il purge viene saltato per precauzione qualora un file non riesca a essere analizzato, oppure se l'oggetto `useIntlayer` viene riversato in altri valori usando parametri dinamici non analizzabili (come distruggere parti non strutturate, assegnazioni generiche ai props ecc.). In questi scenari viene conservato l'intero dizionario.
 
 ### Modalità di Importazione
 
-Per applicazioni di grandi dimensioni, comprese diverse pagine e lingue, i tuoi file JSON possono rappresentare una parte significativa della dimensione del tuo bundle. Intlayer ti consente di controllare come vengono caricati i dizionari.
+Per grandi applicazioni in grado di coprire parecchie pagine e localizzazioni diverse, il peso imposto dal JSON costituisce una quota vitale per il bundle complessivo. Intlayer consente un controllo specifico di come importare i dizionari grazie a `importMode`.
 
-La modalità di importazione può essere definita di default a livello globale nel file `intlayer.config.ts`.
+### Configurazione Globale
+
+Si può stabilire il valore predefinito agendo in `intlayer.config.ts`.
 
 ```typescript fileName="intlayer.config.ts"
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
-  build: {
-    minify: true,
+  dictionary: {
+    importMode: "dynamic", // Di default preimpostato come 'static'
   },
 };
 
 export default config;
 ```
 
-Così come per ogni dizionario nei tuoi file `.content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}}`.
+### Definizione Per Dizionario
+
+Resta pur sempre valida la sovrascrittura di questo comportamento per ogni singolo file come nel caso descritto dalle estensioni `.content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5|md|mdx|yaml|yml}}`.
 
 ```ts
 import { type Dictionary, t } from "intlayer";
 
 const appContent: Dictionary = {
   key: "app",
-  importMode: "dynamic", // Sovrascrive la modalità di importazione predefinita
+  importMode: "dynamic", // Ridefinisce in che modo caricare i contenuti in locale
   content: {
     // ...
   },
@@ -372,35 +500,34 @@ const appContent: Dictionary = {
 export default appContent;
 ```
 
-| Proprietà        | Tipo                               | Predefinito | Descrizione                                                                                                                  |
-| :--------------- | :--------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------- |
-| **`importMode`** | `'static'`, `'dynamic'`, `'fetch'` | `'static'`  | **Deprecato**: Usa `dictionary.importMode` invece. Determina come vengono caricati i dizionari (vedi i dettagli di seguito). |
+| Proprietà        | Tipo                               | Valore base | Descrizione                                                                                                           |
+| :--------------- | :--------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------- |
+| **`importMode`** | `'static'`, `'dynamic'`, `'fetch'` | `'static'`  | **Deprecato**: Usa `dictionary.importMode` al suo posto. Controlla e stabilisce le dinamiche di importazione di rete. |
 
-L'impostazione `importMode` dettata come il contenuto del dizionario viene iniettato nel tuo componente.
-Puoi definirlo globalmente nel file `intlayer.config.ts` sotto l'oggetto `dictionary`, oppure puoi sovrascriverlo per un dizionario specifico nel suo file `.content.ts`.
+Il valore `importMode` gestisce i flussi in cui iniettare il componente. Lo definisci globalmente in `intlayer.config.ts` o individualmente per `.content.ts`.
 
 ### 1. Modalità Statica (`default`)
 
-In modalità statica, Intlayer sostituisce `useIntlayer` con `useDictionary` e inietta il dizionario direttamente nel bundle JavaScript.
+Utilizzando la modalità statica, Intlayer trasforma e sostituisce le `useIntlayer` in `useDictionary` rendendo effettivo l'inserimento integrato di ciascun dato nell'applicativo di base in JavaScript.
 
-- **Pro:** Rendering istantaneo (sincrono), zero richieste di rete extra durante l'idratazione.
-- **Contro:** Il bundle include le traduzioni per **tutte** le lingue disponibili per quel componente specifico.
-- **Ideale per:** Single Page Applications (SPA).
+- **Vantaggi:** Render immediato, con la completa assenza di caricamenti di rete durante la prima inizializzazione.
+- **Svantaggi:** Tutto l'ammontare linguistico e strutturale relativo alla mole del componente per **ciascuna** lingua.
+- **Caso d'Uso Migliore:** Architetture come SPA o pagine singole dalle scarse necessità restrittive in materia.
 
-**Esempio di codice trasformato:**
+**Codice Esemplificativo Trasformato:**
 
 ```tsx
-// Il tuo codice
+// Il tuo codice d'origine
 const content = useIntlayer("my-key");
 
-// Codice ottimizzato (Statico)
+// Trasformazione Statica (Illustrativa)
 const content = useDictionary({
   key: "my-key",
   content: {
     nodeType: "translation",
     translation: {
       en: "My title",
-      fr: "Mon titolo",
+      it: "Il mio titolo",
     },
   },
 });
@@ -408,47 +535,66 @@ const content = useDictionary({
 
 ### 2. Modalità Dinamica
 
-In modalità dinamica, Intlayer sostituisce `useIntlayer` con `useDictionaryAsync`. Questo utilizza `import()` (meccanismo simile a Suspense) per caricare in modalità lazy specificamente il JSON per la lingua corrente.
+Impiegando lo status di modulo dinamico, subentra l'interazione rimpiazzando `useIntlayer` attraverso un comportamento asservito a `useDictionaryAsync`. È impiegata la parola chiave `import()` a lazy-load.
 
-- **Pro:** **Tree shaking a livello di lingua.** Un utente che visualizza la versione inglese scaricherà _solo_ il dizionario inglese. Il dizionario francese non viene mai caricato.
-- **Contro:** Attiva una richiesta di rete (recupero dell'asset) per componente durante l'idratazione.
-- **Ideale per:** Grandi blocchi di testo, articoli o applicazioni che supportano molte lingue in cui la dimensione del bundle è critica.
+- **Vantaggi:** **Tree-shaking ad alte prestazioni limitate a specifici stati linguistici locali.** Si eviterà uno spreco impattante di megabyte impedendo al file italiano di presentarsi ad utenti che godono di preferenze in lingua inglese.
+- **Svantaggi:** Raggiunge richieste asincrone idonee a innescare il ritardo derivante dal prelievo remoto durante l'hydratation.
+- **Miglior utilizzo:** Testi complessi o corpose quantità di termini multilingua voluminosi da mantenere compattati o da delegare in caso di necessita di download parziale o differito.
 
-**Esempio di codice trasformato:**
+**Codice Trasformato Dinamico:**
 
 ```tsx
-// Il tuo codice
+// Tuo codice
 const content = useIntlayer("my-key");
 
-// Codice ottimizzato (Dinamico)
+// Rappresentazione in Dinamica di quanto in esecuzione
 const content = useDictionaryAsync({
   en: () =>
     import(".intlayer/dynamic_dictionary/my-key/en.json").then(
       (mod) => mod.default
     ),
-  fr: () =>
-    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+  it: () =>
+    import(".intlayer/dynamic_dictionary/my-key/it.json").then(
       (mod) => mod.default
     ),
 });
 ```
 
-> Quando usi `importMode: 'dynamic'`, se hai 100 componenti che usano `useIntlayer` in una singola pagina, il browser tenterà 100 recuperi separati. Per evitare questo "waterfall" di richieste, raggruppa i contenuti in meno file `.content` (ad esempio, un dizionario per sezione della pagina) invece di uno per ogni singolo componente atomico.
+> Applicando l'uso in `importMode: 'dynamic'`, non frammentare a vuoto con costanza ma procedi aggregando un insieme in pochi file `.content` dedicati, cosicché ad impiego congiunto si limitino e si aggreghino prelievi limitrofi ad unica natura. Intlayer fondono se aventi pari identità o parametri limitrofi per le chiavi impiegate con regolarità per medesime identità.
 
 ### 3. Modalità Fetch
 
-Si comporta in modo simile alla modalità dinamica ma tenta prima di recuperare i dizionari dall'API Intlayer Live Sync. Se la chiamata API fallisce o il contenuto non è contrassegnato per gli aggiornamenti live, ricorre all'importazione dinamica.
+Svolge iter analogo ed affine per conformità di intenti, mirando piuttosto all'ottenimento delle medesime procedure avvalendosi delle chiamate API da Intlayer Live Sync. Per far risaltare flussi tempestivi dinamici su ambienti reattivi con riciclo d'informazioni in live updates e di ripiego sulla tipologia dinamic.
+
+**Esempio in Fetch:**
+
+```tsx
+// Il tuo codice
+const content = useIntlayer("my-key");
+
+// Ottimizzato secondo l'uso di base fetch
+const content = useDictionaryAsync({
+  en: () =>
+    fetch("https://intlayer.my-domain.com/dictionary/my-key/en").then((res) =>
+      res.json()
+    ),
+  it: () =>
+    fetch("https://intlayer.my-domain.com/dictionary/my-key/it").then((res) =>
+      res.json()
+    ),
+});
+```
 
-> Vedi la documentazione CMS per maggiori dettagli: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md)
+> Ulteriori verifiche presso il riferimento ai supporti per la documentazione CMS: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md)
 
-> In modalità fetch, purghe e minimizzazioni non possono essere utilizzate.
+> Nella struttura fetch le ottimizzazioni relative a minify o purge passano sempre inosservate al fine di favorire la corrispondenza lato server in nome delle relative comunicazioni.
 
-## Riepilogo: Statico vs Dinamico
+## Sommario: Statica vs Dinamica
 
-| Caratteristica           | Modalità Statica                                     | Modalità Dinamica                      |
-| :----------------------- | :--------------------------------------------------- | :------------------------------------- |
-| **Dimensione Bundle JS** | Maggiore (include tutte le lingue per il componente) | Minore (solo codice, nessun contenuto) |
-| **Caricamento Iniziale** | Istantaneo (Il contenuto è nel bundle)               | Leggero ritardo (Recupera JSON)        |
-| **Richieste di Rete**    | 0 richieste extra                                    | 1 richiesta per dizionario             |
-| **Tree Shaking**         | Livello componente                                   | Livello componente + Livello lingua    |
-| **Miglior Caso d'Uso**   | Componenti UI, Piccole Applicazioni                  | Pagine con molto testo, molte lingue   |
+| Parametro                   | Modalità Statica                             | Modalità Dinamica                                |
+| :-------------------------- | :------------------------------------------- | :----------------------------------------------- |
+| **Peso Bundle JS**          | Cospicuo (racchiude l'ammontare totale comp) | Minimizzato a favore delle sole logiche del base |
+| **Inizializzazione Veloce** | Sostanzialmente subitanea                    | Intervallato (Necessita download preventivo)     |
+| **Chiamate Rete**           | 0 di contorno prelevanti                     | 1 in base all'identità prescritta o richiesta    |
+| **Uso Tree-Shaking**        | Esteso alla natura dei componenti            | Ad uso interamente localizzato a scopo           |
+| **Campi Preferenziali**     | Dettagli di UI, Modelli basici               | Masse contenutistiche, Voluminose presenze testi |

package/docs/it/configuration.md

@@ -682,16 +682,16 @@ routing: {
 
 Quando si utilizza lo storage in un cookie, è possibile impostare attributi aggiuntivi:
 
-| Campo      | Descrizione                                                                                | Tipo                                                  |
-| ---------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------------- |
-| `name`     | Nome del cookie. Predefinito: `'INTLAYER_LOCALE'`                                          | `string`                                              |
-| `domain`   | Dominio del cookie. Predefinito: `undefined`                                               | `string`                                              |
-| `path`     | Percorso del cookie. Predefinito: `undefined`                                              | `string`                                              |
-| `secure`   | Richiede HTTPS. Predefinito: `undefined`                                                   | `boolean`                                             |
-| `httpOnly` | Flag HTTP-only. Predefinito: `undefined`                                                   | `boolean`                                             |
-| `sameSite` | Politica SameSite.                                                                         | `'strict'` &#124; <br/> `'lax'` &#124; <br/> `'none'` |
-| `expires`  | Data di scadenza o numero di giorni. Predefinito: `undefined`                              | `Date` &#124; <br/> `number`                          |
-| `maxAge`   | Durata in secondi dalla creazione. Ha la precedenza su `expires`. Predefinito: `undefined` | `number`                                              |
+| Campo      | Descrizione                                                                                                                                | Tipo                                                  |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- |
+| `name`     | Nome del cookie. Predefinito: `'INTLAYER_LOCALE'`                                                                                          | `string`                                              |
+| `domain`   | Dominio del cookie. Predefinito: `undefined`                                                                                               | `string`                                              |
+| `path`     | Percorso del cookie. Predefinito: `undefined`                                                                                              | `string`                                              |
+| `secure`   | Richiede HTTPS. Predefinito: `undefined`                                                                                                   | `boolean`                                             |
+| `httpOnly` | Flag HTTP-only. Predefinito: `undefined`                                                                                                   | `boolean`                                             |
+| `sameSite` | Politica SameSite.                                                                                                                         | `'strict'` &#124; <br/> `'lax'` &#124; <br/> `'none'` |
+| `expires`  | Un numero rappresenta i giorni dalla creazione; una data (o stringa di data ISO) è una data di scadenza assoluta. Predefinito: `undefined` | `Date` &#124; <br/> `number` &#124; <br/> `string`    |
+| `maxAge`   | Durata in secondi dalla creazione. Ha la precedenza su `expires`. Predefinito: `undefined`                                                 | `number`                                              |
 
 #### Attributi dello Storage (Storage Attributes)