Vite Plugins — The Essentials

Vite's plugin ecosystem is a mile wide and most of it you won't need. These are the ones that earn their keep in nearly every React 19 SPA.

The essential five

@vitejs/plugin-react — wires React Fast Refresh, JSX transform, automatic dev-only imports. Required for any React project.
@tailwindcss/vite — Tailwind v4 integration (Track 1 lesson 3).
vite-plugin-svgr — import SVG files as React components: import { ReactComponent as Icon } from './icon.svg'. Indispensable if you use SVG icons.
rollup-plugin-visualizer — bundle treemap after build (Track 8 lesson 1).
vite-plugin-checker — runs TypeScript and ESLint in a separate process during dev, so errors surface alongside the browser preview without slowing the dev server.

Optional but useful

vite-plugin-pwa — turn your SPA into a PWA with offline support and installability.
unplugin-icons — type-safe icon imports from any icon set (Lucide, Heroicons, etc.) with tree-shaking.
vite-imagetools — image processing at build time (resize, format conversion, srcset generation).

What to avoid

Don't add plugins speculatively. Each one adds startup time and a new failure surface. The default Vite + React + Tailwind setup is enough to ship; reach for plugins when you have a specific need.

Plugin selection is part of your stack identity. The five essentials above show up in nearly every modern React SPA. The optional ones tell you something about the app (PWA → offline-capable; imagetools → image-heavy; unplugin-icons → design-system-driven). Choose plugins that match what your app actually does.

Code

A realistic vite.config.ts with essentials·ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import svgr from "vite-plugin-svgr";
import checker from "vite-plugin-checker";
import { visualizer } from "rollup-plugin-visualizer";
import path from "node:path";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [["babel-plugin-react-compiler", {}]],
      },
    }),
    tailwindcss(),
    svgr(),
    checker({ typescript: true }),
    visualizer({ filename: "dist/stats.html" }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    port: 5173,
    proxy: {
      "/api": "http://localhost:8000",
    },
  },
});

Exercise

Install vite-plugin-svgr in your bootstrap project. Drop an SVG into src/assets/. Import it as a React component (import { ReactComponent as MyIcon } from './assets/icon.svg'). Render it. Then install vite-plugin-checker with typescript: true and verify that a deliberate type error shows up in the browser overlay during dev (not just in your editor).

Hint

If the SVG import doesn't work, you may need to add /// <reference types="vite-plugin-svgr/client" /> to vite-env.d.ts for TypeScript to recognize the import.

Vite Plugins — The Essentials

The essential five

Optional but useful

What to avoid

Code

External links

Exercise

Progress

Comments 0