Vite

Vite is a modern, fast frontend build tool that leverages native ES module imports during development to serve code without building it first, providing an extremely fast Hot Module Replacement (HMR) experience. During production builds, Vite uses Rollup to bundle your code with efficient tree-shaking and lazy-loading capabilities.

Key Features of Vite:

• Fast Cold Start: Instead of bundling all modules before serving, Vite streams them on-demand as you develop.
• Instant HMR: Updates reflect in the browser as soon as you save files, without waiting for rebuilds.
• Out-of-the-Box Support: Comes pre-configured to support TypeScript, JavaScript, CSS, and popular frameworks like Vue, React, and Svelte.
• Optimized Build: When it's time to build for production, Vite turns your project into highly optimized static assets using Rollup.

Using Vite in Our Projects

To effectively utilize Vite in our projects, you can look at the package.json files located in each project within the monorepo. These files often contain scripts that leverage Vite for building and serving applications:

{
  "scripts": {
    "dev": "vite", // Start the Vite development server
    "build": "vite build", // Build your project for production
    "preview": "vite preview" // Preview the production build locally
  }
}

Vite's configuration is managed through vite.config.ts, where you can customize the build processes, define plugins, adjust the server settings, and more.

Vite Extra Features

Vite supports a wide range of plugins that enhance its capabilities and provide additional features. We use one for Lit-HMR support, which enables Hot Module Replacement for Lit components, allowing us to see changes in real-time as we develop.

Vite also offers a proxy service, which we use described here

The full Vite documentation can also be found here.