Skip to main content

react-compiler

pnpm add -D babel-plugin-react-compiler
// 部分
const ReactCompilerConfig = {
  // annotation opt-in 模式，组件增加 'use memo'
  compilationMode: 'annotation',
  sources: (filename) => {
    return filename.indexOf('src/path/to/dir') !== -1;
  },
};

vite

vite.config.ts
const ReactCompilerConfig = {
  /* ... */
};

export default defineConfig(() => {
  return {
    plugins: [
      react({
        babel: {
          plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
        },
      }),
    ],
    // ...
  };
});
export default defineConfig(({ command }) => {
  const babelPlugins = [['babel-plugin-react-compiler', {}]];
  if (command === 'serve') {
    babelPlugins.push(['@babel/plugin-transform-react-jsx-development', {}]);
  }

  return {
    plugins: [react({ babel: { plugins: babelPlugins } })],
  };
});

NextJS

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

lint​

npx -y react-compiler-healthcheck@latest --src 'src/**/*.{tsx,ts}'
npm install eslint-plugin-react-compiler
module.exports = {
  plugins: ['eslint-plugin-react-compiler'],
  rules: {
    'react-compiler/react-compiler': 'error',
  },
};