После интеграции nuxt/i18n в несколько моих проектов я пришел к однозначному выводу: это, безусловно, лучшее i18n-решение для JS-фреймворков.

Его «plug&play» настройка, загрузка пространств имен (namespaces) и встроенная маршрутизация, настоящее удовольствие в работе.

Однако у этого решения есть серьезная проблема: загруженные пространства имен не подвергаются «тришейкингу» (tree-shaking).

Несмотря на то, что JSON-файлы могут загружаться динамически для каждой локали, Nuxt в итоге объединяет их, что означает, что файл locale/zh/about.json загружается на всех страницах.

Чтобы проиллюстрировать проблему: представьте приложение из 10 страниц, каждая из которых уникальна на 100%. В среднем 90% JSON-контента будет загружаться на каждой странице, хотя он никогда не будет отрисован на экране пользователя.

Чтобы избежать этого, можно динамически загружать каждый JSON-файл внутри потребляющих его компонентов. Но это быстро приводит к большому количеству шаблонного кода (boilerplate) и перегруженному синтаксису, что значительно замедляет разработку.

Я задумался над этой проблемой. Как загружать только тот контент, который действительно нужен нашим компонентам? И как избежать гидратации компонентов массивными JSON-пейлоадами?

Мое решение заключается в сочетании динамической загрузки на основе локали и этапа пост-трансформации, который удаляет неиспользуемый JSON-контент.

Вот документация. Мне было бы очень интересно услышать ваши отзывы:

-> https://intlayer.org/ru/doc/environment/nuxt-and-vue

Ключевые моменты:

• Строится на фундаменте модуля nuxt/i18n для такой же простой интеграции.

• Полная типобезопасность (Typesafe).

• Обеспечивает чистый способ разделения JSON-контента по компонентам (1 файл .vue = 1 файл .content.ts, который можно разместить в любом месте кодовой базы).

• Может использоваться с сохранением синтаксиса vue-i18n и централизованных JSON-файлов в папке /locale.

• Легко подключается к существующим приложениям Vue / Nuxt для улучшения управления JSON.

• Инструменты CLI / CI для обнаружения отсутствующих переводов.

• Расширение для VS Code.

• Контекстно-зависимые переводы с помощью ИИ (используется ваш собственный API-ключ, работает локально, без сбора данных).

• Включает экстрактор и компилятор, способные трансформировать тысячи компонентов за секунду.