Saltar al contenido principal

Uso Avanzado

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

react-intl está optimizado tanto para renderizado en tiempo de ejecución como de compilación. A continuación, algunas pautas que puedes seguir si tienes un presupuesto estricto de rendimiento.

Precompilación de mensajes​

También puedes precompilar todos los mensajes en AST usando el comando compile de @formatjs/cli y pasarlos a IntlProvider. Esto es especialmente rápido porque evita el análisis de string a AST. Los casos de uso son:

  1. Renderizado del lado del servidor o precompilación donde puedes almacenar en caché el AST y evitar costos de compilación múltiples.

  2. Aplicaciones de escritorio con Electron o CEF donde puedes precargar/precompilar anticipadamente antes del tiempo de ejecución.

Caché

Como este enfoque usa AST como fuente de datos, los cambios en el AST de @formatjs/icu-messageformat-parser requerirán invalidar la caché.

Tamaño de recursos

El AST también es ligeramente más grande que los mensajes string normales, pero se puede comprimir eficientemente.

react-intl sin analizador (40% más pequeño)​

Si has asegurado que todos tus mensajes y defaultMessages están precompilados como arriba, puedes reemplazar @formatjs/icu-messageformat-parser por @formatjs/icu-messageformat-parser/no-parser durante el empaquetado para obtener un bundle mucho más pequeño (~40% menos). Por ejemplo:

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

En el futuro, orientaremos esto como comportamiento predeterminado.

APIs imperativas​

Las APIs imperativas (ej. formatMessage...) son generalmente más rápidas que el componente Formatted porque no crean nodos ReactElement adicionales. Deben tener exactamente las mismas capacidades que los componentes Formatted.

Más ejemplos​

Visita https://github.com/formatjs/formatjs/tree/main/packages/react-intl/examples para más ejemplos de cómo usar nuestras bibliotecas.