Ir para o conteúdo principal

Uso Avançado

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

O react-intl está otimizado para renderização em tempo de execução e de compilação. Abaixo estão algumas diretrizes que você pode seguir se tiver um orçamento de desempenho rigoroso.

Pré-compilação de mensagens​

Você também pode pré-compilar todas as mensagens em AST usando o comando compile do @formatjs/cli e passá-las para o IntlProvider. Isso é especialmente mais rápido porque evita o tempo de análise de string para AST. Os casos de uso para esse suporte são:

  1. Renderização do lado do servidor (SSR) ou pré-compilação onde você pode armazenar o AST em cache e não paga custos de compilação múltiplas vezes.

  2. Aplicativos desktop usando Electron ou CEF onde você pode pré-carregar/pré-compilar recursos antecipadamente antes do tempo de execução.

Cache

Como essa abordagem usa AST como fonte de dados, alterações no AST do @formatjs/icu-messageformat-parser exigirão invalidação de cache.

Tamanho do ativo

O AST também é ligeiramente maior em tamanho que mensagens regulares em string, mas pode ser compactado eficientemente.

react-intl sem analisador (40% menor)​

Se você garantiu que todas as suas mensagens e defaultMessages estão pré-compiladas conforme acima, você pode resolver @formatjs/icu-messageformat-parser para @formatjs/icu-messageformat-parser/no-parser durante o bundling para obter um pacote significativamente menor (~40% menos). Por exemplo:

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

No futuro, caminharemos para tornar esse comportamento padrão.

APIs imperativas​

APIs imperativas (ex: formatMessage...) geralmente são mais rápidas que o componente Formatted porque não criam nós extras de ReactElement. Elas devem ter exatamente as mesmas capacidades que os componentes Formatted.

Mais exemplos​

Acesse https://github.com/formatjs/formatjs/tree/main/packages/react-intl/examples para mais exemplos de como usar nossas bibliotecas.