Zum Hauptinhalt springen

Erweiterte Verwendung

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

react-intl ist für Rendering zur Laufzeit und Kompilierzeit optimiert. Nachfolgend finden Sie einige Richtlinien für strikte Performance-Anforderungen.

Vorabkompilierung von Nachrichten​

Sie können alle Nachrichten mit dem compile-Befehl von @formatjs/cli in AST vorabkompilieren und an IntlProvider übergeben. Dies ist besonders effizient, da der Parsing-Prozess von string zu AST entfällt. Anwendungsfälle sind:

  1. Server-Side Rendering oder Vorabkompilierung, wo AST gecached werden kann und Kompilierungskosten nur einmal anfallen.

  2. Desktop-Apps mit Electron oder CEF, wo Ressourcen vorab geladen/kompiliert werden können.

Caching

Da dieser Ansatz AST als Datenquelle nutzt, erfordern Änderungen am AST von @formatjs/icu-messageformat-parser Cache-Invalidierung.

Asset-Größe

AST hat etwas größere Dateien als normale string-Nachrichten, lässt sich aber effizient komprimieren.

react-intl ohne Parser (40% kleiner)​

Wenn alle Nachrichten und defaultMessages wie oben vorabkompiliert sind, können Sie beim Bundling @formatjs/icu-messageformat-parser zu @formatjs/icu-messageformat-parser/no-parser umleiten für deutlich kleinere Bundles (~40% kleiner). Beispiele:

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

Langfristig streben wir an, dies zum Standardverhalten zu machen.

Imperative APIs​

Imperative APIs (z.B. formatMessage) sind generell schneller als Formatted-Komponenten, da sie keine zusätzlichen ReactElement-Knoten erzeugen. Ihre Funktionalität entspricht exakt der von Formatted-Komponenten.

Weitere Beispiele​

Weitere Anwendungsbeispiele finden Sie unter https://github.com/formatjs/formatjs/tree/main/packages/react-intl/examples.