Кастомная i18n

Распространенный пакет для интернационализации веб приложений i18next сильно раздут и содержит много редко используемого функционала.

В то же время перевод сайта на несколько языков без необходимости обработки чисел и родов можно провести самостоятельно, написав простой composable с реактивной функцией t().

#i18n #tip

Библиотека Google Translate предоставлял веб-разработчикам JavaScript SDK для установка переключателя языков и перевода своего сайта "на лету" с одного языка на другой. Качество было хуже кастомного перевода, но позволяло быстро сделать хоть какую-то поддержку нескольких языков на сайте. Четыре года назад Google от поддержки этой своей библиотеки отказался.

Тем не менее, остались пакеты, которые позволяют это делать через Google Translate API. Один из них с поддержкой Vue - google-translate-select.

#tip #google #i18n

Самое время узнать, за счет чего главная лендинговая статичная страница GitLab смогла набрать 13Мб в скриптах

На скриншоте бандлофобии разрезолвились не все пакеты

Первая тройка тяжеловесов:

1. @nuxtjs/i18n - 2.5Mb
2. slippers-ui (GitLab's Marketing Design System) - 1.8Mb
3. vue-mermaid-string (построение диаграмм) - 1.1Mb

#gitlab #optimization #nuxt #i18n

Немного OSINT-a в ленту.

Давайте еще поизучаем результаты исследования бандла лендинга GitLab, потому что это интересно и познавательно.

Первая тройка тяжеловесов:

1. @nuxtjs/i18n - 2.5Mb
2. slippers-ui (GitLab's Marketing Design System) - 1.8Mb
3. vue-mermaid-string (построение диаграмм) - 1.1Mb

На третьем месте хорошая библиотека для генерации налету диаграмм по тексту mairmaid . Я тоже хотел поставить её на Vue-FAQ, поставил, посмотрел насколько она просадила размер бандла и производительность в браузере, убрал и заменил генерацию налету на статичные заранее сгенеренные ею картинки ради UX.

На втором - slippers-ui, это гитлабовский относительно небольшой (20 компонент) UI kit. Без какого- либо тришейкинга и оптимизации, естественно. Очень много, с учетом того, что любая современная UI библиотека весит в несколько раз меньше.

Ну и победитель - то, за что так любят Nuxt. Это когда он берет что-то хорошее и делает его еще лучше. В этот раз он взял vue-i18n, естественно, для интернационализации.

Используя pkg-size.dev смотрим сперва на vue-i18n, отключив учет peer dependencies:

Install size: 2.8MB / 6 packages
Bundle size: 73KB minified (23KB gzip) / 9 modules

Очень неплохо для i18n библиотеки

То же с @nuxtjs/i18n:

Install size: 61MB / 239 packages
Bundle size: Не собрался (ошибки)

Error: Process exited with code 1
✘ [ERROR] No matching export in "node_modules/unicorn-magic/default.js" for import "toPath"

Bundlephobia тоже дала ошибки при сборке

Самая простая реализация i18n пишется в один composable. Но на Nuxt-e всё намного серьезней.

#nuxt #optimization #i18n #gitlab

В очередной раз делая i18n на Vue проекте, задумался - а зачем этому модулю (и функции t() в частности) реактивность? Неважно, стандартный это i18n-next или самописный.

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

Большинство сайтов направлены на определенную языковую аудиторию. Кроме того, можно определять по браузеру язык системы и автоматически в него переключаться в первый раз. То есть, процент тех, кто на сайте сменит язык какой - 1-2? И из-за одного их переключения должны тормозить все?

Напомню, что у монструозного лендинга GitLab основная зависимость в 13Mb скриптов именно i18n

Какие мысли по этому поводу?

#i18n #optimization

Описал, как с помощью AI можно быстро и качественно сделать интернационализацию сайт

На этом примере видно, как еще можно использовать AI кроме автокомплита.

Посвящается Денису Чернову

#ai #i18n #article

Автор русского перевода документации VitePress перевел и Vite документацию и просит сделать ревью его PR , чтобы его пропустили.

#vite #i18n

Написал vite-plugin-json-md

Заменяет в JSON/JSON5 файлах markdown на сконвертированный HTML

Удобен при i18n (интернационализации), когда текст перевода лежит в json файлах, но иногда бывает на странице сложное форматирование и разбивать по ключам очень хаотично. Можно записать тогда через markdown.

Обрабатывает как инлайн вставки markdown, так и ссылки на внешние md файлы

#lib #i18n #markdown

Переделал прошлый плагин, сделал его удобней и опиньонейтед - полностью под конкретный случай i18n

vite-plugin-i18n-json-md - берет JSON* файлы из директории локали, конвертирует markdown, если он там есть, объединяет всё в один и выводит в стандартный для i18n json, либо же в json5 или js формате. По желанию - минификация.

В конфиге указывается входная директория, выходная и локали.

import { i18nJsonMdPlugin } from "vite-plugin-i18n-json-md";

export default defineConfig({

  plugins: [
    vue(),
    i18nJsonMdPlugin({
      sourceDir: "src/app/locales",
      outputDir: "src/assets/i18n",
      locales: ["en", "ru", "gr"],
      mode: "dev",
      outputFormat: "json",
    }),
  ],

Переводы удобно держать в небольших файлах и переводить через AI - как целиком, так и автокомплитом. Добавил ключ с переводом в один файл, переходишь в аналогичный файл в другой локали - а он уже предлагает в нужном месте с нужным переводом вставить строку. Молодец.

#vite #i18n #lib

Подписчик поделился самописным расширением для VS Code — помогает быстро и безболезненно менеджерить локализацию в vue-i18n. Добавлять ключи, переводить на все языки (через AI), быстро обновлять существующие фразы... Короче, просто зацените демку.

Сейчас на стадии сбора фидбека и различных юз-кейсов. Кому интересно потыкать раннюю версию (бесплатно ofc), тут можно заполнить небольшую форму: https://tally.so/r/mDMv5b

Просит потестировать и покритиковать в комментариях

Лично я использую всегда самописную реализацию i18n, но расширение выглядит очень круто и использует AI именно так, как его надо использовать - незаметно, под капотом, значительно расширяя функционал приложения и сильно улучшая UX/DX. Мне такого не хватает, потому что приходится вручную ходить по json файлам и добавлять новый ключ, пусть даже и автокомплит это быстро делает за тебя.

#vscode #extension #i18n #lib