vite-react-jsx
React 17's automatic JSX runtime for your entire bundle
Â
Features
- Replaces
React.createElement
calls in your entire bundle (even for pre-minified, compiled React components fromnode_modules
) with the automatic JSX runtime introduced in React 17 - Injects
import React
statements in server mode, but not for modules where React is already imported - Deduplicates
react
andreact-dom
imports by settingresolve.dedupe
for you
Â
FAQ
-
What are the benefits of using the new JSX runtime?
- You don't need to
import React
manually anymore. - Better performance now and in the future. The Motivations section in the RFC explains the specifics of performance issues with
React.createElement
. - In the future, you won't need
React.forwardRef
anymore. - Depending on your setup, slightly smaller bundle sizes (according to the React team).
- Faster parsing of JavaScript by web browser (
.createElement
cannot be minified).
- You don't need to
-
How much does this affect Vite's performance?
In serve mode, the performance effects are unnoticeable, since Babel is only used when bundling.
Otherwise, you'll see ~40% longer build times in the./demo
folder, but this % largely depends on how many kB of JavaScript need to be parsed and transformed by Babel. -
Do I need React 17+ to use the new JSX runtime?
No. Support for the new runtime was backported to React 16.14.0, React 15.7.0, and React 0.14.10.
Â
Usage
import reactJsx from 'vite-react-jsx'
export default {
plugins: [
reactJsx(),
]
}