Vite Explained: Why Development Got Instant

Introduction

For years, starting a JavaScript project meant waiting: the bundler had to process your entire application before the browser showed anything, and every save triggered another rebuild. Vite, created by Evan You (the creator of Vue), changed that by asking a simple question — why bundle at all during development, when modern browsers already understand modules natively?

Native modules: skip the bundle

Vite's dev server serves your source files directly to the browser as native ES modules, exactly like the JavaScript modules post described:

// The browser requests each module on demand
import { createApp } from "vue";
import App from "./App.vue";

The browser only loads the modules for the page you're actually viewing, so startup stays fast no matter how large the project grows. Dependencies (like React or Vue themselves) are pre-bundled once with esbuild — a bundler written in Go that is dramatically faster than JavaScript-based tools — and then cached. The result: a dev server that starts in well under a second, even for large applications.

Hot module replacement: edits without losing state

Vite's other signature feature is hot module replacement (HMR): when you edit a file, only that module is swapped in the running browser, without a full page reload. Change a component's styling and the page updates instantly; change a component's code and it updates while keeping its current state — a filled-in form stays filled in. Compare that with the old cycle of save, wait for rebuild, reload, and re-enter your test data, and the productivity difference is obvious.

Production: still a bundle, still Rollup

For production, Vite does bundle — browsers loading hundreds of separate modules would be slow over a network — using Rollup under the hood, with the same configuration you already wrote. That split is the key insight: development optimises for speed of feedback, production optimises for speed of delivery, and one tool handles both. Vite also works with React, Vue, Svelte, and plain JavaScript alike, which is why it has become the default starting point for new frontend projects.

Takeaway

Vite serves native modules during development for instant startup, swaps edits in place with hot module replacement, and bundles for production when it actually matters. Fast feedback changes how you develop — you experiment more when trying something costs a second instead of a minute.

Comments

Post a Comment

Popular posts from this blog

Swift Explained: Apple's Language for iPhone, Mac, and More

Introduction Swift is Apple's language for its platforms: iPhone, iPad, Mac, Apple Watch, and Apple TV. Introduced in 2014 to replace the older Objective-C, it was designed to be safe, fast, and — unusually for a systems language — genuinely pleasant to read and write. Even if you never ship an app, Swift teaches one idea every developer should understand: optionals. Optionals: saying "this might be missing" Most bugs in app development come from one cause: code assuming a value exists when it does not. Swift makes that assumption impossible to hide. A value that might be missing is wrapped in an Optional, and you must unwrap it before use. var nickname: String? = nil nickname = "Waqas" if let name = nickname { print("Hello, \(name)!") } else { print("No nickname set.") } String? means "a String, or nothing". The if let unwraps it safely: inside the block, name is guaranteed to exist. There is no way to accidentally us...
Read more

Flutter Explained: One Codebase, Every Screen

Introduction Flutter is Google's framework for building apps from a single codebase: write once in Dart, and ship to iOS, Android, web, Windows, macOS, and Linux. It powers apps from Google Pay to the New York Times crossword app. Its core idea is simple and radical: everything on screen is a widget, and the interface is rebuilt from data whenever that data changes. Everything is a widget In Flutter, there are no separate concepts for layout, styling, and controls — everything is a widget, nested inside other widgets like HTML elements, but in code: import 'package:flutter/material.dart'; class Greeting extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, Sara!', style: TextStyle(fontSize: 24, color: Colors.teal), ), ); } } Center positions its child, Text displays words, TextStyle styles them — each a widget, composed by nesting. Layout widgets (like Row, Column, ...
Read more

Go Explained: Simple Code That Runs Fast

Introduction Go was built at Google for a specific frustration: large programs that were slow to build and hard to read. The answer was a language that is deliberately small — fewer features, but the right ones, done well. If you know one programming language already, Go will feel familiar within an hour. The interesting parts are not the syntax, but two ideas: goroutines and channels. Goroutines: cheap concurrency Most languages make running things at the same time feel heavy — threads, thread pools, and careful setup. A goroutine is Go's lightweight version: you start one by writing go in front of a function call. package main import ( "fmt" "time" ) func say(text string) { for i := 0; i < 3; i++ { fmt.Println(text) time.Sleep(100 * time.Millisecond) } } func main() { go say("hello") say("world") time.Sleep(500 * time.Millisecond) } The go say("hello") line does not wait — it st...
Read more