Doist
build: Ship components optimized with React Compiler
Short description
This integrates the React compiler to optimize components within the distributed packages, minimizing re-renders.
Caveats are that not all components/hooks can be optimized at this time, and those that are have not been deprecated will be addressed in future PRs:
- Menu
- CheckboxField
- Tabs
- Tooltip
- KeyboardShortcut
- useForkRef
- useId
The bundle size would also be increased by about 37%, due to the compiler's generated code (but not the runtime, which is externalized):
The left shows the bundle size using the current build step on main, using Rollup's TypeScript plugin. The right is with the compiler enabled with Babel, which had some of babel's runtime helpers inlined. Once externalized, the bundle size is decreased slightly:
Taking out the React compiler, while leaving the Babel build flow in place, results in a smaller bundle compared to when building with the TypeScript plugin (but very slightly larger gzipped), confirming that the size increase can be mostly attributed to the compiler's output.
References
https://react.dev/reference/react-compiler/compiling-libraries
PR Checklist
- [ ] Added tests for bugs / new features
- [ ] Updated docs (storybooks, readme)
- [ ] Reviewed and approved Chromatic visual regression tests in CI
