vite-react-jsx v1.1.2
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?
1) You don't need toimport React
manually anymore.
2) Better performance now and in the future. The Motivations section in the RFC explains the specifics of performance issues withReact.createElement
.
3) In the future, you won't needReact.forwardRef
anymore.
4) Depending on your setup, slightly smaller bundle sizes (according to the React team).
5) Faster parsing of JavaScript by web browser (.createElement
cannot be minified).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(),
]
}