Aller au contenu principal

Utilisation avancée

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

react-intl est optimisé pour le rendu à la fois au runtime et au moment de la compilation. Voici quelques directives à suivre si vous avez un budget de performance strict.

Précompilation des messages​

Vous pouvez également précompiler tous vos messages en AST en utilisant la commande compile de @formatjs/cli et les transmettre à IntlProvider. Cette approche est particulièrement rapide car elle évite l'analyse de string en AST. Les cas d'usage concernés sont :

  1. Le rendu côté serveur ou la précompilation, où vous pouvez mettre en cache l'AST et éviter les coûts de compilation répétés.

  2. Les applications de bureau utilisant Electron ou CEF, où vous pouvez précharger/précompiler les éléments à l'avance avant l'exécution.

Mise en cache

Cette approche utilisant l'AST comme source de données, toute modification de l'AST de @formatjs/icu-messageformat-parser nécessitera une invalidation du cache.

Taille des ressources

L'AST est également légèrement plus volumineux que les messages sous forme de string, mais peut être efficacement compressé.

react-intl sans analyseur (40% plus léger)​

Si vous avez précompilé tous vos messages et defaultMessage comme ci-dessus, vous pouvez remplacer @formatjs/icu-messageformat-parser par @formatjs/icu-messageformat-parser/no-parser lors du bundling pour obtenir un bundle nettement plus léger (~40% de réduction). Exemple :

webpack.config.js​

module.exports = {
  //...
  resolve: {
    alias: {
      '@formatjs/icu-messageformat-parser':
        '@formatjs/icu-messageformat-parser/no-parser',
    },
  },
}

rollup.config.js​

import alias from '@rollup/plugin-alias'

module.exports = {
  //...
  plugins: [
    alias({
      entries: {
        '@formatjs/icu-messageformat-parser':
          '@formatjs/icu-messageformat-parser/no-parser',
      },
    }),
  ],
}

À l'avenir, nous envisageons d'en faire le comportement par défaut.

API impératives​

Les API impératives (ex: formatMessage...) sont généralement plus rapides que le composant Formatted car elles ne créent pas de nœuds ReactElement supplémentaires. Leurs capacités sont strictement identiques à celles des composants Formatted.

Plus d'exemples​

Consultez https://github.com/formatjs/formatjs/tree/main/packages/react-intl/examples pour davantage d'exemples d'utilisation de nos bibliothèques.