# Create React App Development and Production Builds: Key Differences Explained

> Understand Create React App development vs production builds. Learn how development focuses on speed and debugging, while production optimizes performance with minification and code splitting.

- Repository: [Meta/create-react-app](https://github.com/facebook/create-react-app)
- Tags: deep-dive
- Published: 2026-02-26

---

**Development builds prioritize speed and debugging with hot reloading, while production builds optimize for performance through minification, code splitting, and hashed filenames for caching.**

Create React App (CRA) abstracts complex webpack configurations through two distinct build pipelines defined in the `facebook/create-react-app` repository. Understanding the differences between **Create React App development and production builds** is essential for debugging effectively and deploying optimized applications.

## Core Differences Between Development and Production Builds

### Environment Configuration and Entry Points

The build pipeline diverges at the script entry points. For development, [`packages/react-scripts/scripts/start.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/start.js) initializes the environment by setting `process.env.BABEL_ENV` and `process.env.NODE_ENV` to **`development`** (lines 12‑13). Conversely, [`packages/react-scripts/scripts/build.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/build.js) sets both variables to **`production`** (lines 12‑13) to trigger optimization plugins.

### Webpack Mode and Source Maps

In [`packages/react-scripts/config/webpack.config.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js), the `webpackEnv` parameter determines the build behavior. When `webpackEnv === 'development'` (line 1004), webpack runs in `mode: 'development'` and uses `cheap-module-source-map` for fast rebuilds (line 1010). 

For production builds, webpack switches to `mode: 'production'` and optionally emits full `source-map` files unless `GENERATE_SOURCEMAP` is set to `false` (lines 1006‑1010).

### Optimization and File Output

Production builds apply aggressive optimizations that development builds skip:

- **Minification**: The production pipeline enables `TerserPlugin` and `CssMinimizerPlugin` (lines 1061‑1064 in [`webpack.config.js`](https://github.com/facebook/create-react-app/blob/main/webpack.config.js)) to compress JavaScript and CSS.
- **Filename Hashing**: Production generates content-hashed filenames like [`main.1a2b3c4d.js`](https://github.com/facebook/create-react-app/blob/main/main.1a2b3c4d.js) for cache busting (lines 1022‑1027).
- **Code Splitting**: Production optimizes chunk splitting strategies, while development prioritizes build speed over bundle size.

Development builds serve assets from memory using **WebpackDevServer** without writing to the `build/` directory, while production builds write a complete static asset tree to `build/` via `fs.emptyDirSync(paths.appBuild)` and `copyPublicFolder()`.

### Developer Experience Features

Development builds include **React Refresh** (lines 1555‑1556) for instantaneous component updates without losing state. The [`start.js`](https://github.com/facebook/create-react-app/blob/main/start.js) script automatically launches the browser and provides an interactive console with hot module replacement (HMR).

Production builds treat warnings as errors when `process.env.CI` is truthy (lines 181‑189 in [`build.js`](https://github.com/facebook/create-react-app/blob/main/build.js)), ensuring strict quality control in continuous integration environments. The build script prints a final file-size report and hosting instructions upon completion.

## Key Files Controlling the Build Pipeline

| File | Role |
|------|------|
| [`packages/react-scripts/scripts/start.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/start.js) | Sets up the development server, HMR, and development-only environment variables. |
| [`packages/react-scripts/scripts/build.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/build.js) | Orchestrates the production build: cleans output, copies public assets, runs webpack, and prints post-build instructions. |
| [`packages/react-scripts/config/webpack.config.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js) | Central webpack configuration; switches behavior based on `webpackEnv` (`development` vs. `production`). Controls minification, source-maps, hashing, and plugins. |
| [`packages/react-scripts/config/env.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/env.js) | Loads environment variables from `.env*` files and injects them into the bundle via `DefinePlugin`. |
| [`packages/react-scripts/config/paths.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/paths.js) | Resolves important paths (app source, build folder, public URL, etc.) used by both scripts. |
| [`packages/react-scripts/config/webpackDevServer.config.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpackDevServer.config.js) | Development server-specific webpack dev server options (proxy, hot reload, static assets). |

## Practical Examples

### Start a Development Server

```bash
npm start      # runs packages/react-scripts/scripts/start.js

# → WebpackDevServer starts on http://localhost:3000

#    HMR updates the page instantly on file changes.

```

### Create an Optimized Production Build

```bash
npm run build  # runs packages/react-scripts/scripts/build.js

# → Generates ./build with:

#    - minified JS/CSS

#    - hashed filenames (e.g., main.1a2b3c4d.js)

#    - static asset manifest (asset-manifest.json)

```

### Serve the Production Build Locally

```bash
npx serve -s build   # any static server, e.g., `serve` or `http-server`

# Open http://localhost:5000 – you’ll see the exact assets that will be deployed.

```

### Inspect Build Statistics

```bash
npm run build -- --stats   # adds bundle-stats.json in the build folder

# Use tools like `webpack-bundle-analyzer` to visualize the output.

```

## Summary

- **Development builds** (`npm start`) prioritize developer experience with fast compilation, in-memory serving, detailed error overlays, and hot module replacement via `webpack-dev-server`.
- **Production builds** (`npm run build`) optimize for end-user performance through JavaScript/CSS minification (`TerserPlugin`, `CssMinimizerPlugin`), content-hashed filenames for caching, and optional service worker generation.
- The build pipeline is controlled by environment variables set in [`start.js`](https://github.com/facebook/create-react-app/blob/main/start.js) and [`build.js`](https://github.com/facebook/create-react-app/blob/main/build.js), which determine webpack's `mode` and optimization settings in [`webpack.config.js`](https://github.com/facebook/create-react-app/blob/main/webpack.config.js).
- Production builds write static assets to the `build/` directory, while development builds serve bundles directly from memory without persisting files to disk.

## Frequently Asked Questions

### How do I switch between development and production mode in Create React App?

Create React App automatically sets the build mode based on the npm script you run. Executing `npm start` triggers the development pipeline via [`packages/react-scripts/scripts/start.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/start.js), which sets `NODE_ENV=development`. Running `npm run build` invokes [`packages/react-scripts/scripts/build.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/build.js), setting `NODE_ENV=production`. You cannot override this behavior through command-line flags without ejecting or using custom scripts.

### Why is my production build smaller than my development build?

Production builds are smaller because [`packages/react-scripts/config/webpack.config.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js) enables aggressive optimizations when `webpackEnv === 'production'`. The configuration activates `TerserPlugin` for JavaScript minification and `CssMinimizerPlugin` for CSS compression (lines 1061‑1064). Additionally, production mode enables tree-shaking and dead-code elimination, removing unused exports and development-only code blocks guarded by `process.env.NODE_ENV` checks.

### Can I customize the webpack configuration in Create React App?

Create React App intentionally hides webpack configuration to provide a zero-config experience. The main configuration lives in [`packages/react-scripts/config/webpack.config.js`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js), but you cannot modify it directly without ejecting using `npm run eject`. Alternatively, you can use community tools like `craco` (Create React App Configuration Override) or `react-app-rewired` to inject custom webpack settings without ejecting, though these are not officially supported by the CRA team.

### How do I analyze the bundle size of my Create React App production build?

Generate a detailed statistics file by running `npm run build -- --stats`, which creates [`bundle-stats.json`](https://github.com/facebook/create-react-app/blob/main/bundle-stats.json) in the build directory. You can then use `webpack-bundle-analyzer` to visualize the output: install it globally or locally with `npm install --save-dev webpack-bundle-analyzer`, then run `npx webpack-bundle-analyzer build/bundle-stats.json`. This interactive treemap shows which dependencies contribute most to the bundle size, helping you identify opportunities for code-splitting or removing unused libraries.