This article shares what felt fastest in the day‑to‑day development of ilert‑ui, a large React + TypeScript app with many lazy routes. We first moved off Create React App (CRA) toward modern tooling, trialed Vite for local development, and ultimately landed on webpack‑dev‑server + React Fast Refresh.

This article was first published on the ilert blog, and you can find the full version here.

Scope: Local development only. Our production builds remain on Webpack. For context, the React team officially sunset CRA on February 14, 2025, and recommends migrating to a framework or a modern build tool such as Vite, Parcel, or RSBuild.

Qualitative field notes from ilert‑ui: We didn’t run formal benchmarks; this is our day‑to‑day experience in a large route‑split app.

Mini‑glossary

Here are the helpful terms you will encounter in this article. ESM: Native JavaScript module system browsers understand.

HMR: Swaps changed code into a running app without a full reload. React Fast Refresh: React’s HMR experience that preserves component state when possible. Lazy route / code‑splitting: Loading route code only when the route is visited. Vendor chunk: A bundle of shared third‑party deps cached across routes. Eager pre‑bundling: Bundling common deps up front to avoid many small requests later. Dependency optimizer (Vite): Pre‑bundles bare imports; may re‑run if new deps are discovered at runtime. Type‑aware ESLint: ESLint that uses TypeScript type info – more accurate, heavier.

Why we left CRA

ilert‑ui outgrew CRA’s convenience defaults as the app matured.

Here are the reasons that pushed us away from CRA:

1. Customization friction: Advanced webpack tweaks (custom loaders, tighter split‑chunks strategy, Babel settings for react-refresh) required ejecting or patching. That slowed iteration on a production‑scale app.
2. Large dependency surface: react-scripts brought many transitive packages. Installs got slower, and security noise grew over time without clear benefits for us.

Goals for the next steps:

1. Keep React + TS.
2. Improve time‑to‑interactive after server start.
3. Preserve state on edits (Fast Refresh behavior) and keep HMR snappy.
4. Maintain predictable first‑visit latency when navigating across many lazy routes.

Why Vite looked like a better solution

During development, Vite serves your source as native ESM and pre‑bundles bare imports from node_modules using esbuild. This usually yields very fast cold starts and responsive HMR.

What we loved immediately

• Cold starts: Noticeably faster than our CRA baseline.
• Minimal config, clean DX: Sensible defaults and readable errors.
• Great HMR in touched areas: Editing within routes already visited felt excellent.

Where the model rubbed against our size In codebases with many lazy routes, first‑time visits can trigger bursts of ESM requests, and when new deps are discovered at runtime, dependency‑optimizer re‑runs that reload the page. This is expected behavior, but it made cross‑route exploration feel uneven for us.

Qualitative field notes from ilert‑ui

Methodology: qualitative observations from daily development in ilert‑ui.

Our repo’s shape

• Dozens of lazy routes, several heavy sections pulling in many modules.
• Hundreds of shared files and deep store imports across features.

What we noticed

1. First‑time heavy routes: Opening a dependency‑rich route often triggered many ESM requests and sometimes a dep‑optimizer re‑run. Cross‑route exploration across untouched routes felt slower than our webpack setup that eagerly pre‑bundles shared vendors.
2. Typed ESLint overhead: Running type‑aware ESLint (with parserOptions.project or projectService) in‑process with the dev server added latency during typing. Moving linting out‑of‑process helped, but didn’t fully offset the cost at our scale – an expected trade‑off with typed linting.

TL;DR for our codebase: Vite was fantastic once a route had been touched in the session, but the first visits across many lazy routes were less predictable.

Why we pivoted to webpack‑dev‑server + React Fast Refresh

What we run:

• webpack‑dev‑server with HMR.
• React Fast Refresh via @pmmmwh/react-refresh-webpack-plugin and react-refresh in Babel.
• Webpack SplitChunks for common vendor bundles; filesystem caching; source maps; error overlays; ESLint out‑of‑process.

Why it felt faster end‑to‑end for our team:

1. Eager vendor pre‑bundling: We explicitly pre‑bundle vendor chunks (React, MUI, MobX, charts, editor, calendar, etc.). The very first load is a bit heavier, but first‑time visits to other routes are faster because shared deps are already cached. SplitChunks makes this predictable.
2. React Fast Refresh ergonomics: Solid state preservation on edits, reliable error recovery, and overlays we like.
3. Non‑blocking linting: Typed ESLint runs outside the dev server process, so HMR stays responsive even during large type checks.

Receipts – the knobs we turned

1// webpack.config.js
2module.exports = {
3  optimization: {
4    minimize: false,
5    runtimeChunk: "single",
6    splitChunks: {
7      chunks: "all",
8      cacheGroups: {
9        "react-vendor": {
10             test: /[\/\]node_modules[\/\](react|react-dom|react-router-dom)[\/\]/,
11          name: "react-vendor",
12          chunks: "all",
13          priority: 30,
14        },
15        "mui-vendor": {
16          test: /[\/\]node_modules[\/\](@mui\/material|@mui\/icons-material|@mui\/lab|@mui\/x-date-pickers)[\/\]/,
17          name: "mui-vendor",
18          chunks: "all",
19          priority: 25,
20        },
21        "mobx-vendor": {
22          test: /[\/\]node_modules[\/\](mobx|mobx-react|mobx-utils)[\/\]/,
23          name: "mobx-vendor",
24          chunks: "all",
25          priority: 24,
26        },
27        "utils-vendor": {
28          test: /[\/\]node_modules[\/\](axios|moment|lodash\.debounce|lodash\.isequal)[\/\]/,
29          name: "utils-vendor",
30          chunks: "all",
31          priority: 23,
32        },
33        "ui-vendor": {
34          test: /[\/\]node_modules[\/\](@loadable\/component|react-transition-group|react-window)[\/\]/,
35          name: "ui-vendor",
36          chunks: "all",
37          priority: 22,
38        },
39        "charts-vendor": {
40          test: /[\/\]node_modules[\/\](recharts|reactflow)[\/\]/,
41          name: "charts-vendor",
42          chunks: "all",
43          priority: 21,
44        },
45        "editor-vendor": {
46 test: /[\/\]node_modules[\/\](@monaco-editor\/react|monaco-editor)[\/\]/,
47          name: "editor-vendor",
48          chunks: "all",
49          priority: 20,
50        },
51        "calendar-vendor": {
52          test: /[\/\]node_modules[\/\](@fullcalendar\/core|@fullcalendar\/react|@fullcalendar\/daygrid)[\/\]/,
53          name: "calendar-vendor",
54          chunks: "all",
55          priority: 19,
56        },
57        "vendor": {
58          test: /[\/\]node_modules[\/\]/,
59          name: "vendor",
60          chunks: "all",
61          priority: 10,
62        },
63      },
64    },
65  },
66};

1// vite.config.ts - Vite optimizeDeps includes we tried
2export default defineConfig({
3  optimizeDeps: {
4    include: [
5      "react",
6      "react-dom",
7      "react-router-dom",
8      "@mui/material",
9      "@mui/icons-material",
10      "@mui/lab",
11      "@mui/x-date-pickers",
12      "mobx",
13      "mobx-react",
14      "mobx-utils",
15      "axios",
16   "moment",
17      "lodash.debounce",
18      "lodash.isequal",
19      "@loadable/component",
20      "react-transition-group",
21      "react-window",
22      "recharts",
23      "reactflow",
24      "@monaco-editor/react",
25      "monaco-editor",
26      "@fullcalendar/core",
27      "@fullcalendar/react",
28      "@fullcalendar/daygrid",
29    ],
30    // Force pre-bundling of these dependencies
31    force: true,
32  },
33});
34

Pros and cons (in our context)

Vite – pros

• Blazing cold starts and lightweight config.
• Excellent HMR within already‑touched routes.
• Strong plugin ecosystem and modern ESM defaults.

Vite – cons‍

• Dep optimizer re‑runs can interrupt flow during first‑time navigation across many lazy routes.
• Requires careful setup in large monorepos and with linked packages.
• Typed ESLint in‑process can hurt responsiveness on large projects; better out‑of‑process.

Webpack + Fast Refresh – pros ‍

• Predictable first‑visit latency across many routes via eager vendor chunks.
• Fine‑grained control over loaders, plugins, and output.
• Fast Refresh preserves state and has mature error overlays.

Webpack + Fast Refresh – cons ‍

• Heavier initial load than Vite’s cold start.
• More configuration surface to maintain.
• Historical complexity (mitigated by modern config patterns and caching).

When we would pick each

Choose Vite if:

• Cold starts dominate your workflow.
• Your module graph isn’t huge or fragmented into many lazy routes.
• Plugins – especially typed ESLint – are light or run out‑of‑process.

Choose webpack + Fast Refresh if:

• Your app benefits from eager vendor pre‑bundling and predictable first‑visit latency across many routes.
• You want precise control over loaders/plugins and build output.
• You like Fast Refresh’s state preservation and overlays.

Learn more in the ilert blog.