Ottimizzazione dei bundle con formatjs

Traduzione Beta Non Ufficiale

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

Ora che disponi di una pipeline funzionante, è il momento di approfondire come ottimizzare la build con formatjs. Dalla guida Estrazione dei messaggi, sconsigliamo esplicitamente l'uso di ID espliciti a causa di possibili collisioni in applicazioni di grandi dimensioni. Sebbene il nostro estrattore possa inserire ID nel file JSON estratto, dovrai anche inserire questi ID nell'output JS compilato. Questa guida spiegherà come farlo.

Utilizzo di babel-plugin-formatjs

npm

npm i -D babel-plugin-formatjs

yarn

yarn add -D babel-plugin-formatjs

Esaminiamo questo semplice esempio:

import {FormattedMessage} from 'react-intl'

<FormattedMessage
  description="A message"
  defaultMessage="My name is {name}"
  values={{
    name: userName,
  }}
/>

Durante l'esecuzione verrà generato un Error che indica ID is required. Per iniettare un ID nel JS transpilato, puoi usare il nostro babel-plugin-formatjs come mostrato di seguito:

babel.config.json

{
  "plugins": [
    [
      "formatjs",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  ]
}

Questo produrrà il seguente JS

const {FormattedMessage} = require('react-intl')

React.createElement(FormattedMessage, {
  id: '179jda',
  defaultMessage: 'My name is {name}',
  values: {
    name: userName,
  },
})

description

Il nostro plugin rimuove anche description perché è destinato solo al traduttore, non all'utente finale.

Utilizzo di @formatjs/ts-transformer

npm

npm i -D @formatjs/ts-transformer

yarn

yarn add -D @formatjs/ts-transformer

Se stai utilizzando TypeScript, per abilitare un transformer AST personalizzato, considera di usare ts-patch, ts-loader o strumenti simili.

Esaminiamo questo semplice esempio:

import {FormattedMessage} from 'react-intl'

<FormattedMessage
  description="A message"
  defaultMessage="My name is {name}"
  values={{
    name: userName,
  }}
/>

ts-loader

Puoi aggiungere questa configurazione nel tuo ts-loader di webpack.

import {transform} from '@formatjs/ts-transformer'
// webpack config
module.exports = {
  rules: [
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            getCustomTransformers() {
              return {
                before: [
                  transform({
                    overrideIdFn: '[sha512:contenthash:base64:6]',
                  }),
                ],
              }
            },
          },
        },
      ],
      exclude: /node_modules/,
    },
  ],
}

Questo produrrà il seguente JS

const {FormattedMessage} = require('react-intl')

React.createElement(FormattedMessage, {
  id: '179jda',
  defaultMessage: 'My name is {name}',
  values: {
    name: userName,
  },
})

description

Il nostro transformer rimuove anche description perché è destinato solo al traduttore, non all'utente finale.