Lazy loading локалей

Quasar Framework предоставляет мощные инструменты для работы с локализацией, включая динамическую загрузку языковых пакетов, известную как lazy loading локалей. Эта техника позволяет загружать переводы только при необходимости, что уменьшает размер бандла и ускоряет начальную загрузку приложения.

Подключение локалей

Для использования локалей в Quasar необходимо импортировать объект Quasar.lang. Каждый язык представлен отдельным модулем, например:

import { Quasar } from 'quasar'
import enUS from 'quasar/lang/en-US'
import ruRU from 'quasar/lang/ru-RU'

Quasar.lang.set(enUS)

При стандартном подходе все локали подключаются заранее, что увеличивает размер сборки. Lazy loading позволяет импортировать их динамически.

Динамический импорт локалей

Quasar поддерживает использование import() для динамической загрузки локалей:

async function loadLocale(locale) {
  const langModule = await import(
    /* webpackChunkName: "quasar-lang-[request]" */ `quasar/lang/${locale}`
  )
  Quasar.lang.set(langModule.default)
}

Здесь locale — это строка с идентификатором языка, например 'ru-RU' или 'en-US'. Данный подход создает отдельный чанк для каждого языка, который загружается только при вызове функции.

Интеграция с Vue i18n

Quasar часто используется совместно с vue-i18n. Для динамической загрузки переводов можно объединить локали Quasar и пользовательские строки:

import { createI18n } from 'vue-i18n'
import { Quasar } from 'quasar'

const i18n = createI18n({
  locale: 'en-US',
  messages: {} 
})

async function setLocale(locale) {
  const [quasarLang, appMessages] = await Promise.all([
    import(`quasar/lang/${locale}`).then(m => m.default),
    import(`./locales/${locale}.json`).then(m => m.default)
  ])

  Quasar.lang.set(quasarLang)
  i18n.global.setLocaleMessage(locale, appMessages)
  i18n.global.locale.value = locale
}

Такой подход позволяет централизованно управлять переводами интерфейса и текстов приложения, минимизируя размер первоначального бандла.

Работа с компонентами Quasar

Некоторые компоненты Quasar, такие как QDate, QTime, QSelect, используют локаль для отображения дат, времени и текста интерфейса. После динамической загрузки локали их поведение автоматически обновляется:

await loadLocale('ru-RU')

После выполнения локаль применяется глобально, и все компоненты, зависящие от языка, будут корректно отображать переводы.

Оптимизация загрузки

Для больших проектов рекомендуется хранить список доступных локалей и загружать их по требованию. Например:

const availableLocales = ['en-US', 'ru-RU', 'fr-FR']

async function switchLocale(locale) {
  if (!availableLocales.includes(locale)) return
  await loadLocale(locale)
}

Использование /* webpackChunkName: "quasar-lang-[request]" */ позволяет Webpack генерировать отдельные чанки с понятными именами, что упрощает отладку и кэширование.

Особенности и подводные камни

  1. Асинхронность: После вызова import() компоненты, использующие локаль, могут требовать перерисовки или реактивного обновления.
  2. Совместимость с SSR: В серверной рендеринге динамическая загрузка требует специальной настройки, чтобы язык был доступен до рендеринга страницы.
  3. Кэширование: Браузер автоматически кэширует загруженные чанки, что ускоряет последующие переключения языков.
  4. Fallback: Рекомендуется предусмотреть язык по умолчанию на случай ошибки загрузки или отсутствия нужной локали.

Пример полного решения

import { Quasar } from 'quasar'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en-US',
  messages: {}
})

const availableLocales = ['en-US', 'ru-RU']

async function setLocale(locale) {
  if (!availableLocales.includes(locale)) return

  const [quasarLang, messages] = await Promise.all([
    import(`quasar/lang/${locale}`).then(m => m.default),
    import(`./locales/${locale}.json`).then(m => m.default)
  ])

  Quasar.lang.set(quasarLang)
  i18n.global.setLocaleMessage(locale, messages)
  i18n.global.locale.value = locale
}

export { i18n, setLocale }

Такой подход обеспечивает минимальный первоначальный бандл, централизованное управление переводами и полную совместимость с компонентами Quasar, использующими локаль.

Оглавление