WXTでReact Compilerを有効化する設定手順

WXTでReact Compilerを有効にすると、コンポーネントの自動最適化が行われる。

手動のuseCallbackやuseMemoが不要になり、コードがシンプルになる。

インストール

まず、babel-plugin-react-compilerパッケージをインストールする。

pnpmを使う場合:

pnpm add -D babel-plugin-react-compiler

Bunを使う場合:

bun add -D babel-plugin-react-compiler

WXT設定ファイルの編集

wxt.config.tsにReact Compilerのbabelプラグイン設定を追加する。

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

これでReact Compilerが有効になり、ビルド時にコンポーネントが自動最適化される。

まとめ

WXTでReact Compilerを使うには、babel-plugin-react-compilerをインストールして、設定ファイルのbabelプラグインに追加するだけだ。

手動の最適化から解放され、コードの可読性が向上する。