Vai al contenuto principale

Utilizzo Avanzato

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

react-intl è ottimizzato sia per il rendering a runtime che in fase di compilazione. Ecco alcune linee guida da seguire se disponi di un budget di prestazioni particolarmente stringente.

Pre-compilazione dei messaggi​

Puoi pre-compilare tutti i messaggi in AST utilizzando il comando compile di @formatjs/cli e passarli a IntlProvider. Questo approccio è particolarmente veloce poiché evita il parsing da string a AST. I casi d'uso principali sono:

  1. Rendering lato server o pre-compilazione dove è possibile memorizzare l'AST evitando costi di compilazione ripetuti.

  2. Applicazioni desktop basate su Electron o CEF dove è possibile precaricare/precompilare elementi in anticipo prima dell'esecuzione.

Caching

Poiché questo approccio utilizza l'AST come sorgente dati, eventuali modifiche all'AST di @formatjs/icu-messageformat-parser richiederanno l'invalidamento della cache.

Dimensione degli asset

L'AST ha dimensioni leggermente superiori rispetto ai messaggi in formato string, ma può essere compresso efficientemente.

react-intl senza parser (40% più leggero)​

Se tutti i tuoi messaggi e defaultMessage sono precompilati come sopra, puoi sostituire @formatjs/icu-messageformat-parser con @formatjs/icu-messageformat-parser/no-parser durante il bundling per ottenere un bundle molto più piccolo (~40% in meno). Ad esempio:

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',
      },
    }),
  ],
}

In futuro puntiamo a rendere questo comportamento l'impostazione predefinita.

API imperative​

Le API imperative (es. formatMessage) sono generalmente più performanti del componente Formatted poiché non creano nodi ReactElement aggiuntivi. Offrono esattamente le stesse funzionalità dei componenti Formatted.

Altri esempi​

Consulta https://github.com/formatjs/formatjs/tree/main/packages/react-intl/examples per ulteriori esempi sull'utilizzo delle nostre librerie.