@intlayer/docs 9.4.2 → 9.4.3

package/blog/es/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: ¿Está vue-i18n obsoleto en 2026?
+description: vue-i18n ha sido el estándar para aplicaciones Vue y Nuxt durante una década. Sin embargo, en nuestros benchmarks resultó ser el runtime de i18n más pesado de la web. Descubre por qué.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internacionalización
+  - i18n
+  - Vue
+  - Nuxt
+  - Tamaño de bundle
+  - Blog
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# ¿Está vue-i18n obsoleto en 2026?
+
+En el entorno de Vue, pocas soluciones disfrutan de tanta presencia como `vue-i18n`. Conducido por Kazupon desde la época de Vue 2, sustenta `@nuxtjs/i18n` y representa la opción predeterminada para casi cualquier desarrollo multilingüe en Vue.
+
+Aun así, nuestros benchmarks de 2026 revelaron un hallazgo llamativo: **`vue-i18n` resultó ser el runtime de localización más pesado entre todos los frameworks frontend evaluados.**
+
+Partiendo de una base limpia de Vite + Vue de 31.5 KB, incorporar `vue-i18n` incrementó el JavaScript medio por página hasta los **136.4 KB**, más que cuadruplicando la carga inicial.
+
+¿Cómo es posible que un framework conocido por su ligereza acabe requiriendo un paquete de internacionalización tan abultado? ¿Y sigue teniendo sentido su modelo centrado en tiempo de ejecución?
+
+<TOC/>
+
+## Puntos clave
+
+**El runtime más voluminoso evaluado:**
+
+Con **24.3 KB gzipped (83.2 KB minificados)** antes de incluir un solo texto traducido, `vue-i18n` es unas **9 veces más pesado** que el runtime de `intlayer` (2.7 KB).
+
+**Un sobrecoste del 330% en la carga útil:**
+
+`vue-i18n` disparó una página Vue de 31.5 KB hasta 136.4 KB. Intlayer la mantuvo en 59.3 KB, lo que supone una **carga útil un 56% más reducida**.
+
+**Un compilador oculto en el navegador:**
+
+De forma predeterminada, a menos que se ajusten alias concretos en el empaquetador, `vue-i18n` envía un compilador de mensajes íntegro al navegador para procesar textos al vuelo.
+
+**Frecuencia de mantenimiento:**
+
+A lo largo del último año, `vue-i18n` acumuló ~259 commits, orientados a resolver incidencias y preservar la compatibilidad con Vue.
+
+**Carencia de herramientas modernas integradas:**
+
+No dispone de soporte oficial para servidores de lenguaje (LSP), servidores MCP de IA ni comandos de traducción automática en CLI.
+
+## Mantenimiento frente a herramientas actuales
+
+| Repositorio           | Estrellas                                                                                                                                              | Commits totales                                                                                                                                                     | Commits / año                                                                                                                                                      | Último 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) |
+
+Historial del último año:
+
+- `intlify/vue-i18n`: **259 commits** (mantenimiento regular para Vue 3 y Nuxt).
+- `aymericzip/intlayer`: **4.343 commits** (mejoras continuas en optimizaciones de compilación, LSP y herramientas de 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 librería madura puede ser estable. No obstante, las aplicaciones contemporáneas aprovechan el procesado AST durante el build, la eliminación de código en desuso y la traducción con IA. Un esquema vinculado exclusivamente al runtime no asimila fácilmente estas posibilidades.
+
+## Rendimiento práctico en Vite + Vue
+
+Evaluamos una aplicación de 10 páginas y 10 idiomas desarrollada con Vite y 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;"
+/>
+
+> Pruebas realizadas en entornos de navegador reales con compresión gzip. Información completa en la [documentación del benchmark Vue](https://intlayer.org/es/doc/benchmark/vue).
+
+### Sobrecarga base de cada librería
+
+Impacto inicial antes de cargar cualquier texto traducido:
+
+| Librería          | Gzipped    | Minificado |
+| ----------------- | ---------- | ---------- |
+| `vue-i18n@11.4.0` | 24.3 KB    | 83.2 KB    |
+| `intlayer@8.7.12` | **2.7 KB** | **7.6 KB** |
+
+Solo el runtime de `vue-i18n` ocupa **24.3 KB gzipped**, prácticamente lo mismo que el núcleo de Vue. Intlayer añade únicamente **2.7 KB**.
+
+### Peso por página y fuga de contenido
+
+| Configuración   | JS medio / pág (gz) | Fuga idiomas | Fuga otras págs | Componente medio (gz) |
+| --------------- | ------------------- | ------------ | --------------- | --------------------- |
+| Base (sin 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**            |
+
+### Conclusiones destacadas
+
+**Sobrecarga proporcional notable:**
+
+Dado que la base de Vue es extremadamente reducida (~31 KB), la inclusión de `vue-i18n` cuadruplica la carga total de la aplicación.
+
+**Fuga hacia otras rutas:**
+
+Por defecto, el **90% del contenido traducido** enviado a una página pertenece a otras secciones. Intlayer suprime esta fuga por completo, bajándola al **0.0%**.
+
+**Peso de componentes aislados:**
+
+Los componentes compilados con ámbitos de localización registraron una media de 196 KB en `vue-i18n` debido a la duplicación de catálogos, en comparación con los **6.5 KB** de Intlayer.
+
+## ¿Por qué vue-i18n es pesado?
+
+### Un compilador AST incluido en el navegador
+
+`vue-i18n` lleva un compilador de formato de mensajes propio. Las reglas de plurales y las interpolaciones se interpretan como árboles de sintaxis abstracta (AST) en el navegador en tiempo de ejecución.
+
+Para evitarlo, es necesario crear alias específicos en el empaquetador hacia `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js` y precompilar los catálogos con `@intlify/unplugin-vue-i18n`. Muchos proyectos pasan esto por alto y entregan un compilador completo a sus visitantes.
+
+### Conjunto de utilidades monolítico
+
+`vue-i18n` agrupa formateadores numéricos y temporales, resolutores de mensajes encadenados, puentes para la Options API clásica (`$t`, `v-t`) y proxys reactivos. Aunque solo precises textos sencillos en `<script setup>`, estás forzado a cargar el paquete entero.
+
+### Las claves dinámicas bloquean el tree-shaking
+
+Al ser `"home.hero.title"` una clave resuelta dinámicamente, las herramientas de build no pueden determinar qué textos se emplean. Por ello, las cadenas en desuso permanecen en el 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>
+
+El [compilador de Intlayer](https://intlayer.org/es/doc/compiler) rastrea con exactitud las propiedades invocadas y suprime el contenido sin uso antes de ensamblar los paquetes del cliente. Consulta [optimización de bundle](https://intlayer.org/es/doc/concept/bundle-optimization) para profundizar.
+
+## Experiencia de desarrollo
+
+### Catálogos dispersos frente a co-ubicación
+
+En `vue-i18n`, las traducciones se gestionan en una carpeta `locales/` aislada. Intlayer organiza los ficheros de contenido directamente junto a los componentes:
+
+<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/es.json"
+{
+  "hero": {
+    "title": "Lanza en todos los idiomas"
+  }
+}
+```
+
+```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",
+      es: "Lanza en todos los idiomas",
+    }),
+  },
+} 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>
+
+Al retirar o reorganizar `Hero.vue`, su fichero de contenido se traslada o descarta a la vez.
+
+### Autocompletado frente a exhaustividad rigurosa
+
+`DefineLocaleMessage` ofrece autocompletado en el IDE tomando como base el esquema de referencia. Sin embargo, no comprueba la cobertura total. Si se omite una clave en `es.json`, TypeScript no generará ninguna alerta durante la compilación.
+
+Intlayer evalúa los diccionarios con rigidez. Activar [`strictMode`](https://intlayer.org/es/doc/concept/configuration) detiene el build si falta cualquier texto en cualquier idioma.
+
+### Herramientas para IDEs y agentes IA
+
+| Característica             | `vue-i18n`           | Intlayer                                                                    |
+| -------------------------- | -------------------- | --------------------------------------------------------------------------- |
+| **Extensión VS Code**      | Terceros (i18n Ally) | ✅ [Extensión oficial](https://intlayer.org/es/doc/vs-code-extension)       |
+| **Language Server (LSP)**  | ❌ Ninguno           | ✅ [LSP dedicado](https://intlayer.org/es/doc/lsp)                          |
+| **Servidor MCP para IA**   | ❌ Ninguno           | ✅ [Servidor MCP integrado](https://intlayer.org/es/doc/mcp-server)         |
+| **Habilidades de Agente**  | ❌ Ninguna           | ✅ [Skills listas](https://intlayer.org/es/doc/agent_skills)                |
+| **CMS Visual en contexto** | ❌ Ninguno           | ✅ [CMS gratuito y Open Source](https://intlayer.org/es/doc/concept/editor) |
+
+## Vías de traducción
+
+`vue-i18n` no cuenta con comandos de traducción propios. Los equipos suelen exportar archivos a herramientas como Crowdin o Phrase.
+
+Intlayer brinda estos flujos de forma integrada:
+
+**Auto-completado por IA local (`intlayer fill`):**
+
+Rellena las claves pendientes mediante tus claves API de OpenAI, Anthropic, Mistral o Gemini.
+
+**CMS visual autoalojable:**
+
+Habilita el [CMS Intlayer](https://intlayer.org/es/doc/concept/cms) para que editores no técnicos adapten textos con confirmación directa en Git.
+
+**Licencia de código abierto:**
+
+Todo el instrumental se proporciona bajo licencia Apache 2.0.
+
+## ¿Cuándo sigue teniendo sentido vue-i18n?
+
+<AccordionGroup>
+<Accordion header="Bases de código consolidadas en Nuxt 2 o 3">
+
+Si tu enrutamiento depende estrechamente de `@nuxtjs/i18n`, un rediseño puede no ser prioritario.
+
+</Accordion>
+<Accordion header="Usos complejos de ICU">
+
+Si empleas ampliamente mensajes encadenados o reglas plurales y temporales intrincadas.
+
+</Accordion>
+<Accordion header="Proyectos personales pequeños">
+
+Si las dimensiones finales del bundle no suponen un factor crítico.
+
+</Accordion>
+</AccordionGroup>
+
+## ¿Cómo mejorar mi configuración de vue-i18n existente?
+
+Intlayer ofrece paquetes de compatibilidad directa que replican las firmas de funciones de `vue-i18n` y `@nuxtjs/i18n` (`useI18n`, `$t`, `<i18n-t>`). No necesitas reescribir tus plantillas ni tus composables para beneficiarte de una arquitectura optimizada por compilador.
+
+La instalación se realiza con un único 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
+```
+
+Esta CLI interactiva:
+
+1. Instala el paquete de compatibilidad `@intlayer/vue-i18n` o `@intlayer/nuxt-i18n`.
+2. Configura los alias en Vite o Nuxt para que tus importaciones y etiquetas habituales apunten directamente a Intlayer, permitiendo desinstalar `vue-i18n` de `package.json`.
+3. Activa al instante el soporte del Language Server (LSP), elimina el analizador AST de 24 KB del bundle de cliente y desbloquea flujos locales de traducción por IA sin necesidad de una refactorización profunda.
+
+Para consultar los detalles paso a paso, explora nuestras guías:
+
+- **Capa de compatibilidad:** Conserva tus plantillas con la [capa de compatibilidad de `vue-i18n`](https://intlayer.org/es/doc/compatibility/vue-i18n) o [`@nuxtjs/i18n`](https://intlayer.org/es/doc/compatibility/nuxtjs-i18n).
+- **Guías de migración paso a paso:** Transforma archivos JSON tradicionales en diccionarios estructurados: [desde vue-i18n](https://intlayer.org/es/doc/migration/vue-i18n) o [desde @nuxtjs/i18n](https://intlayer.org/es/doc/migration/nuxtjs-i18n).
+- **Estrategia híbrida:** Conserva `vue-i18n` para la renderización mientras [usas Intlayer con vue-i18n](https://intlayer.org/es/blog/intlayer-with-vue-i18n) para ganar tipado seguro y autotraducción local por IA.
+
+Evalúa el volumen y las fugas de tu aplicación con el [escáner SEO i18n gratuito](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Lecturas recomendadas
+
+- [Benchmark Vue & Vite i18n: análisis detallado de prestaciones](https://intlayer.org/es/doc/benchmark/vue)
+- [vue-i18n frente a Intlayer: comparativa técnica completa](https://intlayer.org/es/blog/vue-i18n-vs-intlayer)
+- [¿Está next-intl obsoleto en 2026?](https://intlayer.org/es/blog/is-next-intl-outdated)
+- [Internacionalización basada en compilación frente a declarativa](https://intlayer.org/es/blog/compiler-vs-declarative-i18n)

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

@@ -0,0 +1,179 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: imports glob, chunks y mensajes en tiempo de compilación"
+description: Lo que realmente es específico de Vite en i18n. Catálogos lazy con import.meta.glob, por qué la división por ruta rara vez divide, carencias de HMR y plugins al compilar.
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - vite code splitting
+  - lazy load traducciones
+  - vite plugin i18n
+  - rollup chunks
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: los aspectos propios de Vite, no de tu framework
+
+La mayoría de los tutoriales de "Vite i18n" son en realidad tutoriales de React o Vue que casualmente usan Vite. Este artículo aborda la capa inferior: cómo se importan los catálogos, qué hace Rollup con ellos y por qué la carga diferida (lazy loading) que escribiste probablemente no sea tan diferida como crees.
+
+## Tabla de contenidos
+
+<TOC/>
+
+## La importación estática es la opción predeterminada, y es síncrona
+
+La configuración más elemental importa cada catálogo en la parte superior de un módulo.
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+Eso introduce tres catálogos en el chunk de entrada principal, en cada página, para cada visitante. Es admisible para dos idiomas y un centenar de cadenas. Con diez idiomas se convierte en el mayor costo innecesario de todo el bundle.
+
+## `import.meta.glob` y el parámetro que casi todos configuran mal
+
+La importación por patrones (glob import) de Vite es la solución estándar.
+
+```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>;
+};
+```
+
+La carga diferida viene activada por defecto: cada entrada es una función que retorna una importación dinámica, y Rollup emite un chunk por archivo. Añadir `{ eager: true }` incrusta todos los catálogos directamente en el módulo que importa, exactamente lo contrario de lo que buscabas evitar.
+
+```ts
+// Todos los idiomas en el chunk de entrada. Casi nunca es lo deseado.
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+La trampa radica en que ambas variantes funcionan en desarrollo, ya que Vite sirve módulos individuales sin empaquetar. La diferencia solo se hace visible en la carpeta `dist`. Compruébalo con `npx vite build && npx vite preview` y analiza qué contiene realmente el chunk de entrada.
+
+## La división por ruta rara vez divide los catálogos
+
+Este es el comportamiento que suele sorprender a los desarrolladores. Divides los catálogos por vista:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+Luego dos rutas distintas importan `checkout.json`, y Rollup eleva ese archivo a un chunk compartido que se descarga en ambas páginas. La partición de Rollup se guía por el grafo de módulos y no por el nombre de tus carpetas: cualquier módulo alcanzable desde más de un punto de entrada pasa a ser común. Agregar una tercera ruta no cambia nada, y una cuarta puede provocar una reorganización imprevista.
+
+Por lo tanto, la división de idiomas por ruta solo se sostiene si el grafo de importaciones es estrictamente disjunto. Si el tamaño de tu bundle importa, verifícalo con datos y no con suposiciones:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+Si necesitas forzar los límites de empaquetado, `build.rollupOptions.output.manualChunks` es el mecanismo de escape, con el costo de requerir mantenimiento manual.
+
+## Los catálogos no recargan en caliente (HMR)
+
+Modificas un componente y Vite lo actualiza al instante. Modificas `locales/fr.json` y, según cómo haya sido importado, no ocurre nada. El JSON importado dinámicamente carece de un límite HMR nativo, por lo que el grafo de dependencias no sabe cómo invalidar los módulos consumidores.
+
+Muchos equipos sortean esto reiniciando el servidor de desarrollo ante cada cambio de texto, sin percatarse de que es evitable. La solución corresponde al plugin de i18n: debe aceptar la actualización de HMR e inyectar los nuevos mensajes en la aplicación en ejecución. Al evaluar una librería, verifica si su plugin de Vite implementa esto, pues representa una fricción diaria de desarrollo.
+
+## `define` incrusta el idioma de forma irreversible
+
+Es tentador resolver el idioma por defecto durante la compilación:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+`define` ejecuta un reemplazo textual puro al compilar. El valor presente en el build es el que se distribuye, obligándote a realizar un build por cada idioma. Esa es una estrategia válida, adoptada por ejemplo por el sistema i18n nativo de Angular, pero no es lo adecuado si una única implementación debe atender todos los idiomas.
+
+Para variables que deban variar por petición del usuario, evita `define` y resuélvelas en tiempo de ejecución.
+
+## Mover el análisis de mensajes a tiempo de compilación
+
+Cualquier opción madura en este ecosistema termina adoptando la misma estrategia: dejar de procesar mensajes en el navegador.
+
+| Plugin                       | Lo que traslada a tiempo de compilación                                     |
+| :--------------------------- | :-------------------------------------------------------------------------- |
+| `@intlify/unplugin-vue-i18n` | Compila mensajes de vue-i18n a funciones de render (bundle de solo runtime) |
+| Lingui (macro + plugin)      | Extrae y compila catálogos, sustituye macros por IDs de mensajes            |
+| Paraglide (inlang)           | Compila cada mensaje en su propia función tree-shakable                     |
+| `vite-intlayer`              | Construye diccionarios por componente, purga y minifica claves inactivas    |
+
+La ventaja compartida es doble: el compilador de mensajes en runtime desaparece del bundle final y las entradas no utilizadas pueden eliminarse de forma estática. El costo asociado es que tanto tu servidor de desarrollo como tu CI requieren el plugin, y un comando `tsc` aislado o un ejecutor de pruebas ajeno a Vite requerirá configuración adicional.
+
+vue-i18n es el caso más claro. Sin `@intlify/unplugin-vue-i18n` distribuyes un compilador que invoca `new Function`, lo que suma bytes superfluos y genera conflictos con la directiva Content Security Policy (CSP).
+
+## SSR: nunca almacenes el idioma en variables de módulo
+
+Si implementas SSR, sea mediante un framework o con `vite-plugin-ssr`, la regla inquebrantable es esta: una variable a nivel de módulo que guarde el idioma actual se comparte entre todas las solicitudes concurrentes que atienda ese proceso del servidor.
+
+```ts
+// Inofensivo en el navegador. Una fuga de datos entre peticiones en un servidor.
+export let currentLocale = "en";
+```
+
+Dos usuarios que consulten el servidor al mismo tiempo competirán en una condición de carrera, y uno recibirá la respuesta en el idioma del otro. Esto no se reproduce en desarrollo porque eres el único visitante. Resuelve el idioma por cada petición y transmítelo explícitamente mediante contexto o mediante el almacenamiento de petición de tu framework.
+
+## El plugin de Vite de Intlayer
+
+Intlayer registra un único plugin que gestiona la compilación de diccionarios, la observación de cambios en desarrollo y la canalización de optimización.
+
+```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 reescritura de importaciones, purga y minificación vienen activadas por defecto. Los dos parámetros clave se configuran en `intlayer.config.ts`:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // descarta campos de contenido que ningún componente lea
+    minify: true, // renombra las claves de contenido a identificadores breves
+  },
+};
+
+export default config;
+```
+
+Dado que el contenido se declara por componente y no en gigantescos archivos por idioma, el proceso de purga dispone de un grafo de dependencias real sobre el que operar, haciendo segura la poda de código. El compromiso es el mencionado: el plugin es obligatorio en cualquier entorno donde se compile el código, incluidos CI y runners de tests. Más detalles en [optimización de bundles](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/bundle_optimization.md).
+
+## Errores habituales
+
+- **`{ eager: true }` en un glob pensado para carga diferida.** Funciona en desarrollo, incluye todos los idiomas en producción.
+- **Creer que la estructura de directorios genera chunks independientes.** Rollup sigue imports, no carpetas. Mide el build.
+- **Reiniciar el servidor de desarrollo para ver cambios de texto.** Es indicio de un handler de HMR ausente, no algo normal.
+- **Incrustar el idioma en `define`.** Te obliga a compilar un bundle distinto por cada idioma.
+- **Guardar el estado de idioma a nivel de módulo en SSR.** Fuga entre peticiones indetectable en desarrollo local.
+- **Evaluar rendimiento sobre el servidor de desarrollo.** Los módulos sin empaquetar no guardan relación con el bundle empaquetado.
+
+## Para profundizar
+
+- [Optimización del bundle: purga, minificación y lo que llega al navegador](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/bundle_optimization.md)
+- [Informes de benchmark entre frameworks](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/index.md)
+- [Referencia de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md)
+- [Configurar Intlayer con Vite y React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md)
+- [Adaptador de compatibilidad i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compat/i18next.md)
+- [React i18n: cómo funciona el modelo de providers](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: cómo funciona y dónde tropieza](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/list_i18n_technologies/frameworks/vue.md)
+- [i18n por componente vs centralizada](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/per-component_vs_centralized_i18n.md)

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

@@ -23,8 +23,6 @@ author: aymericzip
 
 En el mundo interconectado de hoy, ofrecer tu sitio web en múltiples idiomas puede expandir significativamente tu alcance y mejorar la experiencia del usuario. Para los desarrolladores que trabajan con Angular, implementar la internacionalización (i18n) es crucial para gestionar eficientemente las traducciones mientras se preserva la estructura de la aplicación, el SEO y el rendimiento. En este artículo, exploraremos varios enfoques de i18n, desde las soluciones integradas de Angular hasta las populares bibliotecas de terceros, para ayudarte a determinar la mejor opción para tu proyecto.
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ¿Qué es la Internacionalización (i18n)?
 
 La internacionalización, a menudo conocida como i18n, es el proceso de diseñar y preparar tu aplicación para soportar múltiples idiomas y contextos culturales. En Angular, implica configurar tu aplicación de manera que el texto, fechas, números e incluso los diseños de la interfaz de usuario puedan adaptarse sin problemas a diferentes locales. Realizar esta preparación adecuadamente asegura que la integración de futuras traducciones se mantenga organizada y eficiente.

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

@@ -25,8 +25,6 @@ En un mercado global cada vez más competitivo, ofrecer tu aplicación de React
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ¿Qué es la Internacionalización (i18n)?
 
 La internacionalización, o i18n, implica estructurar una aplicación para que pueda adaptarse fácilmente a diferentes idiomas, formatos regionales y normas culturales. En React Native, i18n incluye el manejo de cadenas para botones y etiquetas, así como el formato de fechas, horas, monedas y más de acuerdo con la configuración regional del usuario. Las aplicaciones de React Native bien preparadas te permiten integrar sin problemas idiomas adicionales y comportamientos específicos de la localidad más adelante, sin grandes refactorizaciones.

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

@@ -25,8 +25,6 @@ En el panorama digital actual, es esencial expandir el alcance de su sitio web p
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ¿Qué es la Internacionalización (i18n)?
 
 La internacionalización, abreviada como i18n, es el proceso de diseñar y preparar su sitio web para soportar múltiples idiomas y contextos culturales. En React, esto significa configurar su aplicación para que las cadenas, formatos de fecha, formatos de número e incluso el diseño puedan adaptarse fácilmente para usuarios de diferentes regiones. Preparar su aplicación de React para la i18n establece las bases para integrar limpamente traducciones y otras características de localización.

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

@@ -25,8 +25,6 @@ A medida que la web sigue conectando a las personas de todo el mundo, proporcion
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ¿Qué es la Internacionalización (i18n)?
 
 La internacionalización, comúnmente abreviada como i18n, es el proceso de diseñar y construir tu aplicación para que pueda adaptarse fácilmente a varios idiomas, regiones y convenciones culturales. En Svelte, esto generalmente significa configurar cadenas de traducción, localizar fechas, horas y números, y asegurar que la interfaz de usuario pueda cambiar dinámicamente entre diferentes locales sin grandes reescrituras de código.

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

@@ -25,8 +25,6 @@ En un paisaje digital cada vez más globalizado, extender el alcance de tu sitio
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ¿Qué es la Internacionalización (i18n)?
 
 La internacionalización (i18n) es la práctica de preparar una aplicación de software (o sitio web) para múltiples idiomas y convenciones culturales. Dentro del ecosistema de Vue.js, esto incluye establecer cómo el texto, fechas, números, moneda y otros elementos localizables pueden ser adaptados a varios locales. Al configurar i18n desde el principio, aseguras una estructura organizada y escalable para agregar nuevos idiomas y manejar futuras necesidades de localización.

package/blog/es/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # ¿Qué es la Internacionalización (i18n)? Definición y desafíos
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Entendiendo la Internacionalización (i18n)
 
 **La internacionalización**, a menudo abreviada como **i18n**, es el proceso de diseñar y preparar una aplicación para soportar múltiples idiomas, culturas y convenciones regionales **sin** cambios importantes en la base de código. El nombre i18n deriva del hecho de que hay 18 letras entre la **i** y la **n** en la palabra “internacionalización.”