@intlayer/docs 9.4.2 → 9.4.4

package/blog/it/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: vue-i18n è obsoleto nel 2026?
+description: vue-i18n è stato lo standard per Vue e Nuxt per oltre un decennio. Tuttavia, nei nostri benchmark si è dimostrato il runtime i18n più pesante del web. Scopri i dettagli.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internazionalizzazione
+  - i18n
+  - Vue
+  - Nuxt
+  - Dimensione bundle
+  - Blog
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# vue-i18n è obsoleto nel 2026?
+
+Nell'ecosistema Vue, poche librerie hanno raggiunto la diffusione di `vue-i18n`. Curata da Kazupon fin dai tempi di Vue 2, costituisce la base di `@nuxtjs/i18n` e la prima scelta per i progetti multilingua in Vue.
+
+Tuttavia, i test comparativi del 2026 hanno evidenziato un dato inatteso: **`vue-i18n` è risultato il runtime di localizzazione più pesante tra tutti i framework frontend analizzati.**
+
+Partendo da una configurazione snella Vite + Vue di soli 31.5 KB, l'aggiunta di `vue-i18n` ha innalzato il JavaScript medio per pagina a **136.4 KB**, quadruplicando il peso iniziale.
+
+Per quale ragione un framework celebre per l'essenzialità si ritrova con uno stack i18n così corposo? E la sua architettura interamente a runtime è ancora attuale?
+
+<TOC/>
+
+## Punti chiave
+
+**Il runtime più voluminoso testato:**
+
+Con **24.3 KB gzipped (83.2 KB minificati)** prima di inserire qualsiasi testo, `vue-i18n` risulta circa **9 volte più pesante** del runtime di `intlayer` (2.7 KB).
+
+**Un aumento del 330% sul payload della pagina:**
+
+`vue-i18n` ha portato una pagina base da 31.5 KB a 136.4 KB. Intlayer genera invece 59.3 KB, un **payload inferiore del 56%**.
+
+**Un compilatore nascosto nel browser:**
+
+Per impostazione predefinita, senza alias dedicati configurati nel bundler, `vue-i18n` invia un intero compilatore al browser per interpretare le stringhe al volo.
+
+**Ritmo di manutenzione:**
+
+Nell'ultimo anno `vue-i18n` ha totalizzato ~259 commit, orientati alla risoluzione di bug e all'allineamento con le release di Vue.
+
+**Assenza di strumenti moderni di primo livello:**
+
+Nessun supporto nativo a Language Server (LSP), server MCP per IA o flussi automatizzati di traduzione via CLI.
+
+## Manutenzione vs. tooling contemporaneo
+
+| Repository            | Stelle                                                                                                                                                 | Commit totali                                                                                                                                                       | Commit / anno                                                                                                                                                      | Ultimo commit                                                                                                                                |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intlify/vue-i18n`    | [![stars](https://img.shields.io/github/stars/intlify/vue-i18n?style=for-the-badge&label=stars)](https://github.com/intlify/vue-i18n/stargazers)       | [![commits](https://img.shields.io/github/commit-activity/t/intlify/vue-i18n?style=for-the-badge&label=commits)](https://github.com/intlify/vue-i18n/commits)       | [![yearly](https://img.shields.io/github/commit-activity/y/intlify/vue-i18n?style=for-the-badge&label=%2Fyear)](https://github.com/intlify/vue-i18n/commits)       | [![last](https://img.shields.io/github/last-commit/intlify/vue-i18n?style=for-the-badge)](https://github.com/intlify/vue-i18n/commits)       |
+| `aymericzip/intlayer` | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits) | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) |
+
+Attività negli ultimi 12 mesi:
+
+- `intlify/vue-i18n`: **259 commit** (manutenzione ordinaria per Vue 3 e Nuxt).
+- `aymericzip/intlayer`: **4.343 commit** (ottimizzazioni di compilazione, integrazioni LSP e supporto ad agenti IA).
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+Una libreria matura assicura affidabilità. Tuttavia le architetture odierne impiegano trasformazioni AST al build, eliminazione di codice morto e automazione con IA. Un'impostazione incentrata unicamente sul runtime fa fatica ad adottare questi paradigmi.
+
+## Misurazione delle performance con Vite + Vue
+
+Test eseguito su un'applicazione di 10 pagine e 10 lingue realizzata con Vite e Vue 3:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Test condotti in browser reali con compressione gzip. Dati completi nella [documentazione del benchmark Vue](https://intlayer.org/it/doc/benchmark/vue).
+
+### Peso iniziale delle librerie
+
+Impatto iniziale prima dell'inclusione di qualsiasi stringa:
+
+| Libreria          | Gzipped    | Minificato |
+| ----------------- | ---------- | ---------- |
+| `vue-i18n@11.4.0` | 24.3 KB    | 83.2 KB    |
+| `intlayer@8.7.12` | **2.7 KB** | **7.6 KB** |
+
+Il runtime di `vue-i18n` da solo pesa **24.3 KB gzipped**, quasi l'intero core di Vue. Intlayer aggiunge appena **2.7 KB**.
+
+### Peso delle pagine e dispersione dei contenuti
+
+| Configurazione | JS medio / pag (gz) | Dispersione lingue | Dispersione altre pag | Componente medio (gz) |
+| -------------- | ------------------- | ------------------ | --------------------- | --------------------- |
+| Base (no i18n) | 31.5 KB             | 0.0%               | 90.0%                 | 0.9 KB                |
+| `vue-i18n`     | **136.4 KB**        | 50.2%              | 90.0%                 | 196.0 KB              |
+| Intlayer       | **59.3 KB**         | 51.1%              | **0.0%**              | **6.5 KB**            |
+
+### Riscontri principali
+
+**Espansione proporzionale significativa:**
+
+Dato che l'infrastruttura di Vue è estremamente leggera (~31 KB), l'impatto di `vue-i18n` quadruplica il carico della pagina.
+
+**Dispersione verso altre route:**
+
+Per impostazione predefinita, il **90% dei testi caricati** su una route appartiene ad altre sezioni. Intlayer azzera questa dispersione al **0.0%**.
+
+**Peso dei componenti isolati:**
+
+I componenti con ambiti di localizzazione hanno raggiunto una media di 196 KB sotto `vue-i18n` a causa della replicazione dei cataloghi, contro i **6.5 KB** ottenuti con Intlayer.
+
+## Perché vue-i18n è pesante?
+
+### Compilatore AST distribuito al browser
+
+`vue-i18n` racchiude un compilatore interno di formati. Plurali e variabili vengono elaborati come alberi sintattici astratti (AST) direttamente a runtime.
+
+Per evitarlo occorre configurare alias specifici nel bundler verso `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js` e precompilare i file con `@intlify/unplugin-vue-i18n`. Molti progetti trascurano questo passaggio.
+
+### Funzionalità monolitiche
+
+`vue-i18n` comprende motori di formattazione per numeri e date, gestione di messaggi concatenati, bridge per l'Options API classica (`$t`, `v-t`) e proxy reattivi. Anche volendo gestire testi essenziali in `<script setup>`, si carica comunque l'intero pacchetto.
+
+### Le chiavi dinamiche ostacolano il tree-shaking
+
+Poiché `"home.hero.title"` è risolta a runtime, gli strumenti di bundling non sanno quali stringhe vengano effettivamente impiegate. I testi inutilizzati rimangono quindi nel bundle.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("home.hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+Il [compilatore Intlayer](https://intlayer.org/it/doc/compiler) identifica le proprietà lette ed estromette i contenuti superflui prima di generare i chunk del client. Maggiori dettagli nell'[ottimizzazione del bundle](https://intlayer.org/it/doc/concept/bundle-optimization).
+
+## Esperienza di sviluppo
+
+### Cataloghi isolati vs. co-locazione
+
+Con `vue-i18n`, i testi sono conservati in una cartella `locales/` separata. Intlayer favorisce la co-locazione dei file di contenuto direttamente accanto ai componenti:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="locales/en.json"
+{
+  "hero": {
+    "title": "Ship in every language"
+  }
+}
+```
+
+```json fileName="locales/it.json"
+{
+  "hero": {
+    "title": "Distribuisci in ogni lingua"
+  }
+}
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="Hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero",
+  content: {
+    title: t({
+      en: "Ship in every language",
+      it: "Distribuisci in ogni lingua",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+Eliminando o modificando `Hero.vue`, i file di contenuto correlati vengono aggiornati o rimossi di conseguenza.
+
+### Autocompletamento vs. completezza garantita
+
+`DefineLocaleMessage` fornisce autocompletamento nell'editor sulla base dello schema principale. Tuttavia non assicura che ogni lingua sia completa. L'omissione di una chiave in `it.json` non arresta il build con TypeScript.
+
+Intlayer convalida rigorosamente i dizionari. Abilitando [`strictMode`](https://intlayer.org/it/doc/concept/configuration), ogni traduzione mancante genera un errore bloccante in fase di compilazione.
+
+### Strumenti per IDE e IA
+
+| Funzionalità                  | `vue-i18n`              | Intlayer                                                                    |
+| ----------------------------- | ----------------------- | --------------------------------------------------------------------------- |
+| **Estensione VS Code**        | Terze parti (i18n Ally) | ✅ [Estensione ufficiale](https://intlayer.org/it/doc/vs-code-extension)    |
+| **Language Server (LSP)**     | ❌ Nessuno              | ✅ [LSP integrato](https://intlayer.org/it/doc/lsp)                         |
+| **Server MCP per IA**         | ❌ Nessuno              | ✅ [Server MCP dedicato](https://intlayer.org/it/doc/mcp-server)            |
+| **Competenze agente (Skill)** | ❌ Nessuna              | ✅ [Skill autonome](https://intlayer.org/it/doc/agent_skills)               |
+| **CMS Visuale in contesto**   | ❌ Nessuno              | ✅ [CMS gratuito & Open Source](https://intlayer.org/it/doc/concept/editor) |
+
+## Flussi di traduzione
+
+`vue-i18n` non include comandi nativi per tradurre. Gli sviluppatori esportano solitamente i file verso piattaforme esterne come Crowdin o Phrase.
+
+Intlayer offre questi strumenti direttamente:
+
+**Completamento automatico tramite IA locale (`intlayer fill`):**
+
+Traduce le chiavi assenti sfruttando le tue chiavi API di OpenAI, Anthropic, Mistral o Gemini.
+
+**CMS visuale auto-ospitabile:**
+
+Impiega il [CMS Intlayer](https://intlayer.org/it/doc/concept/cms) per consentire ai collaboratori non tecnici di intervenire sui testi con salvataggio diretto su Git.
+
+**Licenza open source permissiva:**
+
+L'intero set di strumenti è coperto da licenza Apache 2.0.
+
+## Quando vue-i18n rappresenta ancora una scelta adeguata?
+
+<AccordionGroup>
+<Accordion header="Applicazioni Nuxt 2/3 già avviate">
+
+Qualora il routing dipenda fortemente da `@nuxtjs/i18n`, ripensare l'infrastruttura può non risultare vantaggioso.
+
+</Accordion>
+<Accordion header="Impieghi complessi di ICU">
+
+Se il sistema sfrutta regole articolate di plurali, orari o messaggi concatenati complessi.
+
+</Accordion>
+<Accordion header="Progetti personali leggeri">
+
+Qualora l'impatto sul bundle non costituisca un fattore rilevante per le finalità del progetto.
+
+</Accordion>
+</AccordionGroup>
+
+## Come migliorare la mia configurazione vue-i18n esistente?
+
+Intlayer offre pacchetti di compatibilità drop-in che riproducono con precisione le firme di funzione di `vue-i18n` e `@nuxtjs/i18n` (`useI18n`, `$t`, `<i18n-t>`). Non è necessario riscrivere template o composable per usufruire di un'architettura leggera guidata dal compilatore.
+
+L'installazione si completa con un solo comando:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+Questa CLI interattiva:
+
+1. Installa il pacchetto di compatibilità `@intlayer/vue-i18n` o `@intlayer/nuxt-i18n`.
+2. Configura gli alias di Vite o Nuxt affinché le importazioni e i template esistenti facciano riferimento a Intlayer, consentendo di rimuovere `vue-i18n` da `package.json`.
+3. Attiva istantaneamente le diagnostiche del Language Server (LSP), rimuove il parser AST da 24 KB dal bundle client e sblocca flussi locali di traduzione tramite IA senza complesse riorganizzazioni.
+
+Per istruzioni dettagliate, consulta le nostre guide dedicate:
+
+- **Compatibilità immediata:** Conserva i template esistenti impiegando il [layer di compatibilità `vue-i18n`](https://intlayer.org/it/doc/compatibility/vue-i18n) o [`@nuxtjs/i18n`](https://intlayer.org/it/doc/compatibility/nuxtjs-i18n).
+- **Guide per la migrazione:** Converti i file JSON tradizionali in dizionari strutturati tramite le nostre guide: [da vue-i18n](https://intlayer.org/it/doc/migration/vue-i18n) o [da @nuxtjs/i18n](https://intlayer.org/it/doc/migration/nuxtjs-i18n).
+- **Configurazione ibrida:** Mantieni `vue-i18n` a runtime mentre [utilizzi Intlayer con vue-i18n](https://intlayer.org/it/blog/intlayer-with-vue-i18n) per introdurre tipizzazione rigida e traduzione IA locale.
+
+Analizza il carico di trasferimento del tuo sito con l'[analizzatore SEO i18n gratuito](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Articoli consigliati
+
+- [Benchmark Vue & Vite i18n: analisi approfondita delle prestazioni](https://intlayer.org/it/doc/benchmark/vue)
+- [vue-i18n vs Intlayer: confronto punto per punto](https://intlayer.org/it/blog/vue-i18n-vs-intlayer)
+- [next-intl è obsoleto nel 2026?](https://intlayer.org/it/blog/is-next-intl-outdated)
+- [Internazionalizzazione a compilazione vs dichiarativa](https://intlayer.org/it/blog/compiler-vs-declarative-i18n)

package/blog/it/list_i18n_technologies/build-tools/vite.md

@@ -0,0 +1,179 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: import glob, chunk e messaggi a tempo di compilazione"
+description: Cosa è realmente specifico di Vite in i18n. Cataloghi lazy con import.meta.glob, perché la suddivisione per route fallisce spesso, limiti HMR e plugin di compilazione.
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - vite code splitting
+  - lazy load traduzioni
+  - vite plugin i18n
+  - rollup chunks
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: gli aspetti che riguardano Vite, non il tuo framework
+
+La maggior parte delle guide intitolate "Vite i18n" sono in realtà tutorial su React o Vue che usano incidentalmente Vite. Questo articolo analizza il livello sottostante: come vengono importati i cataloghi, cosa ne fa Rollup e perché il caricamento asincrono (lazy loading) che hai impostato probabilmente non è così asincrono come credi.
+
+## Indice
+
+<TOC/>
+
+## L'import statico è il comportamento predefinito, ed è sincrono
+
+La configurazione più immediata importa ogni catalogo in cima a un modulo:
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+Questo include tre cataloghi direttamente nel chunk di ingresso principale, su ogni pagina, per ogni utente. È tollerabile per due lingue e un centinaio di testi. Con dieci lingue diventa il costo inutile più pesante dell'intero bundle.
+
+## `import.meta.glob` e il flag che quasi tutti configurano male
+
+L'importazione globale tramite pattern (glob import) di Vite è la soluzione naturale:
+
+```ts
+const catalogs = import.meta.glob("./locales/*.json");
+
+export const loadCatalog = async (locale: string) => {
+  const load = catalogs[`./locales/${locale}.json`];
+  return (await load()) as Record<string, string>;
+};
+```
+
+Il caricamento lazy è attivo di default: ogni voce è una funzione che restituisce un import dinamico, e Rollup emette un chunk separato per file. L'aggiunta di `{ eager: true }` inietta invece tutti i file all'interno del modulo importatore, vanificando l'ottimizzazione:
+
+```ts
+// Tutte le lingue nel chunk iniziale. Quasi mai ciò che si vuole:
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+La trappola è che entrambe le versioni funzionano in sviluppo, poiché Vite serve i singoli moduli non empaquetati. La differenza emerge solo nella cartella `dist`. Verifica con `npx vite build && npx vite preview` e ispeziona il contenuto effettivo dell'entry chunk.
+
+## Lo splitting per route raramente divide i file
+
+Questo è il comportamento che sorprende molti sviluppatori. Strutturi i cataloghi per pagina:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+Se due route distinte importano `checkout.json`, Rollup promuove quel file a chunk condiviso caricato su entrambe le pagine. La logica di chunking di Rollup è guidata dal grafo delle dipendenze dei moduli, non dai nomi delle cartelle: qualsiasi modulo accessibile da più punti di ingresso diventa comune. Aggiungere una terza route non cambia nulla, e una quarta potrebbe generare una ripartizione del tutto differente.
+
+La separazione delle lingue per route tiene quindi solo se il grafo delle importazioni è rigorosamente disgiunto. Se la dimensione del bundle è critica, misurala anziché fare supposizioni:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+Per forzare i confini dei chunk, `build.rollupOptions.output.manualChunks` rappresenta la via d'uscita, al costo di una gestione manuale continuativa.
+
+## I cataloghi non supportano l'Hot Reload (HMR)
+
+Modifichi un componente e Vite lo aggiorna all'istante. Modifichi `locales/fr.json` e, a seconda di come è stato importato, non succede nulla. Il JSON importato dinamicamente non ha un confine HMR integrato, quindi il grafo dei moduli non sa come invalidare i componenti che lo consumano.
+
+Molti sviluppatori aggirano il problema riavviando il dev server a ogni modifica dei testi, senza sapere che è evitabile. La soluzione compete al plugin i18n: deve gestire l'evento HMR e propagare i nuovi messaggi all'app in esecuzione. Quando valuti una libreria, verifica se il relativo plugin per Vite implementa questa logica.
+
+## `define` fissa la lingua in modo immutabile
+
+È allettante risolvere la lingua predefinita durante la compilazione:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+`define` esegue una sostituzione puramente testuale in fase di build. Il valore presente al momento della compilazione è quello che viene distribuito, obbligando a un build separato per ogni lingua. Si tratta di una strategia valida, adottata ad esempio dal sistema i18n nativo di Angular, ma non è adatta se una singola distribuzione deve servire tutte le lingue.
+
+I valori che devono variare in base alla richiesta dell'utente vanno gestiti a runtime, non in `define`.
+
+## Spostare il parsing dei messaggi a tempo di compilazione
+
+Ogni opzione matura in questo ecosistema converge verso il medesimo principio: non analizzare più i messaggi nel browser.
+
+| Plugin                       | Cosa sposta a tempo di compilazione                                        |
+| :--------------------------- | :------------------------------------------------------------------------- |
+| `@intlify/unplugin-vue-i18n` | Compila i messaggi vue-i18n in funzioni di render (bundle solo runtime)    |
+| Lingui (macro + plugin)      | Estrae e compila i cataloghi, sostituisce le macro con gli ID messaggio    |
+| Paraglide (inlang)           | Compila ciascun messaggio nella propria funzione tree-shakable             |
+| `vite-intlayer`              | Genera dizionari per componente, elimina e minifica le chiavi inutilizzate |
+
+Il vantaggio è duplice: il compilatore a runtime non finisce nel bundle e le voci non utilizzate possono essere rimosse staticamente. Il costo associato è che sia il dev server sia la CI devono eseguire il plugin, e un'esecuzione isolata di `tsc` o test runner non basati su Vite richiederanno configurazioni dedicate.
+
+vue-i18n ne è l'esempio più lampante: senza `@intlify/unplugin-vue-i18n` distribuisci un compilatore che invoca internamente `new Function`, sprecando byte e sollevando problemi con la Content Security Policy (CSP).
+
+## SSR: non conservare mai la lingua nello stato del modulo
+
+Se utilizzi il rendering lato server (SSR), tramite un framework o con `vite-plugin-ssr`, la regola ferrea è questa: una variabile a livello di modulo che contiene la lingua corrente viene condivisa tra tutte le richieste concorrenti gestite da quel processo server.
+
+```ts
+// Sicuro nel browser. Una fuga di dati tra richieste distinte su un server:
+export let currentLocale = "en";
+```
+
+Due utenti che interrogano il server contemporaneamente generano una race condition, e uno riceverà la lingua dell'altro. In sviluppo locale questo non si manifesta perché sei l'unico visitatore. Risolvi la lingua per ogni singola richiesta e passala esplicitamente tramite il contesto o l'archiviazione di richiesta del tuo framework.
+
+## Il plugin Vite di Intlayer
+
+Intlayer registra un unico plugin che gestisce la compilazione dei dizionari, il monitoraggio in modalità dev e la pipeline di ottimizzazione:
+
+```ts fileName="vite.config.ts"
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+La riscrittura degli import, il purge e la minificazione sono attivi per impostazione predefinita. Le due opzioni chiave si configurano in `intlayer.config.ts`:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // rimuove i campi di contenuto non letti da alcun componente
+    minify: true, // rinomina le chiavi in alias compatti
+  },
+};
+
+export default config;
+```
+
+Dato che i contenuti sono dichiarati per componente anziché in file globali monolitici, la fase di purge opera su un grafo di moduli reale, garantendo un'eliminazione sicura dei testi orfani. Il compromesso è quello menzionato: il plugin è richiesto ovunque il codice venga compilato, inclusi ambienti CI e runner di test. Maggiori dettagli nella guida all'[ottimizzazione del bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/bundle_optimization.md).
+
+## Errori comuni
+
+- **`{ eager: true }` su un glob inteso per il caricamento lazy.** Funziona in locale, spedisce tutte le lingue in produzione.
+- **Affidarsi ai nomi delle cartelle per creare i chunk.** Rollup segue gli import, non le directory. Misura il build.
+- **Riavviare il dev server per visualizzare un testo aggiornato.** È il sintomo di un handler HMR assente, non un comportamento fisiologico.
+- **Inserire la lingua in `define`.** Ti vincola a compilare una build per ogni lingua.
+- **Stato della lingua a livello di modulo con SSR.** Genera perdite di dati tra richieste concorrenti impossibili da riprodurre in locale.
+- **Valutare le performance sul dev server.** I moduli non empaquetati non riflettono la struttura del bundle di produzione.
+
+## Per approfondire
+
+- [Ottimizzazione del bundle: purge, minificazione e payload finale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/bundle_optimization.md)
+- [Report di benchmark tra framework](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/benchmark/index.md)
+- [Riferimento configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md)
+- [Configurare Intlayer con Vite e React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+react.md)
+- [Adattatore di compatibilità i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/compat/i18next.md)
+- [React i18n: come funziona il modello a provider](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: funzionamento e punti deboli](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/list_i18n_technologies/frameworks/vue.md)
+- [i18n per componente vs centralizzata](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/per-component_vs_centralized_i18n.md)

package/blog/it/list_i18n_technologies/frameworks/angular.md

@@ -25,8 +25,6 @@ Nell'attuale mondo interconnesso, offrire il tuo sito web in più lingue può es
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Cos'è l'internazionalizzazione (i18n)?
 
 L'internazionalizzazione, spesso riferita come i18n, è il processo di progettazione e preparazione della tua applicazione per supportare più lingue e contesti culturali. In Angular, comporta la configurazione della tua app in modo che testo, date, numeri e persino layout UI possano adattarsi senza soluzione di continuità a diverse località. Creare correttamente questa base assicura che l'integrazione di future traduzioni rimanga organizzata ed efficiente.

package/blog/it/list_i18n_technologies/frameworks/react-native.md

@@ -25,8 +25,6 @@ In un mercato globale sempre più ampio, offrire la tua app React Native in più
 
 ---
 
-![illustrazione i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Cos'è l'internazionalizzazione (i18n)?
 
 L'internazionalizzazione, o i18n, implica la strutturazione di un'applicazione in modo che possa facilmente adattarsi a diverse lingue, formati regionali e norme culturali. In React Native, l'i18n include la gestione di stringhe per pulsanti e etichette, oltre alla formattazione di date, orari, valute e altro in base alla lingua dell'utente. Le app React Native preparate correttamente ti consentono di integrare senza problemi lingue aggiuntive e comportamenti specifici per la lingua in un secondo momento, senza riprogettazioni massicce.

package/blog/it/list_i18n_technologies/frameworks/react.md

@@ -25,8 +25,6 @@ Nell'attuale panorama digitale, espandere la portata del tuo sito web per soddis
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Che cos'è l'internazionalizzazione (i18n)?
 
 L'internazionalizzazione, abbreviata come i18n, è il processo di progettazione e preparazione del tuo sito web per supportare più lingue e contesti culturali. In React, ciò significa impostare la tua app in modo che le stringhe, i formati di data, i formati di numero e persino il layout possano essere adattati facilmente per utenti provenienti da diverse regioni. Preparare la tua app React per l'i18n getta le basi per integrare in modo pulito traduzioni e altre funzionalità di localizzazione.

package/blog/it/list_i18n_technologies/frameworks/svelte.md

@@ -23,8 +23,6 @@ author: aymericzip
 
 Man mano che il web continua a connettere persone in tutto il mondo, fornire contenuti in più lingue diventa sempre più importante. Per gli sviluppatori che lavorano con **Svelte**, implementare l’i18n è essenziale per gestire efficacemente le traduzioni, mantenere un codice pulito e rispettare buone pratiche SEO. In questo articolo, esploreremo diverse soluzioni i18n e flussi di lavoro per Svelte, aiutandoti a scegliere quello che meglio si adatta alle esigenze del tuo progetto.
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Cos'è l'internazionalizzazione (i18n)?
 
 L'internazionalizzazione, comunemente abbreviata come i18n, è il processo di progettazione e costruzione della tua applicazione in modo che possa facilmente adattarsi a varie lingue, regioni e convenzioni culturali. In Svelte, questo significa tipicamente impostare stringhe di traduzione, localizzare date, ore e numeri, e garantire che l'interfaccia utente possa passare dinamicamente tra diverse lingue senza grandi riscritture di codice.

package/blog/it/list_i18n_technologies/frameworks/vue.md

@@ -25,8 +25,6 @@ In un panorama digitale sempre più globalizzato, estendere la portata del tuo s
 
 ---
 
-![illustrazione i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Cos'è l'Internazionalizzazione (i18n)?
 
 L'internazionalizzazione (i18n) è la pratica di preparare un'applicazione software (o un sito web) per più lingue e convenzioni culturali. All'interno dell'ecosistema Vue.js, questo include stabilire come testo, date, numeri, valute e altri elementi localizzabili possono essere adattati a varie località. Impostando l'i18n fin dall'inizio, garantisci una struttura organizzata e scalabile per aggiungere nuove lingue e gestire le future esigenze di localizzazione.

package/blog/it/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # Cos'è l'internazionalizzazione (i18n)? Definizione e sfide
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Comprensione dell'internazionalizzazione (i18n)
 
 **L'internazionalizzazione**, spesso abbreviata come **i18n**, è il processo di progettazione e preparazione di un'applicazione per supportare più lingue, culture e convenzioni regionali **senza** cambiamenti significativi nel codice sorgente. Il nome i18n deriva dal fatto che ci sono 18 lettere tra la **i** e la **n** nella parola "internazionalizzazione".