@intlayer/docs 9.4.2 → 9.4.3

package/blog/de/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: Ist vue-i18n im Jahr 2026 veraltet?
+description: vue-i18n war ein Jahrzehnt lang der Standard für Vue- und Nuxt-Anwendungen. Doch in unseren Benchmarks erwies es sich als die schwerste i18n-Runtime im Web. Warum das so ist.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internationalisierung
+  - i18n
+  - Vue
+  - Nuxt
+  - Bundle-Größe
+  - Blog
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# Ist vue-i18n im Jahr 2026 veraltet?
+
+In der Vue-Community ist kaum eine Bibliothek so verbreitet wie `vue-i18n`. Seit Vue 2 von Kazupon gepflegt, treibt sie `@nuxtjs/i18n` an und gilt als Standard für mehrsprachige Vue-Apps.
+
+Unsere Benchmarks 2026 lieferten jedoch ein bemerkenswertes Ergebnis: **`vue-i18n` war die schwerste Lokalisierungs-Runtime über alle getesteten Frontend-Frameworks hinweg.**
+
+Ausgehend von einer schlanken Vite + Vue-Basis von 31.5 KB steigerte `vue-i18n` das durchschnittliche Seiten-JavaScript auf **136.4 KB**, mehr als eine Vervierfachung des Payloads.
+
+Wie konnte ein für seine Leichtigkeit geschätztes Framework einen derart schweren i18n-Stack hervorbringen? Und ist das klassische Runtime-Modell heute noch zeitgemäß?
+
+<TOC/>
+
+## Wichtigste Erkenntnisse
+
+**Schwerste getestete Runtime:**
+
+Mit **24.3 KB gzipped (83.2 KB minified)** vor dem ersten Text ist `vue-i18n` etwa **9-mal schwerer** als die 2.7 KB Runtime von `intlayer`.
+
+**330% Payload-Zuwachs:**
+
+`vue-i18n` vergrößerte eine 31.5 KB Vue-Seite auf 136.4 KB. Intlayer erzielte 59.3 KB, ein **56% kleinerer Seiten-Payload**.
+
+**Versteckter Browser-Compiler:**
+
+Standardmäßig lädt `vue-i18n` einen vollständigen Nachrichten-Compiler in den Browser, um Texte zur Laufzeit zu parsen.
+
+**Wartungsfokus:**
+
+Im letzten Jahr verzeichnete `vue-i18n` ~259 Commits, fokussiert auf Bugfixes und Vue-Versionskompatibilität.
+
+**Fehlendes modernes Tooling:**
+
+Keine native Unterstützung für Language Server (LSP), KI-MCP-Server oder automatisierte CLI-Übersetzungspipelines.
+
+## Wartung vs. modernes Tooling
+
+| Repository            | Stars                                                                                                                                                  | Commits gesamt                                                                                                                                                      | Commits / Jahr                                                                                                                                                     | Letzter 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) |
+
+Vergangene zwölf Monate:
+
+- `intlify/vue-i18n`: **259 Commits** (Pflege für Vue 3 und Nuxt).
+- `aymericzip/intlayer`: **4.343 Commits** (Compiler-Optimierungen, LSP-Erweiterungen und KI-Agenten-Unterstützung).
+
+[![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)
+
+Eine etablierte Bibliothek bietet Stabilität. Moderne Frontend-Stacks nutzen jedoch AST-Transformationen im Build, Dead-Code-Elimination und KI-Lokalisierung. Eine reine Laufzeitarchitektur kann diese Entwicklungen nur schwer adaptieren.
+
+## Performance in Vite + Vue
+
+Gemessen an einer Anwendung mit 10 Seiten und 10 Sprachen mit Vite und 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;"
+/>
+
+> Getestet in realen Browserumgebungen mit Gzip-Kompression. Vollständige Daten in der [Vue-Benchmark-Dokumentation](https://intlayer.org/de/doc/benchmark/vue).
+
+### Basis-Overhead
+
+Overhead vor dem Hinzufügen von Übersetzungstexten:
+
+| Bibliothek        | Gzipped    | Minified   |
+| ----------------- | ---------- | ---------- |
+| `vue-i18n@11.4.0` | 24.3 KB    | 83.2 KB    |
+| `intlayer@8.7.12` | **2.7 KB** | **7.6 KB** |
+
+Die Runtime von `vue-i18n` wiegt allein **24.3 KB gzipped**, fast so viel wie der gesamte Vue-Core. Intlayer fügt lediglich **2.7 KB** hinzu.
+
+### Seitengewicht und Daten-Leakage
+
+| Konfiguration     | Seiten-JS Ø (gz) | Sprach-Leakage | Andere-Seiten-Leakage | Komponente Ø (gz) |
+| ----------------- | ---------------- | -------------- | --------------------- | ----------------- |
+| Basis (ohne 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**        |
+
+### Wichtige Beobachtungen
+
+**Hoher relativer Zuwachs:**
+
+Da Vue von Haus aus sehr kompakt ist (~31 KB), vervierfacht `vue-i18n` das Gewicht der Anwendung.
+
+**Leakage anderer Seiten:**
+
+Standardmäßig gehören **90% der geladenen Übersetzungen** zu anderen Seiten. Intlayer reduziert dies auf **0.0%**.
+
+**Gewicht isolierter Komponenten:**
+
+Komponenten mit lokalen Scopes erreichten unter `vue-i18n` durchschnittlich 196 KB durch duplizierte Kataloge, verglichen mit **6.5 KB** bei Intlayer.
+
+## Warum ist vue-i18n schwer?
+
+### Integrierter AST-Compiler im Browser
+
+`vue-i18n` enthält einen eigenen Nachrichtenformat-Compiler. Pluralregeln und Variablenersetzungen werden zur Laufzeit in Abstract Syntax Trees überführt.
+
+Um dies zu vermeiden, müssen Bundler-Aliase für `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js` konfiguriert und Kataloge mit `@intlify/unplugin-vue-i18n` vorkompiliert werden. Viele Projekte übersehen diesen Schritt.
+
+### Monolithischer Funktionsumfang
+
+`vue-i18n` bündelt Formatierer für Zahlen und Daten, verkettete Nachrichten, Brücken zur Options-API (`$t`, `v-t`) und reaktive Proxys. Selbst wenn Sie nur simple Strings in `<script setup>` übersetzen, zahlen Sie für das gesamte Paket.
+
+### Dynamische Schlüssel blockieren Tree-Shaking
+
+Da `"home.hero.title"` dynamisch aufgelöst wird, können Bundler nicht ermitteln, welche Schlüssel genutzt werden. Ungenutzte Übersetzungen verbleiben im 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>
+
+Der [Intlayer-Compiler](https://intlayer.org/de/doc/compiler) erfasst verwendete Eigenschaften präzise und entfernt ungenutzte Inhalte vor dem Erstellen der Client-Chunks. Details in der [Bundle-Optimierung](https://intlayer.org/de/doc/concept/bundle-optimization).
+
+## Entwicklererfahrung
+
+### Getrennte Kataloge vs. Co-Location
+
+Bei `vue-i18n` liegen Texte in einem separaten `locales/`-Verzeichnis. Intlayer organisiert Inhaltsdateien direkt neben den Komponenten:
+
+<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/de.json"
+{
+  "hero": {
+    "title": "Veröffentliche in jeder Sprache"
+  }
+}
+```
+
+```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",
+      de: "Veröffentliche in jeder Sprache",
+    }),
+  },
+} 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>
+
+Wird `Hero.vue` gelöscht oder verschoben, werden die Übersetzungen direkt mitangepasst.
+
+### Autovervollständigung vs. strikte Vollständigkeit
+
+`DefineLocaleMessage` bietet Autovervollständigung gegen das Basisschema. Es garantiert jedoch nicht, dass alle Sprachen vollständig gepflegt sind. Fehlt ein Schlüssel in `de.json`, meldet TypeScript beim Build keinen Fehler.
+
+Mit Intlayer werden Wörterbücher strikt geprüft. Das Aktivieren von [`strictMode`](https://intlayer.org/de/doc/concept/configuration) lässt den Build bei jeder fehlenden Übersetzung fehlschlagen.
+
+### Modernes Tooling für IDEs und KI
+
+| Feature                      | `vue-i18n`                | Intlayer                                                                     |
+| ---------------------------- | ------------------------- | ---------------------------------------------------------------------------- |
+| **VS Code Extension**        | Drittanbieter (i18n Ally) | ✅ [Offizielle Extension](https://intlayer.org/de/doc/vs-code-extension)     |
+| **Language Server (LSP)**    | ❌ Keiner                 | ✅ [Integrierter LSP](https://intlayer.org/de/doc/lsp)                       |
+| **MCP Server für KI**        | ❌ Keiner                 | ✅ [Integrierter MCP-Server](https://intlayer.org/de/doc/mcp-server)         |
+| **Agent Skills**             | ❌ Keine                  | ✅ [Autonome Agent-Skills](https://intlayer.org/de/doc/agent_skills)         |
+| **Visuelles In-Context-CMS** | ❌ Keines                 | ✅ [Kostenloses Open-Source-CMS](https://intlayer.org/de/doc/concept/editor) |
+
+## Übersetzungspipelines
+
+`vue-i18n` bietet keinen integrierten Übersetzungsbefehl. Teams greifen meist auf externe Dienste wie Crowdin oder Phrase zurück.
+
+Intlayer liefert integrierte Werkzeuge:
+
+**Lokales KI-Auto-Fill (`intlayer fill`):**
+
+Ergänzt fehlende Übersetzungen mit eigenen API-Schlüsseln von OpenAI, Anthropic, Mistral oder Gemini.
+
+**Selbst hostbares visuelles CMS:**
+
+Nutzen Sie das [Intlayer CMS](https://intlayer.org/de/doc/concept/cms), damit Content-Teams Texte visuell bearbeiten und direkt in Git committen können.
+
+**Freie Open-Source-Lizenz:**
+
+Die gesamte Toolchain steht unter Apache 2.0.
+
+## Wann bleibt vue-i18n sinnvoll?
+
+<AccordionGroup>
+<Accordion header="Bestehende Nuxt 2/3-Codebases">
+
+Wenn das Routing eng mit `@nuxtjs/i18n` verknüpft ist, lohnt ein Umbau oft nicht.
+
+</Accordion>
+<Accordion header="Spezifische ICU-Formatierungen">
+
+Bei intensiver Nutzung von verlinkten Nachrichten oder komplexen benutzerdefinierten Pluralregeln.
+
+</Accordion>
+<Accordion header="Kleinere Hobby-Projekte">
+
+Wenn die Bundle-Größe für Ihren Anwendungsfall zweitrangig ist.
+
+</Accordion>
+</AccordionGroup>
+
+## Wie verbessere ich mein bestehendes vue-i18n-Setup?
+
+Intlayer bietet Drop-in-Kompatibilitätspakete an, die exakt dieselben Funktionssignaturen von `vue-i18n` und `@nuxtjs/i18n` (`useI18n`, `$t`, `<i18n-t>`) bereitstellen. Sie müssen Ihre Templates oder Composables nicht neu schreiben, um von einer leichtgewichtigen, compilergestützten Architektur zu profitieren.
+
+Die Einrichtung erfolgt mit einem einzigen Befehl:
+
+```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
+```
+
+Dieses interaktive CLI-Tool:
+
+1. Installiert das Kompatibilitätspaket `@intlayer/vue-i18n` oder `@intlayer/nuxt-i18n`.
+2. Richtet Vite- oder Nuxt-Bundler-Aliase ein, sodass Ihre bisherigen Importe und Template-Direktiven nahtlos auf Intlayer umgeleitet werden und `vue-i18n` aus der `package.json` entfernt werden kann.
+3. Aktiviert sofort Sprachserver-Diagnosen (LSP), entfernt den 24-KB-AST-Parser aus dem Client-Bundle und schaltet lokale KI-Übersetzungsprozesse frei, ohne ein großes Refactoring zu verlangen.
+
+Detaillierte Schritt-für-Schritt-Anleitungen finden Sie hier:
+
+- **Direkte Kompatibilität:** Nutzen Sie bestehende Templates mit dem [`vue-i18n`-Kompatibilitäts-Layer](https://intlayer.org/de/doc/compatibility/vue-i18n) oder [`@nuxtjs/i18n`-Kompatibilitäts-Layer](https://intlayer.org/de/doc/compatibility/nuxtjs-i18n).
+- **Geführte Migration:** Konvertieren Sie JSON-Dateien mit unseren Migrationsleitfäden: [von vue-i18n](https://intlayer.org/de/doc/migration/vue-i18n) oder [von @nuxtjs/i18n](https://intlayer.org/de/doc/migration/nuxtjs-i18n).
+- **Hybride Lösung:** Behalten Sie `vue-i18n` für die Anzeige bei und [verwenden Sie Intlayer mit vue-i18n](https://intlayer.org/de/blog/intlayer-with-vue-i18n) für strikte Typen und lokale KI-Übersetzung.
+
+Prüfen Sie Ihre Website mit dem kostenlosen [i18n SEO Scanner](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Weiterführende Links
+
+- [Vue & Vite i18n Benchmark: Detaillierte Analyse](https://intlayer.org/de/doc/benchmark/vue)
+- [vue-i18n vs Intlayer im direkten Vergleich](https://intlayer.org/de/blog/vue-i18n-vs-intlayer)
+- [Ist next-intl im Jahr 2026 veraltet?](https://intlayer.org/de/blog/is-next-intl-outdated)
+- [Compiler-gestützte vs. deklarative Internationalisierung](https://intlayer.org/de/blog/compiler-vs-declarative-i18n)

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

@@ -0,0 +1,179 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: Glob-Imports, Chunks und Build-Time-Meldungen"
+description: Was bei i18n wirklich Vite-spezifisch ist. Lazy Catalogs mit import.meta.glob, warum Splitting nach Route selten trennt, HMR-Lücken und Build-Time-Plugins.
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - vite code splitting
+  - übersetzungen nachladen
+  - vite plugin i18n
+  - rollup chunks
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: Was an Vite liegt, nicht an Ihrem Framework
+
+Die meisten „Vite i18n“-Tutorials sind in Wahrheit React- oder Vue-Tutorials, die zufällig Vite verwenden. Dieser Artikel beleuchtet die darunterliegende Schicht: Wie Kataloge importiert werden, was Rollup damit anstellt und warum das von Ihnen geschriebene Lazy Loading in Wirklichkeit gar nicht lazy ist.
+
+## Inhaltsverzeichnis
+
+<TOC/>
+
+## Statischer Import ist der Standard, und er ist synchron
+
+Das simpelste Setup importiert jeden Katalog am Dateianfang eines Moduls:
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+Damit landen drei Kataloge direkt im initialen Entry-Chunk, auf jeder Seite, für jeden Nutzer. Bei zwei Sprachen und hundert Texten fällt das kaum ins Gewicht. Bei zehn Sprachen wird es zum größten vermeidbaren Kostenfaktor im gesamten Bundle.
+
+## `import.meta.glob` und das Flag, das fast jeder falsch setzt
+
+Vites Glob-Import ist die übliche Lösung:
+
+```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>;
+};
+```
+
+Lazy Loading ist der Standard: Jeder Eintrag ist eine Funktion, die einen dynamischen Import zurückgibt, und Rollup erzeugt einen eigenen Chunk pro Datei. Das Hinzufügen von `{ eager: true }` bettet hingegen alle Dateien direkt in das aufrufende Modul ein, also genau das, was Sie eigentlich vermeiden wollten:
+
+```ts
+// Alle Sprachen im Entry-Chunk. Fast nie das, was man will:
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+Die Falle: Beide Varianten funktionieren in der lokalen Entwicklung, da Vite Module ungebündelt ausliefert. Der Unterschied wird erst im Ordner `dist` sichtbar. Prüfen Sie dies mit `npx vite build && npx vite preview` und analysieren Sie, was der Entry-Chunk tatsächlich enthält.
+
+## Aufteilung nach Routen trennt selten sauber
+
+Dies ist das Verhalten, das Entwickler oft überrascht. Sie strukturieren Kataloge nach Seiten:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+Wenn nun zwei Routen `checkout.json` importieren, hebt Rollup diese Datei in einen gemeinsamen Shared Chunk, der von beiden Seiten geladen wird. Rollups Chunking orientiert sich am Modulgraphen, nicht an Ihren Verzeichnisnamen: Jedes Modul, das von mehr als einem Einstiegspunkt erreichbar ist, wird als gemeinsame Abhängigkeit gebündelt. Eine dritte Route ändert daran nichts, und eine vierte führt womöglich zu einer ganz anderen Aufteilung.
+
+Ein Aufteilen nach Routen funktioniert folglich nur, wenn der Import-Graph strikt disjunkt ist. Wenn Bundle-Größen zählen, prüfen Sie das Ergebnis, statt Vermutungen anzustellen:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+Müssen Sie Chunk-Grenzen erzwingen, bietet `build.rollupOptions.output.manualChunks` den nötigen Hebel, allerdings zum Preis manueller Pflege.
+
+## Kataloge aktualisieren sich nicht per Hot Reload (HMR)
+
+Ändern Sie eine Komponente, tauscht Vite sie sofort aus. Ändern Sie `locales/fr.json`, passiert je nach Import-Art gar nichts. Dynamisch importiertes JSON besitzt keine HMR-Grenze, weshalb der Modulgraph abhängige Konsumenten nicht invalidieren kann.
+
+Viele Entwickler starten den Dev-Server bei Textänderungen neu, ohne zu wissen, dass sich dies vermeiden lässt. Die Lösung liegt beim i18n-Plugin: Es muss das HMR-Update annehmen und neue Meldungen in die laufende App einspielen. Achten Sie bei der Bibliotheksauswahl darauf, ob das Vite-Plugin dies beherrscht, da es über den täglichen Komfort im Entwicklungsprozess entscheidet.
+
+## `define` brennt die Sprache fest in den Build ein
+
+Es ist verlockend, die Standardsprache zur Build-Zeit festzulegen:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+`define` führt eine reine Textersetzung zur Build-Zeit durch. Der Wert, der beim Kompilieren vorliegt, wird fest ausgeliefert, was einen separaten Build pro Sprache erzwingt. Das ist eine legitime Strategie, wie sie etwa Angulars natives i18n verfolgt, aber ungeeignet, wenn ein einziges Deployment alle Sprachen bedienen soll.
+
+Werte, die pro Anfrage variieren können, gehören nicht in `define`, sondern müssen zur Laufzeit aufgelöst werden.
+
+## Parsing von Meldungen in die Build-Phase verlagern
+
+Jede ausgereifte Lösung in diesem Ökosystem verfolgt letztlich denselben Ansatz: Meldungen nicht mehr im Browser zu parsen.
+
+| Plugin                       | Was zur Build-Zeit erledigt wird                                         |
+| :--------------------------- | :----------------------------------------------------------------------- |
+| `@intlify/unplugin-vue-i18n` | Kompiliert vue-i18n-Meldungen zu Renderfunktionen (reines Runtime-Paket) |
+| Lingui (Makro + Plugin)      | Extrahiert und kompiliert Kataloge, ersetzt Makros durch Meldungs-IDs    |
+| Paraglide (inlang)           | Kompiliert jede Meldung in eine eigene tree-shakable Funktion            |
+| `vite-intlayer`              | Erstellt komponentenbezogene Wörterbücher, bereinigt und minifiziert     |
+
+Der doppelte Vorteil: Der Runtime-Compiler entfällt im finalen Bundle, und ungenutzte Einträge können statisch entfernt werden. Der Preis dafür: Sowohl Dev-Server als auch CI benötigen das Plugin, und ein reines `tsc` oder Test-Runner ohne Vite erfordern zusätzliche Konfigurationsschritte.
+
+vue-i18n verdeutlicht den Vorteil: Ohne `@intlify/unplugin-vue-i18n` liefern Sie einen Compiler aus, der intern `new Function` aufruft, was unnötige Bytes kostet und Probleme mit Content Security Policies (CSP) verursachen kann.
+
+## SSR: Niemals den Sprachstatus auf Modulebene halten
+
+Wenn Sie SSR nutzen, sei es über ein Framework oder `vite-plugin-ssr`, gilt eine strikte Regel: Eine Variable auf Modulebene, die die aktuelle Sprache speichert, wird von allen parallelen Anfragen desselben Serverprozesses geteilt.
+
+```ts
+// Im Browser unproblematisch. Auf dem Server ein Datenleck zwischen Anfragen:
+export let currentLocale = "en";
+```
+
+Greifen zwei Nutzer gleichzeitig auf den Server zu, kommt es zu einer Race Condition, und einer erhält die Sprache des anderen. In der lokalen Entwicklung tritt dies nicht auf, da Sie der einzige Nutzer sind. Lösen Sie die Locale pro Anfrage auf und übergeben Sie sie explizit per Kontext oder über den anfragespezifischen Speicher Ihres Frameworks.
+
+## Das Vite-Plugin von Intlayer
+
+Intlayer registriert ein einzelnes Plugin, das Wörterbuch-Build, Dev-Mode-Watching und die Optimierungs-Pipeline übernimmt:
+
+```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()],
+});
+```
+
+Import-Rewriting, Purge und Minify sind standardmäßig aktiv. Zwei wichtige Optionen befinden sich in `intlayer.config.ts`:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // entfernt Felder, die von keiner Komponente gelesen werden
+    minify: true, // benennt Inhaltsschlüssel in kurze Aliase um
+  },
+};
+
+export default config;
+```
+
+Da Inhalte pro Komponente statt in großen Sprachdateien deklariert werden, verfügt der Purge-Durchlauf über einen echten Modulgraphen, was das Entfernen ungenutzter Texte sicher macht. Der Nachteil: Das Plugin ist überall dort zwingend erforderlich, wo Code kompiliert wird, inklusive CI und Test-Suites. Details finden sich in der [Bundle-Optimierung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/bundle_optimization.md).
+
+## Häufige Fehler
+
+- **`{ eager: true }` bei einem Glob für Lazy Loading.** Funktioniert in Dev, liefert in Produktion alle Sprachen aus.
+- **Ordnerstrukturen für Chunks halten.** Rollup folgt Imports, keinen Verzeichnissen. Messen Sie Ihr Bundle.
+- **Dev-Server bei Textänderungen neu starten.** Symptom eines fehlenden HMR-Handlers.
+- **Die Locale in `define` festschreiben.** Zwingt Sie zu einem separaten Build pro Sprache.
+- **Sprachstatus auf Modulebene bei SSR.** Führt zu Lecks zwischen Anfragen, die lokal nicht auftreten.
+- **Performance auf dem Dev-Server bewerten.** Ungebündelte Module sagen nichts über das finale Bundle aus.
+
+## Weiterführende Ressourcen
+
+- [Bundle-Optimierung: Purge, Minify und was im Browser ankommt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/bundle_optimization.md)
+- [Framework-Benchmarkberichte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/benchmark/index.md)
+- [Konfigurationsreferenz](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md)
+- [Intlayer mit Vite und React einrichten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md)
+- [i18next-Kompatibilitätsadapter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compat/i18next.md)
+- [React i18n: Wie das Provider-Modell funktioniert](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: Funktionsweise und Schwachstellen](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/list_i18n_technologies/frameworks/vue.md)
+- [Komponentenbasierte vs. zentrale i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/per-component_vs_centralized_i18n.md)

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

@@ -25,8 +25,6 @@ In der heutigen vernetzten Welt kann das Angebot Ihrer Website in mehreren Sprac
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Was ist Internationalisierung (i18n)?
 
 Internationalisierung, oft als i18n bezeichnet, ist der Prozess, Ihre Anwendung so zu gestalten und vorzubereiten, dass sie mehrere Sprachen und kulturelle Kontexte unterstützt. In Angular bedeutet dies, Ihre App so zu konfigurieren, dass Texte, Daten, Zahlen und sogar UI-Layouts sich nahtlos an verschiedene Lokalisierungen anpassen können. Eine ordnungsgemäße Grundlage dafür zu legen, stellt sicher, dass die Integration zukünftiger Übersetzungen organisiert und effizient bleibt.

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

@@ -25,8 +25,6 @@ In einem zunehmend globalen Markt kann die Bereitstellung Ihrer React Native-App
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Was ist Internationalisierung (i18n)?
 
 Internationalisierung oder i18n umfasst die Strukturierung einer Anwendung, damit sie sich leicht an verschiedene Sprachen, regionale Formate und kulturelle Normen anpassen kann. In React Native umfasst i18n die Verarbeitung von Zeichenfolgen für Schaltflächen und Beschriftungen sowie die Formatierung von Daten, Zeiten, Währungen und mehr gemäß der Spracheinstellungen eines Benutzers. Richtig vorbereitete React Native-Apps ermöglichen es Ihnen, zusätzliche Sprachen und sprachspezifisches Verhalten später nahtlos zu integrieren - ohne massive Refaktorierungen.

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

@@ -25,8 +25,6 @@ In der heutigen digitalen Landschaft ist es unerlässlich, die Reichweite Ihrer
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Was ist Internationalisierung (i18n)?
 
 Internationalisierung, abgekürzt als i18n, ist der Prozess der Gestaltung und Vorbereitung Ihrer Website zur Unterstützung mehrerer Sprachen und kultureller Kontexte. In React bedeutet dies, dass Ihre App so eingerichtet wird, dass Zeichenfolgen, Datumsformate, Zahlenformate und sogar das Layout problemlos für Benutzer aus verschiedenen Regionen angepasst werden können. Ihre React-App für i18n vorzubereiten, legt den Grundstein für die saubere Integration von Übersetzungen und anderen Lokalisierungsfunktionen.

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

@@ -23,8 +23,6 @@ author: aymericzip
 
 Da das Web weiterhin Menschen auf der ganzen Welt verbindet, wird es zunehmend wichtig, Inhalte in mehreren Sprachen anzubieten. Für Entwickler, die mit **Svelte** arbeiten, ist die Implementierung von i18n entscheidend, um Übersetzungen effizient zu verwalten, sauberen Code zu erhalten und gute SEO-Praktiken aufrechtzuerhalten. In diesem Artikel tauchen wir in verschiedene i18n-Lösungen und Arbeitsabläufe für Svelte ein – und helfen Ihnen, diejenige auszuwählen, die am besten zu den Anforderungen Ihres Projekts passt.
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Was ist Internationalisierung (i18n)?
 
 Internationalisierung, allgemein als i18n abgekürzt, ist der Prozess der Gestaltung und des Aufbaus Ihrer Anwendung, damit sie sich leicht an verschiedene Sprachen, Regionen und kulturelle Konventionen anpassen kann. In Svelte bedeutet dies in der Regel, Übersetzungsstrings einzurichten, Daten, Zeiten und Zahlen zu lokalisieren und sicherzustellen, dass die Benutzeroberfläche dynamisch zwischen verschiedenen Lokalen ohne größere Codeänderungen wechseln kann.

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

@@ -25,8 +25,6 @@ In einer zunehmend globalisierten digitalen Landschaft ist es nicht länger ein
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Was ist Internationalisierung (i18n)?
 
 Internationalisierung (i18n) ist die Praxis, eine Softwareanwendung (oder Website) für mehrere Sprachen und kulturelle Konventionen vorzubereiten. Innerhalb des Vue.js-Ökosystems umfasst dies die Festlegung, wie Texte, Daten, Zahlen, Währungen und andere lokalisierbare Elemente an verschiedene Lokalisierungen angepasst werden können. Indem Sie i18n von Anfang an einrichten, stellen Sie eine organisierte, skalierbare Struktur für die Hinzufügung neuer Sprachen und die Handhabung zukünftiger Lokalisierungsbedürfnisse sicher.

package/blog/de/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # Was ist Internationalisierung (i18n)? Definition und Herausforderungen
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Verständnis von Internationalisierung (i18n)
 
 **Internationalisierung**, oft abgekürzt als **i18n**, ist der Prozess des Entwerfens und Vorbereitens einer Anwendung zur Unterstützung mehrerer Sprachen, Kulturen und regionaler Konventionen **ohne** größere Änderungen am Code. Der Name i18n leitet sich von der Tatsache ab, dass es 18 Buchstaben zwischen dem **i** und dem **n** im Wort „Internationalisierung“ gibt.