mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Lauren Tan
efd1fefb49
This migrates the compiler's bundler to esbuild instead of rollup. Unlike React, our bundling use cases are far simpler since the majority of our packages are meant to be run on node. Rollup was adding considerable build time overhead whereas esbuild remains fast and has all the functionality we need out of the box. ### Before ``` time yarn workspaces run build yarn workspaces v1.22.22 > babel-plugin-react-compiler yarn run v1.22.22 $ rimraf dist && rollup --config --bundleConfigAsCjs src/index.ts → dist/index.js... (!) Circular dependencies # ... created dist/index.js in 15.5s ✨ Done in 16.45s. > eslint-plugin-react-compiler yarn run v1.22.22 $ rimraf dist && rollup --config --bundleConfigAsCjs src/index.ts → dist/index.js... (!) Circular dependencies # ... created dist/index.js in 9.1s ✨ Done in 10.11s. > make-read-only-util yarn run v1.22.22 warning package.json: No license field $ tsc ✨ Done in 1.81s. > react-compiler-healthcheck yarn run v1.22.22 $ rimraf dist && rollup --config --bundleConfigAsCjs src/index.ts → dist/index.js... (!) Circular dependencies # ... created dist/index.js in 8.7s ✨ Done in 10.43s. > react-compiler-runtime yarn run v1.22.22 $ rimraf dist && rollup --config --bundleConfigAsCjs src/index.ts → dist/index.js... (!) src/index.ts (1:0): Module level directives cause errors when bundled, "use no memo" in "src/index.ts" was ignored. # ... created dist/index.js in 1.1s ✨ Done in 1.82s. > snap yarn run v1.22.22 $ rimraf dist && concurrently -n snap,runtime "tsc --build" "yarn --silent workspace react-compiler-runtime build --silent" $ rimraf dist && rollup --config --bundleConfigAsCjs --silent [runtime] yarn --silent workspace react-compiler-runtime build --silent exited with code 0 [snap] tsc --build exited with code 0 ✨ Done in 5.73s. ✨ Done in 47.30s. yarn workspaces run build 75.92s user 5.48s system 170% cpu 47.821 total ``` ### After ``` time yarn workspaces run build yarn workspaces v1.22.22 > babel-plugin-react-compiler yarn run v1.22.22 $ rimraf dist && scripts/build.js ✨ Done in 1.02s. > eslint-plugin-react-compiler yarn run v1.22.22 $ rimraf dist && scripts/build.js ✨ Done in 0.93s. > make-read-only-util yarn run v1.22.22 warning package.json: No license field $ rimraf dist && scripts/build.js ✨ Done in 0.89s. > react-compiler-healthcheck yarn run v1.22.22 $ rimraf dist && scripts/build.js ✨ Done in 0.58s. > react-compiler-runtime yarn run v1.22.22 $ rimraf dist && scripts/build.js ✨ Done in 0.48s. > snap yarn run v1.22.22 $ rimraf dist && concurrently -n snap,runtime "tsc --build" "yarn --silent workspace react-compiler-runtime build" $ rimraf dist && scripts/build.js [runtime] yarn --silent workspace react-compiler-runtime build exited with code 0 [snap] tsc --build exited with code 0 ✨ Done in 4.69s. ✨ Done in 9.46s. yarn workspaces run build 9.70s user 0.99s system 103% cpu 10.329 total ```
React Compiler Playground
An interactive playground to demonstrate, test, and have fun with React Compiler.
Setup
# Build React Compiler from source and install Playground dependencies.
$ yarn
# Or similarly
$ npm install
Development
# Start the local development server with
$ yarn dev
# Or
$ npm run dev
# Rerun the following (in a separate terminal window) when React Compiler
# is changed locally to keep Playground in sync.
$ yarn
Testing
# Install playwright browser binaries
$ npx playwright install --with-deps
# Run tests
$ yarn test
Deployment
This project has been deployed using Vercel. Vercel does the exact same thing as we would
locally, by running yarn at the install step in the Playground directory to build
React Compiler from source and symlink it as its dependency.
This means that Playground is automatically deployed on every push and pull requests will reflect
the behaviors of React Compiler of that commit.