Интернационализация

Интернационализация - это сложная проблема. Qwik не решает проблему интернационализации напрямую, вместо этого он лишь предоставляет низкоуровневые API, позволяющие другим библиотекам решить её.

Сравнение переводов во время выполнения и на этапе компиляции

На верхнем уровне проблема перевода может быть решена двумя способами:

• Во время выполнения: загрузить карту переводов и просматривать её.
• На этапе компиляции: встраивать переводы в поток вывода.

Оба вышеупомянутых подхода имеют компромиссы, которые следует принимать во внимание.

Преимущества подходов, использующих время выполнения, следующие:

• Простота. Не требует дополнительного этапа сборки.

Недостатками подхода, основанного на времени выполнения, являются:

• Каждая строка представлена в трёх экземплярах:
  1. Как исходная строка в коде;
  2. В качестве ключа в карте перевода;
  3. В качестве переведённого значения в карте перевода.
• Инструменты не знают, как разбить карту перевода, поэтому при запуске приложения вся карта перевода должна сразу же загружаться. Это проблема, потому что она сводит на нет усилия, которые Qwik приложил для разбиения и ленивой загрузки вашей кодовой базы. Кроме того, поскольку карты переводов не разбиты на части, браузер будет загружать ненужные переводы. Например, переводы для статических компонентов, которые никогда не будут повторно отображаться на клиенте.
• Поиск перевода требует затрат времени на выполнение.

Преимущества подходов, использующих время компиляции, следующие:

• Ленивая загрузка кода в Qwik теперь распространяется и на ленивую загрузку строк перевода (не загружается ненужный текст перевода);
• Отсутствие карты перевода во время выполнения означает, что строки не утраиваются.

Недостатками подходов, использующих время компиляции, являются:

• Дополнительный этап при сборке приложения;
• Для смены языка требуется перезагрузка страницы.

Рекомендация

Учитывая вышесказанное, Qwik рекомендует использовать инструмент, который наилучшим образом соответствует вашим ограничениям. Чтобы помочь вам принять решение, есть три различных плоскости для рассмотрения: браузер, сервер и разработка.

Браузер

Цель Qwik - обеспечить наилучший пользовательский опыт. Это достигается за счёт откладывания загрузки кода на более поздний срок, чтобы не перегружать производительность при начальном запуске. Поскольку подход, основанный на времени выполнения, требует нетерпеливой загрузки всех переводов, мы не рекомендуем использовать этот подход. Мы считаем, что для браузера лучше всего подходит подход, основанный на компиляции.

Сервер

Сервер не имеет ограничений, связанных с ленивой загрузкой. По этой причине сервер может использовать либо исполняемый, либо компилируемый подход. Недостатком компилируемого подхода на сервере является то, что для каждого языка перевода необходимо отдельное развёртывание. Это усложняет процесс развёртывания, а также повышает требования к количеству серверов. По этой причине мы считаем, что на сервере предпочтительнее использовать подход, основанный на времени выполнения.

Разработка

Во время разработки меньшее количество этапов сборки приведёт к ускорению процесса. По этой причине перевод во время выполнения должен привести к упрощению рабочего процесса разработки.

Наша рекомендация

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

Библиотеки интернационализации

$localize

$localize - система перевода, основанная на системе $localize из Angular. Переводы можно извлечь из файлов в форматах xmb, xlf, xlif, xliff, xlf2, xlif2, xliff2 и json.

ПРИМЕЧАНИЕ. Система $localize представляет собой систему перевода времени компиляции и полностью удалена из конечного вывода. $localize — это подпроект Angular, и его использование не означает, что Angular используется для рендера приложений.

Самый простой способ добавить $localize в Qwik — использовать команду pnpm qwik add localize. Это установит необходимые зависимости и создаст новый общедоступный маршрут /src/routes/[locale], демонстрирующий интеграцию i18n $localize.

npm run qwik add localize

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

Извлечение переводов

Когда вы закончите вносить изменения, вы можете использовать npm run i18n-extract для извлечения переводов из кода. Эта команда обновит файл, который вы видите в package.json.

Автопереводы для $localize с помощью deepl

Для автоперевода можно использовать пакет deepl-localize. Он автоматически переведёт ваши строки, используя API deepl.com.

Для перевода строк с помощью npx используйте команду deepl-localize:

npx deepl-localize translate -b src/locales/message.en.json -l de-DE fr-FR -a "YOUR-DEEPL-API-KEY"

В качестве альтернативы можно использовать команду deepl-localize для перевода строк в секции скрипта:

{
  "scripts":{
    "translate":"deepl-localize translate -b src/locales/message.en.json -l de-DE fr-FR -a 'your-deepl-api-key'"
  }
}

qwik-speak

Библиотека qwik-speak для перевода текста, дат и чисел в приложениях Qwik.

Самый простой способ добавить qwik-speak в Qwik — следовать официальному руководству.