JavaScript Build Tools with Vite

# JavaScript Build Tools with Vite

Optimize your development workflow with Vite build tools in Google Antigravity IDE. This guide covers configuration, plugins, and performance optimization for lightning-fast builds.

## Why Vite?

Vite leverages native ES modules for instant dev server startup and hot module replacement. Google Antigravity IDE's Gemini 3 engine provides intelligent configuration suggestions and build optimization recommendations.

## Project Setup

### vite.config.ts

```typescript
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  
  return {
    plugins: [
      react(),
      tsconfigPaths(),
      visualizer({
        filename: "dist/stats.html",
        open: mode === "analyze",
        gzipSize: true,
      }),
    ],
    
    resolve: {
      alias: {
        "@": "/src",
        "@components": "/src/components",
        "@hooks": "/src/hooks",
        "@utils": "/src/utils",
      },
    },
    
    server: {
      port: 3000,
      open: true,
      proxy: {
        "/api": {
          target: env.API_URL || "http://localhost:8080",
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
    
    build: {
      target: "esnext",
      minify: "terser",
      sourcemap: mode !== "production",
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ["react", "react-dom"],
            router: ["react-router-dom"],
            ui: ["@radix-ui/react-dialog", "@radix-ui/react-dropdown-menu"],
          },
        },
      },
      terserOptions: {
        compress: {
          drop_console: mode === "production",
          drop_debugger: true,
        },
      },
    },
    
    optimizeDeps: {
      include: ["react", "react-dom", "react-router-dom"],
      exclude: ["@vite/client"],
    },
  };
});
```

## Environment Variables

```typescript
// env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
  readonly VITE_ENABLE_ANALYTICS: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
```

```typescript
// src/config/env.ts
export const config = {
  apiUrl: import.meta.env.VITE_API_URL,
  appTitle: import.meta.env.VITE_APP_TITLE,
  isProduction: import.meta.env.PROD,
  isDevelopment: import.meta.env.DEV,
} as const;
```

## Custom Plugin Development

```typescript
// plugins/auto-import.ts
import type { Plugin } from "vite";

export function autoImportPlugin(): Plugin {
  return {
    name: "vite-plugin-auto-import",
    enforce: "pre",
    
    transform(code, id) {
      if (!id.endsWith(".tsx") && !id.endsWith(".ts")) return;
      
      // Auto-import React if JSX is detected
      if (code.includes("<") && !code.includes("import React")) {
        return {
          code: `import React from "react";\n${code}`,
          map: null,
        };
      }
    },
  };
}
```

## Library Mode Configuration

```typescript
// vite.config.lib.ts
import { defineConfig } from "vite";
import { resolve } from "path";
import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [dts({ rollupTypes: true })],
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "MyLibrary",
      formats: ["es", "cjs", "umd"],
      fileName: (format) => `my-library.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
  },
});
```

## Performance Optimization

```typescript
// Chunk splitting strategy
build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes("node_modules")) {
          if (id.includes("react")) return "react-vendor";
          if (id.includes("lodash")) return "lodash-vendor";
          return "vendor";
        }
      },
    },
  },
}
```

## Best Practices

- Use SWC instead of Babel for faster transforms
- Configure proper chunk splitting for optimal caching
- Leverage CSS code splitting for parallel loading
- Use dynamic imports for route-based code splitting
- Enable build analysis to identify bundle size issues

Google Antigravity IDE automatically suggests Vite optimizations based on your project structure and provides real-time feedback on build performance.