@intlayer/docs 9.4.2 → 9.4.3

package/blog/pl/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: Czy vue-i18n jest przestarzały w 2026 roku?
+description: vue-i18n był standardem dla ekosystemu Vue i Nuxt przez dekadę. Jednak w naszych testach okazał się najcięższym runtime i18n w sieci. Wyjaśniamy dlaczego.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internacjonalizacja
+  - i18n
+  - Vue
+  - Nuxt
+  - Rozmiar bundle
+  - Blog
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# Czy vue-i18n jest przestarzały w 2026 roku?
+
+W świecie Vue niewiele bibliotek cieszy się taką popularnością jak `vue-i18n`. Rozwijany przez Kazupona od czasów Vue 2, zasila `@nuxtjs/i18n` i stanowi domyślny wybór w niemal każdym wielojęzycznym projekcie Vue.
+
+Mimo to nasze testy benchmarkowe w 2026 roku przyniosły zaskakujący rezultat: **`vue-i18n` okazał się najcięższym runtime lokalizacji spośród wszystkich sprawdzonych frameworków frontendowych.**
+
+W czystej aplikacji Vite + Vue o wadze 31.5 KB wdrożenie `vue-i18n` zwiększyło średnią objętość JavaScriptu na stronę do **136.4 KB**, ponad czterokrotnie powiększając transfer.
+
+Jak to możliwe, że technologia ceniona za zwinność i minimalizm zyskała tak wymagający pakiet i18n? Czy jej klasyczna architektura runtime ma jeszcze uzasadnienie?
+
+<TOC/>
+
+## Kluczowe wnioski
+
+**Najcięższy zbadany runtime:**
+
+Ważąc **24.3 KB gzipped (83.2 KB po minifikacji)** przed dołączeniem jakichkolwiek tłumaczeń, `vue-i18n` jest około **9 razy cięższy** od silnika `intlayer` (2.7 KB).
+
+**Wzrost wagi strony o 330%:**
+
+`vue-i18n` podniósł rozmiar strony startowej z 31.5 KB do 136.4 KB. Intlayer zamknął się w 59.3 KB, co daje **payload mniejszy o 56%**.
+
+**Ukryty kompilator w przeglądarce:**
+
+Domyślnie, o ile nie skonfiguruje się specjalnych aliasów w bundlerze, `vue-i18n` wysyła kompletny kompilator wiadomości do przeglądarki, by przetwarzać ciągi znaków w locie.
+
+**Częstotliwość wydań:**
+
+W minionym roku `vue-i18n` odnotował ~259 commitów, skupionych wokół eliminacji błędów i zgodności z nowymi wersjami Vue.
+
+**Brak natywnych nowoczesnych narzędzi:**
+
+Brak oficjalnego wsparcia dla Language Server (LSP), serwerów MCP dla sztucznej inteligencji czy zautomatyzowanych komend tłumaczeniowych w CLI.
+
+## Utrzymanie vs. współczesne narzędzia
+
+| Repozytorium          | Gwiazdki                                                                                                                                               | Wszystkie commity                                                                                                                                                   | Commity / rok                                                                                                                                                      | Ostatni 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) |
+
+Ostatnie 12 miesięcy:
+
+- `intlify/vue-i18n`: **259 commitów** (bieżące wsparcie dla Vue 3 i Nuxt).
+- `aymericzip/intlayer`: **4 343 commity** (prace nad optymalizacjami kompilatora, narzędziami LSP i integracjami AI).
+
+[![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)
+
+Sprawdzona biblioteka gwarantuje przewidywalność. Jednak nowoczesne technologie opierają się na modyfikacjach AST w trakcie budowania, czyszczeniu nieużywanego kodu i automatycznym tłumaczeniu przez AI. Rozwiązanie zakorzenione wyłącznie w runtime nie wykorzystuje łatwo tych możliwości.
+
+## Pomiary w Vite + Vue
+
+Testy przeprowadzone na aplikacji z 10 podstronami i 10 językami przy użyciu Vite i 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;"
+/>
+
+> Testy wykonane w przeglądarkach przy użyciu kompresji gzip. Kompletne zestawienie w [dokumentacji benchmarku Vue](https://intlayer.org/pl/doc/benchmark/vue).
+
+### Wyjściowy narzut biblioteki
+
+Rozmiar przed wprowadzeniem tekstów:
+
+| Biblioteka        | Gzipped    | Zminifikowane |
+| ----------------- | ---------- | ------------- |
+| `vue-i18n@11.4.0` | 24.3 KB    | 83.2 KB       |
+| `intlayer@8.7.12` | **2.7 KB** | **7.6 KB**    |
+
+Sam runtime `vue-i18n` zabiera **24.3 KB gzipped**, czyli niemal tyle, ile cały rdzeń Vue. Intlayer dokłada zaledwie **2.7 KB**.
+
+### Waga strony i wyciek tłumaczeń
+
+| Konfiguracja    | Śr. JS / str. (gz) | Wyciek języków | Wyciek innych stron | Śr. komponent (gz) |
+| --------------- | ------------------ | -------------- | ------------------- | ------------------ |
+| Baza (bez 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**         |
+
+### Główne spostrzeżenia
+
+**Duży przyrost proporcjonalny:**
+
+Ponieważ szkielet Vue jest wybitnie lekki (~31 KB), zastosowanie `vue-i18n` ponad czterokrotnie zwiększa transfer strony.
+
+**Wyciek do innych tras:**
+
+W standardowym wariancie **90% pobieranych tekstów** dotyczy innych podstron. Intlayer zupełnie eliminuje te dane, sprowadzając wyciek do **0.0%**.
+
+**Masa odrębnych komponentów:**
+
+Komponenty z lokalnymi zakresami tłumaczeń osiągały w `vue-i18n` średnio 196 KB przez replikację słowników, podczas gdy w Intlayer było to **6.5 KB**.
+
+## Dlaczego vue-i18n jest ciężki?
+
+### Parser AST przesyłany do przeglądarki
+
+`vue-i18n` zawiera dedykowany kompilator formatu wiadomości. Reguły pluralizacji i interpolacje są tłumaczone na drzewa AST bezpośrednio w trakcie działania programu.
+
+Aby temu zapobiec, trzeba utworzyć aliasy w bundlerze wskazujące na `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js` oraz wstępnie kompilować pliki z `@intlify/unplugin-vue-i18n`. Wiele projektów pomija ten krok.
+
+### Monolityczny zestaw funkcji
+
+`vue-i18n` integruje obsługę dat i liczb, połączone wiadomości, mostki dla Options API (`$t`, `v-t`) oraz reaktywne proxy. Nawet jeśli zależy Ci wyłącznie na prostych tekstach w `<script setup>`, wczytywany jest kompletny silnik.
+
+### Dynamiczne klucze wykluczają tree-shaking
+
+Rozwiązywanie `"home.hero.title"` w runtime uniemożliwia narzędziom budującym identyfikację potrzebnych fraz. W konsekwencji zbędne wpisy zostają w paczce.
+
+<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>
+
+[Kompilator Intlayer](https://intlayer.org/pl/doc/compiler) śledzi bezpośrednie wywołania właściwości i usuwa nieużywaną treść przed przygotowaniem plików klienta. Zobacz [optymalizację bundle](https://intlayer.org/pl/doc/concept/bundle-optimization).
+
+## Doświadczenie programisty
+
+### Osobne foldery vs. ko-lokacja
+
+W `vue-i18n` tłumaczenia leżą w oddzielnym folderze `locales/`. Intlayer umożliwia tworzenie plików treści tuż obok komponentów:
+
+<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/pl.json"
+{
+  "hero": {
+    "title": "Wdrażaj w każdym języku"
+  }
+}
+```
+
+```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",
+      pl: "Wdrażaj w każdym języku",
+    }),
+  },
+} 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>
+
+Usunięcie lub przeniesienie `Hero.vue` automatycznie skutkuje usunięciem lub przeniesieniem pliku z treścią.
+
+### Podpowiedzi w edytorze vs. rygorystyczna kompletność
+
+`DefineLocaleMessage` oferuje autouzupełnianie na podstawie wzorcowego pliku. Nie chroni jednak przed lukami w innych językach. Brakujący klucz w `pl.json` nie przerwie procesu budowania TypeScriptem.
+
+W Intlayer słowniki są walidowane restrykcyjnie. Tryb [`strictMode`](https://intlayer.org/pl/doc/concept/configuration) wywołuje błąd kompilacji, jeśli pominiesz jakiekolwiek tłumaczenie.
+
+### Współczesne narzędzia dla programistów i AI
+
+| Narzędzie                   | `vue-i18n`             | Intlayer                                                                   |
+| --------------------------- | ---------------------- | -------------------------------------------------------------------------- |
+| **Rozszerzenie VS Code**    | Zewnętrzne (i18n Ally) | ✅ [Oficjalne rozszerzenie](https://intlayer.org/pl/doc/vs-code-extension) |
+| **Language Server (LSP)**   | ❌ Brak                | ✅ [Wbudowany LSP](https://intlayer.org/pl/doc/lsp)                        |
+| **Serwer MCP dla AI**       | ❌ Brak                | ✅ [Dedykowany serwer MCP](https://intlayer.org/pl/doc/mcp-server)         |
+| **Umiejętności agentów**    | ❌ Brak                | ✅ [Autonomiczne skille](https://intlayer.org/pl/doc/agent_skills)         |
+| **Wizualny CMS in-context** | ❌ Brak                | ✅ [Darmowy CMS Open Source](https://intlayer.org/pl/doc/concept/editor)   |
+
+## Potoki tłumaczeń
+
+`vue-i18n` nie posiada wbudowanych komend translacyjnych. Wymaga to najczęściej ręcznego eksportu do serwisów pokroju Crowdin czy Phrase.
+
+Intlayer udostępnia kompletny zestaw od razu:
+
+**Lokalne auto-tłumaczenie AI (`intlayer fill`):**
+
+Uzupełnia puste wpisy przy użyciu własnych kluczy API OpenAI, Anthropic, Mistral lub Gemini.
+
+**Samodzielnie wdrażany CMS wizualny:**
+
+Zainstaluj [Intlayer CMS](https://intlayer.org/pl/doc/concept/cms), aby dać zespołom redakcyjnym podgląd zmian z bezpośrednim zapisem w Git.
+
+**Licencja open source:**
+
+Całe oprogramowanie jest dostępne na licencji Apache 2.0.
+
+## Kiedy vue-i18n wciąż ma sens?
+
+<AccordionGroup>
+<Accordion header="Działające projekty w Nuxt 2/3">
+
+Jeśli routing aplikacji mocno polega na `@nuxtjs/i18n`, przepisywanie kodu może być nieopłacalne.
+
+</Accordion>
+<Accordion header="Specyficzne wymagania formatowania ICU">
+
+Gdy projekt w dużym stopniu używa zagnieżdżonych komunikatów i złożonych reguł dat.
+
+</Accordion>
+<Accordion header="Drobne projekty hobbystyczne">
+
+Jeśli rozmiar paczki nie wpływa negatywnie na odbiór strony.
+
+</Accordion>
+</AccordionGroup>
+
+## Jak usprawnić istniejącą konfigurację vue-i18n?
+
+Intlayer udostępnia bezpośrednie pakiety zgodności, które wiernie odwzorowują sygnatury funkcji `vue-i18n` oraz `@nuxtjs/i18n` (`useI18n`, `$t`, `<i18n-t>`). Nie musisz przepisywać szablonów ani kompozycji (composables), aby zacząć czerpać korzyści z lekkiej architektury opartej na kompilatorze.
+
+Instalacja sprowadza się do jednego polecenia:
+
+```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
+```
+
+To interaktywne CLI:
+
+1. Instaluje pakiet zgodności `@intlayer/vue-i18n` lub `@intlayer/nuxt-i18n`.
+2. Konfiguruje aliasy w bundlerze (Vite lub Nuxt), aby dotychczasowe importy i wywołania w szablonach wskazywały bezpośrednio na Intlayer, co pozwala usunąć `vue-i18n` z `package.json`.
+3. Błyskawicznie włącza diagnostykę Language Server (LSP), usuwa 24-kilobajtowy parser AST z paczki klienta i odblokowuje lokalne procesy tłumaczeń AI bez czasochłonnego refaktoringu.
+
+Dokładne kroki znajdziesz w naszych dedykowanych przewodnikach:
+
+- **Łatwa adaptacja:** Zachowaj istniejący kod szablonów dzięki [warstwie zgodności z `vue-i18n`](https://intlayer.org/pl/doc/compatibility/vue-i18n) lub [`@nuxtjs/i18n`](https://intlayer.org/pl/doc/compatibility/nuxtjs-i18n).
+- **Instrukcje krok po kroku:** Przenieś pliki JSON do zorganizowanych słowników z naszymi poradnikami: [z vue-i18n](https://intlayer.org/pl/doc/migration/vue-i18n) oraz [z @nuxtjs/i18n](https://intlayer.org/pl/doc/migration/nuxtjs-i18n).
+- **Podejście mieszane:** Zostaw `vue-i18n` na etapie renderowania, [używając Intlayer z vue-i18n](https://intlayer.org/pl/blog/intlayer-with-vue-i18n) do ścisłej kontroli typów i lokalnych translacji AI.
+
+Sprawdź swoją aplikację darmowym [skanerem SEO i18n](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Polecane lektury
+
+- [Benchmark Vue & Vite i18n: pełna analiza](https://intlayer.org/pl/doc/benchmark/vue)
+- [vue-i18n vs Intlayer: dokładne porównanie](https://intlayer.org/pl/blog/vue-i18n-vs-intlayer)
+- [Czy next-intl jest przestarzały w 2026 roku?](https://intlayer.org/pl/blog/is-next-intl-outdated)
+- [Kompilacja a deklaratywna internacjonalizacja](https://intlayer.org/pl/blog/compiler-vs-declarative-i18n)

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

@@ -0,0 +1,177 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: importy glob, chunki i wiadomości w czasie kompilacji"
+description: Co w i18n jest naprawdę specyficzne dla Vite. Leniwe katalogi z import.meta.glob, dlaczego podział per-route rzadko działa, luki w HMR i wtyczki czasu kompilacji.
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - vite podział kodu
+  - leniwe ładowanie tłumaczeń
+  - vite wtyczka i18n
+  - rollup chunki
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: elementy dotyczące samego Vite, a nie Twojego frameworka
+
+Większość samouczków "Vite i18n" to w rzeczywistości poradniki dotyczące Reacta lub Vue, które przypadkowo korzystają z Vite. Ten artykuł skupia się na warstwie poniżej: jak importowane są katalogi, co robi z nimi Rollup i dlaczego leniwe ładowanie (lazy loading), które napisałeś, w rzeczywistości najpewniej wcale nie jest leniwe.
+
+## Spis treści
+
+<TOC/>
+
+## Import statyczny jest domyślny i synchroniczny (eager)
+
+Najprostsza konfiguracja importuje każdy katalog na samej górze modułu:
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+Oznacza to obecność trzech katalogów w początkowym entry chunku, na każdej podstronie, dla każdego odwiedzającego. Przy dwóch językach i stu napisach nie jest to problemem. Przy dziesięciu językach staje się największym niepotrzebnym kosztem w całym bundle.
+
+## `import.meta.glob` i flaga, którą niemal każdy źle ustawia
+
+Import glob z Vite jest powszechnym rozwiązaniem tego problemu:
+
+```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>;
+};
+```
+
+Leniwe ładowanie jest domyślne: każdy wpis to funkcja zwracająca dynamiczny import, a Rollup generuje jeden chunk na plik. Dodanie `{ eager: true }` powoduje jednak wstrzyknięcie wszystkich plików bezpośrednio do modułu importującego, czyli dokładnie to, czego chcieliśmy uniknąć:
+
+```ts
+// Wszystkie języki w początkowym chunku. Prawie nigdy to, o co chodzi:
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+Pułapka polega na tym, że obie wersje działają w trybie dev, ponieważ Vite serwuje moduły pojedynczo bez bundlowania. Różnica staje się widoczna dopiero w katalogu `dist`. Przetestuj to za pomocą `npx vite build && npx vite preview` i sprawdź, co naprawdę zawiera Twój entry chunk.
+
+## Podział per-route rzadko dzieli katalogi w praktyce
+
+To zachowanie często zaskakuje programistów. Dzielisz katalogi według podstron:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+Następnie dwa różne adresy URL importują `checkout.json`, a Rollup przenosi ten plik do wspólnego chunka (shared chunk), pobieranego na obu podstronach. Dzielenie kodu w Rollupie wynika z grafu zależności modułów, a nie ze struktury Twoich folderów: moduł dostępny z więcej niż jednego punktu wejścia staje się wspólny. Dodanie trzeciej trasy niczego nie zmienia, a czwarta może całkowicie przemodelować strukturę chunków.
+
+Podział katalogów per-route działa więc tylko wtedy, gdy graf importów jest ściśle rozłączny. Jeśli wielkość bundle ma znaczenie, weryfikuj to za pomocą narzędzi, a nie domysłów:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+Jeśli musisz wymusić konkretne granice, opcja `build.rollupOptions.output.manualChunks` stanowi wyjście awaryjne, ale wiąże się z koniecznością ręcznego utrzymania konfiguracji.
+
+## Katalogi nie odświeżają się automatycznie w HMR
+
+Zmień komponent, a Vite zaktualizuje go natychmiast. Zmień `locales/fr.json`, a w zależności od sposobu importu nic się nie wydarzy. Dynamicznie importowany JSON nie posiada wbudowanej granicy HMR, więc graf modułów nie wie, w jaki sposób unieważnić zależne komponenty.
+
+Wielu programistów radzi sobie z tym, restartując serwer dev przy każdej zmianie tekstu. Rozwiązanie leży po stronie wtyczki i18n: musi ona obsłużyć aktualizację HMR i przesłać nowe wiadomości do działającej aplikacji. Wybierając bibliotekę, sprawdź, czy jej wtyczka dla Vite to obsługuje.
+
+## `define` trwale wpisuje język do kodu produkcyjnego
+
+Kuszące może być ustalenie domyślnego języka w czasie kompilacji:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+`define` wykonuje dosłowne podstawienie tekstu w trakcie kompilacji. Wartość obecna podczas budowania staje się ostateczna, co zmusza do oddzielnego budowania aplikacji dla każdego języka. To pełnoprawna strategia, stosowana np. w oficjalnym i18n w Angularze, ale nie sprawdzi się, jeśli jedno wdrożenie ma obsługiwać wszystkie języki dynamicznie.
+
+Wartości, które muszą różnić się w zależności od żądania użytkownika, nie powinny trafiać do `define` i muszą być rozwiązywane w czasie działania (runtime).
+
+## Przenoszenie parsowania wiadomości do czasu kompilacji
+
+Każde dojrzałe rozwiązanie w tym ekosystemie ostatecznie obiera ten sam kierunek: zaprzestanie parsowania wiadomości w przeglądarce.
+
+| Wtyczka                      | Co przenosi do czasu kompilacji                                         |
+| :--------------------------- | :---------------------------------------------------------------------- |
+| `@intlify/unplugin-vue-i18n` | Kompiluje wiadomości vue-i18n do funkcji renderujących (lekki runtime)  |
+| Lingui (makro + wtyczka)     | Wyodrębnia i kompiluje katalogi, zamienia makra na identyfikatory       |
+| Paraglide (inlang)           | Kompiluje każdą wiadomość do niezależnej funkcji tree-shakable          |
+| `vite-intlayer`              | Buduje słowniki komponentów, usuwa (purge) i minifikuje nieużywane pola |
+
+Korzyść jest podwójna: kompilator wiadomości nie trafia do bundle'a przeglądarki, a nieużywane wpisy mogą być statycznie usunięte. Związany z tym koszt: zarówno serwer dev, jak i CI muszą uruchamiać wtyczkę, a zwykłe `tsc` lub runner testów poza Vite wymagać będą dodatkowej konfiguracji.
+
+## SSR: nigdy nie przechowuj języka w zmiennej modułu
+
+Jeśli korzystasz z SSR (przez framework lub `vite-plugin-ssr`), bezwzględna reguła brzmi: zmienna na poziomie modułu przechowująca bieżący język jest współdzielona przez wszystkie równoległe żądania na tym procesie serwera.
+
+```ts
+// Bezpieczne w przeglądarce. Poważny wyciek danych między żądaniami na serwerze:
+export let currentLocale = "en";
+```
+
+Dwóch użytkowników odpytujących serwer w tym samym ułamku sekundy wejdzie w wyścig (race condition), i jeden otrzyma stronę w języku drugiego. W środowisku lokalnym tego nie widać, bo jesteś jedynym użytkownikiem. Rozwiązuj język per żądanie i przekazuj go jawnie przez kontekst lub request-local storage frameworka.
+
+## Wtyczka Vite dla Intlayer
+
+Intlayer rejestruje pojedynczą wtyczkę, która zarządza kompilacją słowników, obserwowaniem zmian w trybie dev i potokiem optymalizacji:
+
+```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()],
+});
+```
+
+Przepisywanie importów, oczyszczanie (purge) i minifikacja są domyślnie aktywne. Kluczowe opcje konfiguruje się w `intlayer.config.ts`:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // usuwa pola zawartości, których żaden komponent nie odczytuje
+    minify: true, // zamienia klucze treści na zwięzłe aliasy
+  },
+};
+
+export default config;
+```
+
+Ponieważ treści są deklarowane per komponent, a nie w wielkich plikach globalnych, krok czyszczenia opiera się na rzeczywistym grafie modułów, co czyni usuwanie nieużywanych wpisów bezpiecznym. Szczegóły w [dokumentacji optymalizacji bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/bundle_optimization.md).
+
+## Częste błędy
+
+- **`{ eager: true }` przy globie pomyślanym jako asynchroniczny.** Działa w dev, wysyła wszystkie języki w bundle produkcyjnym.
+- **Wiara, że struktura katalogów automatycznie tworzy chunki.** Rollup śledzi importy, a nie foldery. Zmierz wynikowy build.
+- **Restartowanie serwera dev, aby zobaczyć zmianę w tekście.** Oznacza brak obsługi HMR we wtyczce.
+- **Umieszczanie języka w `define`.** Wymusza osobny build dla każdego języka.
+- **Stan języka na poziomie modułu w SSR.** Prowadzi do wycieków danych między równoległymi żądaniami.
+- **Mierzenie wydajności na serwerze dev.** Niezbundlowane moduły nie odzwierciedlają finalnego pakietu produkcyjnego.
+
+## Warto przeczytać
+
+- [Optymalizacja bundle: purge, minifikacja i zawartość przesyłana do przeglądarki](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/bundle_optimization.md)
+- [Raporty wydajnościowe frameworków](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/benchmark/index.md)
+- [Dokumentacja konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md)
+- [Konfiguracja Intlayer z Vite i React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_vite+react.md)
+- [Adapter kompatybilności i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/compat/i18next.md)
+- [React i18n: jak działa model dostawców (provider model)](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pl/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: zasada działania i słabe punkty](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pl/list_i18n_technologies/frameworks/vue.md)
+- [i18n na poziomie komponentów a podejście scentralizowane](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pl/per-component_vs_centralized_i18n.md)

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

@@ -25,8 +25,6 @@ W dzisiejszym, wzajemnie połączonym świecie, oferowanie swojej strony interne
 
 ---
 
-![ilustracja i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Czym jest internacjonalizacja (i18n)?
 
 Internacjonalizacja, często określana jako i18n, to proces projektowania i przygotowywania aplikacji do obsługi wielu języków i kontekstów kulturowych. W Angularze oznacza to skonfigurowanie aplikacji tak, aby teksty, daty, liczby, a nawet układy interfejsu użytkownika mogły płynnie dostosowywać się do różnych lokalizacji. Prawidłowe przygotowanie tych podstaw zapewnia, że integracja przyszłych tłumaczeń pozostanie uporządkowana i efektywna.

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

@@ -25,8 +25,6 @@ Na coraz bardziej globalnym rynku, dostarczanie aplikacji React Native w wielu j
 
 ---
 
-![ilustracja i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Czym jest internacjonalizacja (i18n)?
 
 Internacjonalizacja, czyli i18n, polega na takiej strukturze aplikacji, która umożliwia jej łatwe dostosowanie do różnych języków, formatów regionalnych i norm kulturowych. W React Native i18n obejmuje obsługę tekstów przycisków i etykiet, a także formatowanie dat, godzin, walut i innych elementów zgodnie z lokalizacją użytkownika. Odpowiednio przygotowane aplikacje React Native pozwalają na bezproblemową integrację dodatkowych języków i zachowań specyficznych dla danej lokalizacji bez konieczności przeprowadzania dużych refaktoryzacji.

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

@@ -25,8 +25,6 @@ W dzisiejszym cyfrowym świecie rozszerzenie zasięgu swojej strony internetowej
 
 ---
 
-![ilustracja i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Czym jest internacjonalizacja (i18n)?
 
 Internacjonalizacja, w skrócie i18n, to proces projektowania i przygotowywania Twojej strony internetowej do obsługi wielu języków i kontekstów kulturowych. W React oznacza to skonfigurowanie aplikacji tak, aby teksty, formaty dat, formaty liczb, a nawet układ mogły być łatwo dostosowywane dla użytkowników z różnych regionów. Przygotowanie aplikacji React do i18n stanowi podstawę do czystej integracji tłumaczeń i innych funkcji lokalizacyjnych.

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

@@ -25,8 +25,6 @@ W miarę jak sieć nadal łączy ludzi na całym świecie, dostarczanie treści
 
 ---
 
-![ilustracja i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Czym jest internacjonalizacja (i18n)?
 
 Internacjonalizacja, powszechnie skracana do i18n, to proces projektowania i budowania aplikacji w taki sposób, aby mogła ona łatwo dostosowywać się do różnych języków, regionów i konwencji kulturowych. W Svelte zazwyczaj oznacza to konfigurację łańcuchów tłumaczeń, lokalizację dat, godzin i liczb oraz zapewnienie, że interfejs użytkownika może dynamicznie przełączać się między różnymi lokalizacjami bez konieczności dużych zmian w kodzie.

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

@@ -25,8 +25,6 @@ W coraz bardziej zglobalizowanym cyfrowym świecie, rozszerzenie zasięgu Twojej
 
 ---
 
-![ilustracja i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Czym jest internacjonalizacja (i18n)?
 
 Internacjonalizacja (i18n) to praktyka przygotowywania aplikacji programowej (lub strony internetowej) do obsługi wielu języków i konwencji kulturowych. W ekosystemie Vue.js obejmuje to ustalenie, w jaki sposób tekst, daty, liczby, waluty oraz inne elementy podlegające lokalizacji mogą być dostosowane do różnych lokalizacji. Konfigurując i18n od samego początku, zapewniasz uporządkowaną, skalowalną strukturę do dodawania nowych języków oraz obsługi przyszłych potrzeb lokalizacyjnych.

package/blog/pl/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # Czym jest internacjonalizacja (i18n)? Definicja i wyzwania
 
-![ilustracja i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Zrozumienie internacjonalizacji (i18n)
 
 **Internacjonalizacja**, często skracana do **i18n**, to proces projektowania i przygotowywania aplikacji do obsługi wielu języków, kultur oraz regionalnych konwencji **bez** konieczności wprowadzania istotnych zmian w kodzie źródłowym. Nazwa i18n pochodzi od faktu, że pomiędzy literą **i** a literą **n** w słowie „internationalization” znajduje się 18 liter.