Como ativar o React Compiler no WXT

Ativar o React Compiler no WXT faz com que os componentes sejam otimizados automaticamente.

Isso reduz bastante a necessidade de useCallback e useMemo manuais, deixando o código mais simples.

Instalação

Primeiro, instale o pacote babel-plugin-react-compiler.

Se você usa pnpm:

pnpm add -D babel-plugin-react-compiler

Se você usa Bun:

bun add -D babel-plugin-react-compiler

Editar o arquivo de configuração do WXT

Adicione a configuração do plugin Babel do React Compiler em wxt.config.ts.

export default defineConfig({
  react: {
    vite: {
      babel: {
        plugins: [["babel-plugin-react-compiler"]],
      }
    }
  }
})

Isso ativa o React Compiler e faz com que os componentes sejam otimizados automaticamente no build.

Resumo

Para usar o React Compiler no WXT, basta instalar babel-plugin-react-compiler e adicioná-lo à lista de plugins Babel da configuração.

Isso reduz a otimização manual e melhora a legibilidade do código.