Chargement paresseux

Charger tous vos fichiers de localisation en même temps est excessif et inutile.

Le chargement paresseux ou le chargement asynchrone des fichiers de localisation est très facile lorsque vous utilisez un bundler.

Supposons que nous ayons un répertoire de projet similaire à celui-ci :

├── dist
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   ├── i18n.js
│   ├── index.css
│   ├── locales
│   │   ├── en.json
│   │   └── ja.json
│   ├── main.js
│   ├── pages
│   │   ├── About.vue
│   │   └── Home.vue
│   └── router.js

Le dossier pages contient nos fichiers de composants Vue arbitraires comme About.vue, les initialisations du routeur, les initialisations i18n et autres. Le dossier locales est l'emplacement de tous nos fichiers de localisation, et dans i18n.js, les fonctions pour le traitement lié à i18n sont définies comme suit :

import { nextTick } from 'vue'
import { createI18n } from 'vue-i18n'

export const SUPPORT_LOCALES = ['en', 'ja']

export function setupI18n(options = { locale: 'en' }) {
  const i18n = createI18n(options)
  setI18nLanguage(i18n, options.locale)
  return i18n
}

export function setI18nLanguage(i18n, locale) {
  if (i18n.mode === 'legacy') {
    i18n.global.locale = locale
  } else {
    i18n.global.locale.value = locale
  }
  /**
   * NOTE :
   * Si vous devez spécifier le paramètre de langue pour les en-têtes, comme l'API `fetch`, définissez-le ici.
   * L'exemple suivant concerne axios.
   *
   * axios.defaults.headers.common['Accept-Language'] = locale
   */
  document.querySelector('html').setAttribute('lang', locale)
}

export async function loadLocaleMessages(i18n, locale) {
  // charger les messages de localisation avec import dynamique
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  )

  // définir la locale et les messages de localisation
  i18n.global.setLocaleMessage(locale, messages.default)

  return nextTick()
}

Les trois fonctions suivantes sont exportées :

• setupI18n
• setI18nLanguage
• loadLocaleMessages

TIP

Cet exemple de code montre également comment gérer cela en dehors du composant en utilisant la propriété global de l'instance i18n. À propos de l'instance i18n, voir la Référence de l'API

La fonction setupI18n prend les mêmes options que createI18n, crée une instance i18n avec ces options, exécute la fonction setI18nLanguage et retourne l'instance i18n.

La fonction setI18nLanguage définit la langue en définissant la locale du paramètre i18n à la valeur du paramètre locale. De plus, cette fonction permet de définir l'attribut lang du document HTML à la valeur du paramètre locale. Comme indiqué dans les commentaires, comme le client HTTP, vous pouvez également définir la langue.

La fonction loadLocaleMessages est ce que nous utiliserons effectivement pour changer les langues. Le chargement des nouveaux fichiers se fait via la fonction import, fournie généreusement par webpack, ce qui nous permet de charger des fichiers de manière dynamique, et puisque celle-ci utilise des promesses, nous pouvons facilement attendre la fin du chargement.

Vous pouvez en savoir plus sur la fonction import dans la documentation webpack.

Utiliser la fonction loadLocaleMessages est simple. Un cas d'utilisation courant est à l'intérieur d'un hook beforeEach de vue-router.

Voici le code pour la partie beforeEach de vue-router dans router.js :

  // gardes de navigation
  router.beforeEach(async (to, from, next) => {
    const paramsLocale = to.params.locale

    // utiliser la locale si paramsLocale n'est pas dans SUPPORT_LOCALES
    if (!SUPPORT_LOCALES.includes(paramsLocale)) {
      return next(`/${locale}`)
    }

    // charger les messages de localisation
    if (!i18n.global.availableLocales.includes(paramsLocale)) {
      await loadLocaleMessages(i18n, paramsLocale)
    }

    // définir la langue i18n
    setI18nLanguage(i18n, paramsLocale)

    return next()
  })