# Why Does Creating a React Vite App Take So Long? A Technical Breakdown > Discover why creating a React Vite app takes time. Learn about network-bound dependency installation and esbuild pre-bundling that impact your setup speed. - Repository: [Vite/vite](https://github.com/vitejs/vite) - Tags: deep-dive - Published: 2026-02-12 --- **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`](https://github.com/vitejs/vite/blob/main/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)](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)](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)](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)](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)](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: ```bash 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)](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)](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)](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)](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`](https://github.com/vitejs/vite/blob/main/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)](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)](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.