Optimización

Rendimiento

Como se describe en la sección "Archivos de distribución diferentes", Vue I18n ofrece los siguientes dos módulos ES integrados para el empaquetador.

• compilador de mensajes + tiempo de ejecución: vue-i18n.esm-bundler.js
• solo tiempo de ejecución: vue-i18n.runtime.esm-bundler.js

Para empaquetadores, está configurado para empaquetar vue-i18n.esm-bundler.js con @intlify/unplugin-vue-i18n por defecto. Si quieres reducir aún más el tamaño del paquete, puedes configurar el empaquetador para usar vue-i18n.runtime.esm-bundler.js, que es solo tiempo de ejecución.

El uso del módulo ES vue-i18n.runtime.esm-bundler.js significa que todos los mensajes locales deben precompilarse a funciones de mensaje o recursos AST. Lo que eso significa, es que mejora el rendimiento porque vue-i18n solo ejecuta funciones de mensaje, por lo tanto no hay compilación.

NOTA

Antes de v9.3, los mensajes locales serán compilados a funciones de mensaje, después de v9.3 o posterior estos se compilarán a AST con @intlify/bundle-tools.

NOTA

Antes de v9.3, todos los mensajes locales se compilan con @intlify/unplugin-vue-i18n, así que el compilador de mensajes no se empaqueta, el tamaño del paquete puede reducirse.

Después de v9.3, ya que el compilador de mensajes también se empaqueta, el tamaño del paquete no puede reducirse. Esto es un compromiso. Sobre la razón, ver Compilación JIT para detalles.

NOTA

Si CSP está habilitado antes de v9.3, vue-i18n.esm-bundler.js no funcionará con el compilador debido a las sentencias eval. Estas sentencias violan el encabezado default-src 'self'. En su lugar necesitas usar vue-i18n.runtime.esm-bundler.js.

AVISO

Desde v9.3, el problema de CSP puede evitarse mediante la compilación JIT del compilador de mensajes de vue-i18n. Ver Compilación JIT para detalles.

Cómo configurar

Podemos configurar estos módulos con la ruta del módulo usando la función de alias de resolución de módulo (por ejemplo, resolve.alias en vite y webpack) de algunos empaquetadores, pero esto lleva tiempo y esfuerzo. El proyecto Intlify proporciona plugins/cargadores para algunos empaquetadores, por simplicidad

unplugin-vue-i18n

unplugin es un sistema de plugin unificado para herramientas de empaquetado como vite, webpack, rollup, esbuild y otras.

El proyecto Intlify está proporcionando unplugin-vue-i18n para vite y webpack.

Si haces una construcción de producción, Vue I18n empaquetará automáticamente el módulo de solo tiempo de ejecución

Instalar plugin

npm

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

yarn

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

pnpm

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

Configurar plugin para 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 */
      // opción de precompilación de recursos de mensajes locales
      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
    }),
  ],
})

Configurar plugin para webpack

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

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // opción de precompilación de recursos de mensajes locales
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}

Más configuraciones

Sobre opciones y características, ver la página detallada aquí

CLI de Quasar

No necesitas hacer nada. Quasar CLI se encarga de las optimizaciones por ti.

Indicadores de construcción de características

Reducir tamaño del paquete con tree-shaking

La compilación esm-bundler ahora expone banderas de características globales que pueden sobrescribirse en tiempo de compilación:

• __VUE_I18N_FULL_INSTALL__ (habilitar/deshabilitar, además de las API de vue-i18n, componentes y directivas tienen soporte completo de instalación: true)
• __VUE_I18N_LEGACY_API__ (habilitar/deshabilitar el soporte para APIs de estilo heredado de vue-i18n, por defecto: true)

La compilación funcionará sin configurar estas banderas, sin embargo se recomienda fuertemente configurarlas correctamente para obtener el árbol de eliminación adecuado en el paquete final.

Sobre cómo configurar para empaquetador, ver aquí.

Compilación JIT

Versión compatible

🆕 9.3+

Antes de v9.3, el compilador de mensajes de vue-i18n precompilaba mensajes locales como AOT (Anticipado).

Sin embargo, tenía los siguientes problemas:

• Problemas de CSP: difícil de trabajar en workers de servicio/web, tiempos de ejecución en el lado borde de CDNs y otros.
• Integración con backend: difícil de obtener mensajes desde el backend como base de datos vía API y localizarlos dinámicamente

Para resolver estos problemas, se admite el compilador de mensajes con estilo JIT (Just In Time).

Cada vez que se realiza la localización en una aplicación usando funciones $t o t, los recursos de mensaje se compilarán en el compilador de mensajes.

Necesitas configurar las siguientes banderas de características con la compilación esm-bundler y empaquetador como vite:

• __INTLIFY_JIT_COMPILATION__ (habilitar/deshabilitar compilador de mensajes para estilo JIT, por defecto: false)
• __INTLIFY_DROP_MESSAGE_COMPILER__ (habilitar/deshabilitar si se hace tree-shaking del compilador de mensajes cuando se empaqueta, esta bandera funciona cuando __INTLIFY_JIT_COMPILATION__ está habilitada. por defecto: false)

AVISO

Esta característica está desactivada por defecto, debido a la compatibilidad con versiones anteriores antes de v9.3.

AVISO

Desde v10, la compilación JIT está habilitada por defecto, por lo tanto ya no es necesario establecer la bandera __INTLIFY_JIT_COMPILATION__ en el empaquetador.

Sobre cómo configurar para empaquetador, ver aquí.

Configurar banderas de características para empaquetador

• webpack: usar DefinePlugin
• Rollup: usar @rollup/plugin-replace
• Vite: configurado por defecto, pero puede sobrescribirse usando la opción define
• CLI de Quasar: configurado por defecto, pero puede sobrescribirse usando quasar.conf.js > build > rawDefine

NOTA

El valor de reemplazo debe ser literales booleanos y no pueden ser cadenas, de lo contrario el empaquetador/minificador no podrá evaluar correctamente las condiciones.

Traducciones previas con extensiones

Puedes usar traducción previa (renderizado del lado del servidor) con el paquete vue-i18n-extensions.

Sobre cómo usarlo, ver aquí.

SSR (Renderizado del lado del servidor)

Configurar plugin para SSR

Para aplicaciones SSR, necesitas configurar la opción ssr en @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, // Habilitar soporte SSR
    }),
  ],
})