Configure Vite with vite.config.ts to set path aliases, proxy API calls in development, and split vendor bundles for better caching. The @vitejs/plugin-react-swc plugin provides faster compilation than Babel.
Useful Vite Plugins
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { visualizer } from "rollup-plugin-visualizer";
export default defineConfig({
plugins: [
react(),
visualizer({ open: true }), // bundle analysis
],
build: {
rollupOptions: {
output: { manualChunks: { react: ["react","react-dom"] } }
}
}
});