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',
},
};