Optimisation

Performances

Comme décrit dans la section "Différents fichiers de distribution", Vue I18n propose les deux modules ES intégrés suivants pour le bundler.

• compilateur de messages + runtime : vue-i18n.esm-bundler.js
• runtime uniquement : vue-i18n.runtime.esm-bundler.js

Pour le bundler, il est configuré pour empaqueter vue-i18n.esm-bundler.js avec @intlify/unplugin-vue-i18n par défaut. Si vous souhaitez réduire davantage la taille du bundle, vous pouvez configurer le bundler pour utiliser vue-i18n.runtime.esm-bundler.js, qui est uniquement runtime.

L'utilisation du module ES vue-i18n.runtime.esm-bundler.js signifie que tous les messages locaux doivent être précompilés en fonctions de message ou ressources AST. Cela signifie que cela améliore les performances car vue-i18n n'exécute que des fonctions de message, donc pas de compilation.

NOTE

Avant v9.3, les messages locaux seront compilés en fonctions de message, après v9.3 ou version ultérieure, ceux-ci seront compilés en AST avec @intlify/bundle-tools.

NOTE

Avant v9.3, tous les messages locaux sont compilés avec @intlify/unplugin-vue-i18n, donc le compilateur de messages n'est pas empaqueté, la taille du bundle peut être réduite.

Après v9.3, puisque le compilateur de messages est également empaqueté, la taille du bundle ne peut pas être réduite. C'est un compromis. À propos de la raison, voir Compilation JIT pour plus de détails.

NOTE

Si CSP est activé avant v9.3, vue-i18n.esm-bundler.js ne fonctionnera pas avec le compilateur en raison des instructions eval. Ces instructions violent l'en-tête default-src 'self'. Vous devez plutôt utiliser vue-i18n.runtime.esm-bundler.js.

NOTICE

À partir de v9.3, le problème CSP peut être contourné par la compilation JIT du compilateur de messages vue-i18n. Voir Compilation JIT pour plus de détails.

Comment configurer

Nous pouvons configurer ces modules avec le chemin du module en utilisant la fonctionnalité d'alias de résolution de module (ex. resolve.alias vite et webpack) de certains bundlers, mais cela prend du temps et de l'effort. Le projet Intlify fournit des plugins/loaders pour certains bundlers, pour plus de simplicité

unplugin-vue-i18n

unplugin est un système de plugin unifié pour les outils de bundling tels que vite, webpack, rollup, esbuild etc.

Le projet Intlify fournit unplugin-vue-i18n pour vite et webpack.

Si vous effectuez une construction de production, Vue I18n empaquetera automatiquement le module runtime uniquement

Installer le 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

Configurer le plugin pour 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 */
      // option de pré-compilation des ressources de messages locaux
      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
    }),
  ],
})

Configurer le plugin pour webpack

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

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // option de pré-compilation des ressources de messages locaux
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}

Plus de configuration

À propos des options et fonctionnalités, voir la page détaillée ici

Quasar CLI

Aucune action nécessaire. Quasar CLI gère les optimisations pour vous.

Drapeaux de build des fonctionnalités

Réduire la taille du bundle avec l'arborescence

Les constructions esm-bundler exposent désormais des drapeaux de fonctionnalités globaux qui peuvent être remplacés au moment de la compilation :

• __VUE_I18N_FULL_INSTALL__ (activer/désactiver, en plus des API vue-i18n, composants et directives supportent entièrement l'installation : true)
• __VUE_I18N_LEGACY_API__ (activer/désactiver le support des API legacy de vue-i18n, valeur par défaut : true)

La construction fonctionnera sans configurer ces drapeaux, cependant il est fortement recommandé de les configurer correctement afin d'obtenir un arbre correct dans le bundle final.

À propos de la façon de configurer pour le bundler, voir ici.

Compilation JIT

Version prise en charge

🆕 9.3+

Avant v9.3, le compilateur de messages vue-i18n précompilait les messages locaux comme AOT (Ahead Of Time).

Cependant, cela présentait les problèmes suivants :

• Problèmes CSP : difficile à utiliser sur les workers de service/web, les runtimes côté edge des CDN etc.
• Intégration backend : difficile d'obtenir les messages depuis un backend tel que une base de données via API et les localiser dynamiquement

Pour résoudre ces problèmes, le compilateur de messages prend en charge la compilation de type JIT (Just In Time).

À chaque fois que la localisation est effectuée dans une application utilisant les fonctions $t ou t, les ressources de message seront compilées par le compilateur de message.

Vous devez configurer les drapeaux de fonctionnalité suivants avec la construction esm-bundler et un bundler tel que vite :

• __INTLIFY_JIT_COMPILATION__ (activer/désactiver le compilateur de messages pour le style JIT, valeur par défaut : false)
• __INTLIFY_DROP_MESSAGE_COMPILER__ (activer/désactiver si l'on doit faire l'arbre du compilateur de messages lors de l'empaquetage, ce drapeau fonctionne lorsque __INTLIFY_JIT_COMPILATION__ est activé. valeur par défaut : false)

NOTICE

Cette fonctionnalité est désactivée par défaut, en raison de la compatibilité avec la version précédente avant v9.3.

NOTICE

À partir de v10, la compilation JIT est activée par défaut, donc il n'est plus nécessaire de définir le drapeau __INTLIFY_JIT_COMPILATION__ dans le bundler.

À propos de la façon de configurer pour le bundler, voir ici.

Configurer les drapeaux de fonctionnalités pour le bundler

• webpack : utiliser DefinePlugin
• Rollup : utiliser @rollup/plugin-replace
• Vite : configuré par défaut, mais peut être remplacé en utilisant l'option define
• Quasar CLI : configuré par défaut, mais peut être remplacé en utilisant quasar.conf.js > build > rawDefine

NOTE

La valeur de remplacement doit être des littéraux booléens et ne peut pas être des chaînes de caractères, sinon le bundler/minifier ne pourra pas évaluer correctement les conditions.

Traductions préalables avec les extensions

Vous pouvez utiliser la prédiction (rendu côté serveur) avec le package vue-i18n-extensions.

À propos de l'utilisation, voir ici.

SSR (Rendu côté serveur)

Configurer le plugin pour SSR

Pour les applications SSR, vous devez configurer l'option ssr dans @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, // Activer le support SSR
    }),
  ],
})