Speed up your Vite dev server with SWC
- ✅ A fast Fast Refresh (~20x faster than Babel)
- ✅ Enable automatic JSX runtime
yarn add unova-plugin-vite --dev
or
npm install unova-plugin-vite --dev
import { defineConfig } from "vite";
import unova from "unova-plugin-vite";
export default defineConfig({
plugins: [unova()],
});
This plugin is only used in development and aims to be kept simple to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behaviour:
- useDefineForClassFields is always activated, as this matches the current ECMAScript spec
-
jsx runtime
is alwaysautomatic
- In development:
- esbuild is disabled, so the esbuild configuration has no effect
-
target
ises2020
- JS files are not transformed
- tsconfig is not resolved, so properties other than the ones listed above behaves like TS defaults
You can use the jsxImportSource option like this:
import { defineConfig } from "vite";
import react from "unova-plugin-vite";
export default defineConfig({
plugins: [react({ jsxImportSource: "@emotion/react" })],
});
For React refresh to work correctly, your file should only export React components. The best explanation I've read is the one from the Gatsby docs.
If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.
You can catch mistakes and get more detailed warning with this eslint rule.