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?

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

Pokaż całą zawartość tabeli

Pokaż całą zawartość tabeli

Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość

Repozytorium	Gwiazdki	Wszystkie commity	Commity / rok	Ostatni commit
intlify/vue-i18n
aymericzip/intlayer

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).

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:

Testy wykonane w przeglądarkach przy użyciu kompresji gzip. Kompletne zestawienie w dokumentacji benchmarku Vue.

Wyjściowy narzut biblioteki

Rozmiar przed wprowadzeniem tekstów:

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ń

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.

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("home.hero.title") }}</h1>
</template>

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Kompilator Intlayer śledzi bezpośrednie wywołania właściwości i usuwa nieużywaną treść przed przygotowaniem plików klienta. Zobacz optymalizację bundle.

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:

{
  "hero": {
    "title": "Ship in every language"
  }
}

{
  "hero": {
    "title": "Wdrażaj w każdym języku"
  }
}

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("hero.title") }}</h1>
</template>

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;

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

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 wywołuje błąd kompilacji, jeśli pominiesz jakiekolwiek tłumaczenie.

Współczesne narzędzia dla programistów i AI

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, 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?

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:

npx 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 lub @nuxtjs/i18n.
• Instrukcje krok po kroku: Przenieś pliki JSON do zorganizowanych słowników z naszymi poradnikami: z vue-i18n oraz z @nuxtjs/i18n.
• Podejście mieszane: Zostaw vue-i18n na etapie renderowania, używając Intlayer z vue-i18n do ścisłej kontroli typów i lokalnych translacji AI.

Sprawdź swoją aplikację darmowym skanerem SEO i18n:

Polecane lektury

• Benchmark Vue & Vite i18n: pełna analiza
• vue-i18n vs Intlayer: dokładne porównanie
• Czy next-intl jest przestarzały w 2026 roku?
• Kompilacja a deklaratywna internacjonalizacja