Typed Locale

Lazy Translator

Temps de lecture estimé: 3 minutes

Le Lazy Translator est une fonctionnalité de typed-locale qui vous permet de charger les traductions à la demande, ce qui peut être particulièrement utile pour les grandes applications ou lorsque vous souhaitez optimiser le temps de chargement initial de votre app.

Implémentation

Le lazy translator est implémenté à l'aide de la fonction createLazyTranslator. Cette fonction prend deux paramètres :

  1. Une fonction de lazy load qui récupère les traductions
  2. Un objet optionnel de traductions initiales

Voici comment vous pouvez implémenter un lazy translator :

import {createLazyTranslator, LazyLoadFunction} from 'typed-locale'; const lazyLoadFn: LazyLoadFunction = async (paths: string[]) => { // Implémentez votre logique de lazy loading ici // Cela pourrait être un appel API ou un chargement depuis un fichier local const translation = await fetchTranslation(paths); return translation; }; const initialTranslations = { // Optionnel : Ajoutez les traductions initiales que vous voulez avoir disponibles immédiatement }; const lazyTranslator = createLazyTranslator(lazyLoadFn, initialTranslations);

Utilisation

Vous pouvez utiliser le lazy translator de manière similaire au translator régulier, mais il renvoie une Promise qui se résout en une chaîne traduite :

const translatedText = await lazyTranslator(t => t.hello); console.log(translatedText); // 'Hello' const translatedTextWithName = await lazyTranslator(t => t.helloName({name: 'World'})); console.log(translatedTextWithName); // 'Hello, World'

Mise en cache

Le lazy translator met automatiquement en cache les traductions chargées, de sorte que les requêtes ultérieures pour la même clé ne déclencheront pas de lazy loading supplémentaire. Ce mécanisme de caching est implémenté dans la fonction loadTranslations :

Avantages

  1. Réduction du temps de chargement initial : En chargeant les traductions à la demande, vous pouvez réduire considérablement le temps de chargement initial de votre application, en particulier pour les grands ensembles de traductions.

  2. Efficacité mémoire : Seules les traductions effectivement utilisées sont chargées en mémoire, ce qui peut être bénéfique pour les environnements à mémoire limitée.

  3. Flexibilité : Vous pouvez implémenter une logique de chargement personnalisée, vous permettant de récupérer les traductions à partir de diverses sources (par exemple, API, stockage local, fichiers).

  4. Sécurité de type : Bien que chargées paresseusement, le translator maintient une sécurité de type complète, garantissant que vous utilisez les bonnes clés de traduction et variables.

Considérations

Bien que le lazy loading puisse être bénéfique, il est important de considérer les compromis :

  1. Requêtes réseau : Chaque lazy load peut entraîner une requête réseau, ce qui pourrait impacter les performances si ce n'est pas géré correctement.

  2. Complexité : L'implémentation du lazy loading ajoute une certaine complexité à votre application, qui peut ne pas être nécessaire pour les projets plus petits.

  3. Expérience utilisateur : Il peut y avoir un léger délai lors de l'accès aux traductions pour la première fois, ce qui pourrait affecter l'expérience utilisateur si ce n'est pas géré correctement (par exemple, avec des indicateurs de chargement).

En comprenant ces considérations, vous pouvez prendre une décision éclairée quant à l'utilisation du lazy translator dans votre projet.