Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI
Содержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомЕсли у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHubКопировать Markdown документа в буфер обмена
vue-i18n VS Intlayer | Бенчмарк интернационализации Vue (i18n)
vue-i18n — справочная библиотека i18n для Vue. Intlayer — альтернатива на основе компилятора с областью действия компонента и интеграцией Vue (vue-intlayer). Мы уже сравнивали их функции и опыт разработчика. Эта статья рассматривает, во что обходится каждый из них после сборки приложения.
Данные получены из Benchmark Bloom, открытого набора, который собирает одно и то же приложение с каждой библиотекой и записывает то, что браузер фактически загружает и выполняет.
tl;dr: На том же приложении Vite + Vue 3vue-i18nотправляет 134.9 KB сжатого JavaScript на страницу по сравнению с 41.3 KB для приложения без i18n. Intlayer отправляет 57.1 KB. Сам runtimevue-i18nвесит 24.3 KB gzip (в 6 раз больше, чем 3.9 KB Intlayer), каждая страница содержит 90% строк иностранных страниц, и компонент, скомпилированный в изоляции, притягивает 196 KB, потому что он привязан к глобальному дереву сообщений. Адаптер@intlayer/vue-i18nсохраняет APIvue-i18nи измеряется 47.0 KB на страницу.
Вкратце
- vue-i18n - Библиотека i18n де-факто для Vue 2 / Vue 3 и ядро
@nuxtjs/i18n. ICU-style сообщения, SFC блоки<i18n>, директиваv-t, форматерыd()/n(), большая экосистема. Сообщения регистрируются на глобальном экземпляре вcreateI18n(); ленивая загрузка по локали — это ручной паттернsetLocaleMessage(), а разделение по маршрутам вы строите сами. - Intlayer - Компонент-центричная модель контента. Словари
.content.tsнаходятся рядом с компонентом, который они обслуживают, компилятор времени сборки (vite-intlayer) удаляет неиспользуемый код и выполняет ленивую загрузку по компоненту и по локали, строгие типы TypeScript генерируются из вашего контента, и отсутствующие переводы приводят к ошибке на этапе сборки. Поставляется с помощниками маршрутизатора / SEO, Visual Editor / CMS и AI-ассистентом перевода.
Открыть таблицу в модальном окне для четкого просмотра всех данных
| Библиотека | GitHub звёзд | Всего коммитов | Последний коммит | Первая версия | NPM версия | Загрузки NPM |
|---|---|---|---|---|---|---|
aymericzip/intlayer |  |  |  | Апрель 2024 |  |  |
intlify/vue-i18n |  |  |  | Дек 2016 |  |  |
Значки обновляются автоматически. Снимки будут отличаться со временем.
Сравнение функций рядом
Открыть таблицу в модальном окне для четкого просмотра всех данных
| Функция | vue-intlayer (Intlayer) | vue-i18n |
|---|---|---|
| Переводы рядом с компонентами | ✅ Да, .content.ts расположен вместе с каждым компонентом | ✅ Через блоки SFC <i18n> (опционально); глобальные каталоги — это обычная настройка |
| Интеграция TypeScript | ✅ Строгие типы автоматически генерируются из контента | ✅ Хорошая типизация; строгая безопасность ключей требует типизации схемы и дисциплины |
| Обнаружение отсутствующих переводов | ✅ Ошибка TypeScript + ошибка/предупреждение во время сборки | ⚠️ Fallback во время выполнения + предупреждение в консоли |
| Богатое содержимое (компоненты / Markdown) | ✅ Прямая поддержка | ⚠️ Интерполяция компонента <i18n-t>; Markdown через внешние плагины |
| Поддержка ICU | ⚠️ WIP | ✅ Да |
Комментарии
Пока нет комментариев. Будьте первым, кто поделится своими мыслями.