Оптимизация

Производительность

Как описано в разделе "Различные файлы распространения", Vue I18n предлагает следующие два встроенных ES модуля для Bundler.

• компилятор сообщений + среда выполнения: vue-i18n.esm-bundler.js
• только среда выполнения: vue-i18n.runtime.esm-bundler.js

Для bundler по умолчанию используется vue-i18n.esm-bundler.js с @intlify/unplugin-vue-i18n. Если вы хотите дополнительно уменьшить размер бандла, вы можете настроить bundler использовать vue-i18n.runtime.esm-bundler.js, который содержит только среду выполнения.

Использование ES Module vue-i18n.runtime.esm-bundler.js означает, что все локальные сообщения должны быть предварительно скомпилированы в функции сообщений или ресурсы AST. Это означает, что производительность улучшается, потому что vue-i18n выполняет только функции сообщений, без необходимости компиляции.

ПРИМЕЧАНИЕ

Перед версией v9.3 локальные сообщения компилировались в функции сообщений, после версии v9.3 или позднее они компилируются в AST с использованием @intlify/bundle-tools.

ПРИМЕЧАНИЕ

Перед версией v9.3 все локальные сообщения компилировались с помощью @intlify/unplugin-vue-i18n, поэтому компилятор сообщений не входит в бандл, размер бандла может быть уменьшен.

После версии v9.3, поскольку компилятор сообщений также входит в бандл, размер бандла не может быть уменьшен. Это компромисс. О причине см. JIT компиляция подробнее.

ПРИМЕЧАНИЕ

Если в версии до v9.3 включена CSP, vue-i18n.esm-bundler.js не будет работать с компилятором из-за инструкций eval. Эти инструкции нарушают заголовок default-src 'self'. Вместо этого необходимо использовать vue-i18n.runtime.esm-bundler.js.

УВЕДОМЛЕНИЕ

Начиная с версии v9.3 проблему CSP можно обойти при помощи JIT компиляции компилятора сообщений vue-i18n. См. JIT компиляция подробнее.

Как настроить

Мы можем настроить эти модули с использованием пути к модулю через функцию псевдонимов разрешения модулей (например, resolve.alias в vite и webpack) некоторого bundler, но это занимает время и усилия. Проект Intlify предоставляет плагины/загрузчики для некоторых bundler'ов, для простоты

unplugin-vue-i18n

unplugin — это унифицированная система плагинов для инструментов сборки, таких как vite, webpack, rollup, esbuild и т. д.

Проект Intlify предоставляет unplugin-vue-i18n для vite и webpack.

Если вы делаете продакшн сборку, Vue I18n автоматически собирает модуль только среды выполнения

Установка плагина

npm

npm install @intlify/unplugin-vue-i18n -D

yarn

yarn add @intlify/unplugin-vue-i18n -D

pnpm

pnpm add -D @intlify/unplugin-vue-i18n

Настройка плагина для vite

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // параметр предварительной компиляции ресурсов локальных сообщений
      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
    }),
  ],
})

Настройка плагина для webpack

// webpack.config.js
const path = require('path')
const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack')

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // параметр предварительной компиляции ресурсов локальных сообщений
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}

Дополнительная настройка

Опции и функции, см. страницу деталей

Quasar CLI

Ничего делать не нужно. Quasar CLI позаботится об оптимизациях за вас.

Флаги сборки функций

Уменьшение размера бандла с помощью tree-shaking

Сборки esm-bundler теперь предоставляют глобальные флаги функций, которые могут быть переопределены во время компиляции:

• __VUE_I18N_FULL_INSTALL__ (включено/выключено, кроме API vue-i18n, компоненты и директивы полностью поддерживают установку: true)
• __VUE_I18N_LEGACY_API__ (включено/выключено, поддержка API старого стиля vue-i18n, по умолчанию: true)

Сборка будет работать без настройки этих флагов, однако настоятельно рекомендуется правильно их настроить, чтобы получить правильный tree-shaking в финальном бандле.

Как настроить для bundler, см. здесь.

JIT компиляция

Версия поддержки

🆕 9.3+

Перед версией v9.3 компилятор сообщений vue-i18n предварительно компилировал локальные сообщения в AOT ( Ahead Of Time).

Однако у него были следующие проблемы:

• Проблемы CSP: сложно работать с сервисными/веб-воркерами, edge-рантаймами CDN и т. д.
• Интеграция с бэкендом: сложно получать сообщения из бэкенда, например баз данных через API и динамически локализовать их

Чтобы решить эти проблемы, поддерживается компилятор сообщений в стиле JIT (Just In Time).

Каждый раз, когда выполняется локализация в приложении с использованием функций $t или t, ресурсы сообщений будут компилироваться в компиляторе сообщений.

Вам нужно настроить следующий флаг функции с esm-bundler сборкой и bundler, таким как vite:

• __INTLIFY_JIT_COMPILATION__ (включить/выключить компилятор сообщений для JIT стиля, по умолчанию: false)
• __INTLIFY_DROP_MESSAGE_COMPILER__ (включить/выключить, нужно ли убирать компилятор сообщений при сборке, этот флаг работает, когда __INTLIFY_JIT_COMPILATION__ включен. по умолчанию: false)

УВЕДОМЛЕНИЕ

Эта функция отключена по умолчанию, так как совместимость с предыдущими версиями до v9.3.

УВЕДОМЛЕНИЕ

Начиная с версии v10 JIT компиляция включена по умолчанию, поэтому больше не нужно устанавливать флаг __INTLIFY_JIT_COMPILATION__ в bundler.

Как настроить для bundler, см. здесь.

Настройка флагов функций для bundler

• webpack: использовать DefinePlugin
• Rollup: использовать @rollup/plugin-replace
• Vite: настроен по умолчанию, но может быть переопределен с использованием define опции
• Quasar CLI: настроен по умолчанию, но может быть переопределен с использованием quasar.conf.js > build > rawDefine

ПРИМЕЧАНИЕ

Значение замены должно быть логическими литералами, а не строками, иначе bundler/minifier не сможет должным образом оценить условия.

Предварительные переводы с расширениями

Вы можете использовать предварительный перевод (рендеринг на сервере) с помощью пакета vue-i18n-extensions.

О том, как использовать, см. здесь.

SSR (рендеринг на стороне сервера)

Настройка плагина для SSR

Для приложений SSR вам нужно настроить опцию ssr в @intlify/unplugin-vue-i18n:

// vite.config.ts
import { defineConfig } from 'vite'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  plugins: [
    VueI18nPlugin({
      ssr: true, // Включение поддержки SSR
    }),
  ],
})