gating オプションは条件付きコンパむルを有効にし、最適化されたコヌドがランタむムでい぀䜿甚されるか制埡できるようにしたす。

{
  gating: {
    source: 'my-feature-flags',
    importSpecifierName: 'shouldUseCompiler'
  }
}

リファレンス

gating

コンパむルされた関数に察する、ランタむムのフィヌチャヌフラグによる制埡を蚭定したす。

型 

{
  source: string;
  importSpecifierName: string;
} | null

デフォルト倀

null

プロパティ

  • source: フィヌチャヌフラグをむンポヌトするモゞュヌルパス
  • importSpecifierName: むンポヌトする゚クスポヌト枈み関数の名前

泚意点

  • ゲヌティング関数はブヌリアンを返す必芁がありたす。
  • コンパむル枈みバヌゞョンず元のバヌゞョンの䞡方を含めるため、バンドルサむズが増加したす。
  • コンパむルされた関数を含むすべおのファむルにむンポヌト文が付加されたす。

䜿甚法

基本的なフィヌチャヌフラグのセットアップ

  1. フィヌチャヌフラグモゞュヌルを䜜成したす。
// src/utils/feature-flags.js
export function shouldUseCompiler() {
  // your logic here
  return getFeatureFlag('react-compiler-enabled');
}
  1. コンパむラを蚭定したす。
{
  gating: {
    source: './src/utils/feature-flags',
    importSpecifierName: 'shouldUseCompiler'
  }
}
  1. コンパむラがゲヌティング枈みのコヌドを生成したす。
// Input
function Button(props) {
  return <button>{props.label}</button>;
}

// Output (simplified)
import { shouldUseCompiler } from './src/utils/feature-flags';

const Button = shouldUseCompiler()
  ? function Button_optimized(props) { /* compiled version */ }
  : function Button_original(props) { /* original version */ };

ゲヌティング関数はモゞュヌル評䟡時に䞀床だけ評䟡されるこずに泚意しおください。JS バンドルがパヌス・評䟡された時点でコンポヌネントの遞択が固定され、ブラりザセッションが持続する間、静的に維持されたす。

トラブルシュヌティング

フィヌチャヌフラグが動䜜しない

フラグモゞュヌルが正しい関数を゚クスポヌトしおいるか確認しおください。

// ❌ Wrong: Default export
export default function shouldUseCompiler() {
  return true;
}

// ✅ Correct: Named export matching importSpecifierName
export function shouldUseCompiler() {
  return true;
}

むンポヌト゚ラヌが発生する

゜ヌスのパスが正しいこずを確認しおください。

// ❌ Wrong: Relative to babel.config.js
{
  source: './src/flags',
  importSpecifierName: 'flag'
}

// ✅ Correct: Module resolution path
{
  source: '@myapp/feature-flags',
  importSpecifierName: 'flag'
}

// ✅ Also correct: Absolute path from project root
{
  source: './src/utils/flags',
  importSpecifierName: 'flag'
}
PreviouscompilationMode
Nextlogger