Why Does Creating a React Vite App Take So Long? A Technical Breakdown

Creating a React Vite app takes time primarily due to network-bound dependency installation and one-time esbuild pre-bundling, not because of the lightweight template scaffolding itself.

While Vite is celebrated for near-instant dev server startup and rapid Hot Module Replacement (HMR), the initial experience of creating a React Vite app can feel surprisingly sluggish. This delay stems from a multi-phase initialization pipeline that involves heavy network I/O, CPU-intensive optimization steps, and disk-heavy extraction processes. Understanding the architecture behind create-vite and Vite's dependency resolution reveals why this first-run penalty exists—and why subsequent starts are dramatically faster.

The Five Phases of React Vite App Creation

When you run npm create vite@latest my-app -- --template react, the process executes five distinct stages. Each contributes to the total elapsed time, though not equally.

1. Template Scaffolding

The create-vite CLI first copies a predefined template directory into your target folder. Specifically, it clones packages/create-vite/template-react/ (or template-react-ts/ for TypeScript) and writes a fresh package.json.

This phase involves pure file I/O and usually completes in less than 500 milliseconds. According to the source code in [packages/create-vite/src/index.ts](https://github.com/vitejs/vite/blob/main/packages/create-vite/src/index.ts), this is the fastest step in the pipeline.

2. Dependency Installation (The Biggest Bottleneck)

Immediately after scaffolding, create-vite executes your selected package manager to install dependencies. This step downloads Vite itself, react, react-dom, the appropriate plugin (@vitejs/plugin-react-swc or @vitejs/plugin-react), TypeScript (if applicable), and hundreds of transitive dependencies.

This phase dominates wall-clock time because it requires:

• Network latency while downloading tarballs from the npm registry
• Disk I/O for extracting thousands of files into node_modules (often exceeding 100MB)
• Dependency resolution algorithms for deduplication performed by npm, yarn, or pnpm

The auto-install logic resides in [packages/create-vite/src/index.ts](https://github.com/vitejs/vite/blob/main/packages/create-vite/src/index.ts), which spawns the package manager process automatically unless you use the --no-deps flag.

3. Dependency Pre-optimization with esbuild

When you first run npm run dev, Vite launches and immediately executes dependency pre-bundling. As implemented in [packages/vite/src/node/plugins/optimizer.ts](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/optimizer.ts), this process uses esbuild (written in Go) to bundle external libraries like react and react-dom into optimized ESM files.

This one-time step requires esbuild to:

• Read each dependency source
• Resolve nested imports
• Generate bundled output with source maps

While esbuild is extremely fast, processing large dependency graphs can still take several seconds on the first run.

4. TypeScript and JSX Compilation

If you selected the TypeScript template, Vite must transpile .tsx and .ts files. Even with vanilla React, JSX transformation occurs. According to [packages/plugin-react-swc/src/index.ts](https://github.com/vitejs/vite/blob/main/packages/plugin-react-swc/src/index.ts), the SWC-based plugin performs the initial scan of your source tree, parsing every file and caching transformed modules.

This compilation happens on-demand as you browse the app, but the initial scan of the entry points adds measurable overhead during the first dev server request.

5. Dev Server Initialization

Finally, Vite initializes the development server as defined in [packages/vite/src/node/server.ts](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server.ts). This creates an HTTP server, establishes WebSocket connections for HMR, and sets up file system watchers (using native APIs on Windows and macOS).

While lightweight compared to the previous steps, establishing file watchers incurs a small overhead proportional to the number of files in your project.

Why Dependency Installation Dominates the Timeline

The perception of slowness when creating a React Vite app almost always traces back to Phase 2—the npm install equivalent. On slow or metered connections, downloading hundreds of megabytes of JavaScript packages dominates the clock time.

Modern package managers like pnpm mitigate this through content-addressable stores and parallel downloads, but the underlying network limit remains. On low-power machines (such as Raspberry Pi devices or older laptops), the combination of CPU-intensive compression/decompression and disk-heavy writes exacerbates the delay.

How to Speed Up Creating a React Vite App

You can reduce initialization time using two specific strategies proven in the Vite source code:

Use the --no-deps flag to skip automatic installation and defer dependency resolution to a cached CI environment or a faster network:

npm create vite@latest my-app -- --template react --no-deps
cd my-app
pnpm i  # Faster thanks to pnpm’s global content-addressable store

Prefer pnpm over npm when running the install manually. As noted in the ecosystem benchmarks, pnpm's global store prevents redundant downloads across projects, significantly reducing the network-bound phase.

Summary

• Network I/O is the primary bottleneck: Downloading and extracting node_modules consumes more time than all other phases combined.
• Pre-bundling is a one-time cost: The esbuild optimization in [packages/vite/src/node/plugins/optimizer.ts](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/optimizer.ts) runs only once per project; subsequent npm run dev invocations reuse cached results.
• Scaffolding is negligible: Copying template files from packages/create-vite/template-react/ takes less than a second.
• Skip installation with --no-deps: The create-vite CLI supports deferring dependency installation for CI pipelines or offline scenarios.
• SWC accelerates transformation: The plugin at [packages/plugin-react-swc/src/index.ts](https://github.com/vitejs/vite/blob/main/packages/plugin-react-swc/src/index.ts) ensures JSX compilation happens faster than traditional Babel-based setups, though the initial scan still requires time.

Frequently Asked Questions

Can I skip the dependency installation when creating a React Vite app?

Yes. According to the implementation in [packages/create-vite/src/index.ts](https://github.com/vitejs/vite/blob/main/packages/create-vite/src/index.ts), you can pass the --no-deps flag to create-vite. This scaffolds the template without running npm install, allowing you to defer the network-bound download phase or use a different package manager like pnpm with its global store.

Why is the second npm run dev faster than the first?

The first run triggers esbuild pre-bundling, which traverses your entire dependency tree, resolves imports, and writes optimized ESM files to disk. As implemented in [packages/vite/src/node/plugins/optimizer.ts](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/optimizer.ts), Vite caches these results in node_modules/.vite. Subsequent starts skip this CPU-intensive step entirely, launching the dev server in under one second.

Does using TypeScript slow down creating a React Vite app?

Marginally. The react-ts template requires downloading additional TypeScript compiler dependencies and configuring tsconfig.json. During the first dev server start, the SWC-based plugin in [packages/plugin-react-swc/src/index.ts](https://github.com/vitejs/vite/blob/main/packages/plugin-react-swc/src/index.ts) must parse TypeScript syntax and generate declaration files. However, the difference is usually less than one second compared to the vanilla React template.

Is Vite slow, or is it just the project creation?

Vite itself is not slow—the creation process is. The dev server architecture defined in [packages/vite/src/node/server.ts](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server.ts) is optimized for speed, with native ESM serving and extremely fast HMR. The perceived slowness stems from external factors: npm registry downloads, node_modules extraction, and the one-time esbuild optimization that makes subsequent development cycles instantaneous.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}