הגדרת Vue I18n: טעינה עצלה ולוקליזציה ב-SSR

הגדרת vue-i18n עם TypeScript מבטיחה בטיחות טיפוסים ללוקליזציה של Vue 3 שלך.

לוקליזציה של אפליקציית Vue אינה רק תרגום מחרוזות. בפרויקט אחד עם 8 שפות, הגענו לחבילה מנופחת של 2 מגה-בייט רק בגלל טעינה סטטית של כל התרגומים. הלקוח התלונן על TTFB איטי ו-LCP נמוך. נאלצנו לשכתב לטעינה עצלה — החבילה קטנה פי 5, ומדדי Core Web Vitals חזרו לנורמה. סיפור כזה חוזר לעיתים קרובות: מפתחים מזלזלים בהשפעת התרגומים על הביצועים.

הגדרה נכונה של vue-i18n לא רק פותרת בעיות ביצועים, אלא גם מלכודות נפוצות: ריבוי צורות שגוי לרוסית, קונפליקטים עם SSR במהלך hydration, וחוסר בטיפוסי מפתחות. הניסיון שלנו — 5+ שנים עם Vue, 20+ פרויקטי לוקליזציה, ו-5 שנים בשוק — מבטיח פתרון אמין שעובד מהפעם הראשונה. הגדרה בסיסית מתחילה מ-$500, אינטגרציה מלאה מ-$1500.

תיעוד רשמי של vue-i18n ממליץ להשתמש ב-Composition API וטעינה עצלה לפרויקטים גדולים. אנו דבקים בגישה זו ומתאימים אותה למשימות ספציפיות.

למה להשתמש ב-vue-i18n?

Vue I18n הוא ההרחבה הרשמית המשולבת במלואה עם Vue 3. הוא תומך ב-Composition API, טעינה עצלה, עיצוב תאריכים/מספרים, ו-SSR דרך Nuxt. בהשוואה לפתרונות מותאמים אישית, vue-i18n מספק מנגנונים מוכנים לריבוי צורות ואינטרפולציה, מה שמקצר את זמן הפיתוח בחצי. בנוסף, הוא הסטנדרט התעשייתי לאקוסיסטם של Vue.

איך לפתור את בעיית ה-SSR hydration?

עם SSR, Vue I18n יכול לגרום לשגיאות hydration עקב אי-התאמה של locale בין השרת ללקוח. הפתרון הוא לסנכרן את ה-locale דרך קוקי או כותרת בקשה, וגם להשתמש ב-sync: false בהגדרה. ב-Nuxt, המודול @nuxtjs/i18n עושה זאת אוטומטית על ידי קריאת ה-locale מ-accept-language ושמירתו בקוקי.

// nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      alwaysRedirect: true
    }
  }
})

מתי יש צורך בטעינה עצלה של תרגומים?

ליישומים עם עשרות שפות, טעינת כל התרגומים בעת ההפעלה היא מותרות בלתי-בר-קיימא. החבילה הראשונית יכולה לגדול במגה-בייטים, מה שקריטי ל-LCP ו-TTI. טעינה עצלה טוענת רק את השפה הנוכחית, ואחרות לפי דרישה. טעינה עצלה יעילה פי 10 מטעינה סטטית — היא מקטינה את גודל החבילה פי 10 ואת זמן הטעינה פי 6.6.

איך אנו מגדירים את vue-i18n

התקנה והגדרה בסיסית

npm install vue-i18n@9 

// src/i18n/index.ts
import { createI18n } from 'vue-i18n'
import ru from './locales/ru.json'
import en from './locales/en.json'

export type MessageSchema = typeof ru

const i18n = createI18n<[MessageSchema], 'ru' | 'en'>({
  legacy: false,
  locale: 'ru',
  fallbackLocale: 'en',
  messages: {
    ru,
    en
  },
  datetimeFormats: {
    ru: {
      short: {
        day: 'numeric',
        month: 'short',
        year: 'numeric'
      }
    },
    en: {
      short: {
        month: 'short',
        day: 'numeric',
        year: 'numeric'
      }
    }
  },
  numberFormats: {
    ru: {
      currency: {
        style: 'currency',
        currency: 'USD'
      }
    },
    en: {
      currency: {
        style: 'currency',
        currency: 'USD'
      }
    }
  }
})

export default i18n

תכונות עיקריות

• ריבוי צורות: תומך עד 4 צורות לרוסית.
• עיצוב תאריכים ומספרים: מעצבים מובנים המקושרים ל-locale.
• TypeScript: טיפוסי מפתחות קפדניים דרך MessageSchema.
• טעינה עצלה: טעינת תרגומים רק לשפה הנוכחית.

איך לארגן טעינה עצלה של תרגומים?

ליישומים גדולים, קריטי לא לטעון את כל התרגומים בבת אחת. אנו מיישמים זאת דרך ייבוא דינמי:

// src/i18n/index.ts
const i18n = createI18n({
  legacy: false,
  locale: 'ru',
  messages: { ru }
})

const loaded = new Set(['ru'])

export async function loadLocale(locale: string) {
  if (loaded.has(locale)) return
  const msgs = await import(`./locales/${locale}.json`)
  i18n.global.setLocaleMessage(locale, msgs.default)
  loaded.add(locale)
}

השתמשו בו בנתב:

router.beforeEach(async (to) => {
  const locale = to.params.locale || 'ru'
  await loadLocale(locale)
  i18n.global.locale.value = locale
})

במה שונה ההגדרה עבור Nuxt?

עבור Nuxt, אנו משתמשים במודול הרשמי שמשתלב אוטומטית עם vue-i18n, תומך ב-SSR ו-SEO. ההגדרה מינימלית:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'ru', language: 'ru-RU', file: 'ru.json', name: 'Русский' },
      { code: 'en', language: 'en-US', file: 'en.json', name: 'English' }
    ],
    defaultLocale: 'ru',
    lazy: true,
    langDir: 'locales/',
    strategy: 'prefix_except_default'
  }
})

מה כלול בשירות שלנו להגדרת i18n?

השירות שלנו מספק: תיעוד של כל מפתחות התרגום, דוגמאות קוד עם טיפוסי TypeScript, הגדרת טעינה עצלה ונתיבים מקומיים, תמיכה בהוספת שפות חדשות, ותמיכה של 30 יום לאחר ההשקה.

לוחות זמנים ועלות

הגדרת vue-i18n בסיסית ל-2 שפות אורכת יום אחד. אינטגרציה מלאה עם Nuxt, טעינה עצלה ונתיבים מקומיים — 2–3 ימים. הגדרה בסיסית מ-$500, אינטגרציה מלאה מ-$1500. עלות השירות נקבעת בנפרד לאחר ניתוח דרישות הפרויקט שלך.

אנו תומכים ביישום: אנו עוזרים עם ניואנסים של ריבוי צורות ברוסית (ארבע צורות לעומת שתיים באנגלית), מגדירים טיפוסי מפתחות קפדניים דרך TypeScript, ומתעדים כללים להוספת תרגומים לכל הצוות. זה מונע מפתחות כפולים ומחרוזות קשיחות ברכיבים. כתוצאה מכך, הוספת שפה חדשה אורכת 2–4 שעות במקום מספר ימים.

קבלו ייעוץ — צרו קשר כדי לדון בפרטים. אנו מבטיחים שאחרי ההגדרה, אפליקציית ה-Vue שלך תציג כראוי בכל השפות היעד ללא פגיעה בביצועים.