Vite: How We Eliminated the 45-Second Wait on Every Change
With Create React App our dev server took 45 seconds to start and every change required 8 seconds of rebuild. After migrating to Vite, startup is under 300ms and HMR is instant. Here's how we configured it for i3k.eu, CRM81, and LetsAI.
From Create React App to Vite: The Migration We Should Have Done Sooner
For years we used Create React App (CRA) for our frontend projects. It worked, but as the codebase grew the situation became unsustainable. The i3k.eu site had reached 120 React components and 85 TypeScript files. CRA took 45 seconds for dev server cold start and every file change required 6-8 seconds for a full rebuild. Those seconds, multiplied by hundreds of changes per day, become hours lost. CRA's fundamental problem is Webpack: on cold start it must parse and bundle the entire project before serving a single page. Vite uses a radically different approach: it leverages the browser's native ES modules. Instead of bundling everything, it serves files as-is and lets the browser handle module resolution. The result is near-instant startup, regardless of project size. The migration from CRA to Vite took us one day. The bulk of the work was renaming .env files (from REACT_APP_ to VITE_), updating SVG imports (Vite uses ?react as a suffix), and replacing react-scripts with Vite plugins in package.json. No changes to component logic. The moment we first ran vite dev and the server started in 280ms, we knew we were never going back.
Instant HMR and Developer Experience
Vite's Hot Module Replacement (HMR) is what truly changed our daily productivity. With CRA/Webpack, when we modified a React component the system recompiled the entire module and its dependents. With Vite, HMR replaces only the modified module, and does it in under 50ms. That's not a marketing number — we measured it with performance.now() in our development hooks. This change has a direct impact on code quality. When the change is instant, you experiment more. You try a CSS variation, see the result, adjust. With 8 seconds of waiting, you save up changes, iterate less, and the final result is worse. For CRM81, our management system with over 200 components, Vite's HMR is even more critical. The system has complex forms with multi-step state. With Webpack, every rebuild reset the form state and you had to re-enter test data. Vite preserves component state during HMR thanks to React Fast Refresh, so you can modify a field's validation and see the result without losing the 15 fields already filled in. Error handling is also superior. When you introduce a TypeScript error, Vite shows an overlay in the browser with the exact message, line, and column. With CRA the overlay was often cryptic and required going back to the terminal to understand the real problem.
Production Build: Code Splitting and Chunk Optimization
For development Vite uses ESBuild (written in Go, 100x faster than Webpack). For production builds it uses Rollup, which produces more optimized bundles with aggressive tree-shaking. Our configuration for i3k.eu includes several specific optimizations. Code splitting with lazy routes: every site page (Home, About, Blog, Contact) is loaded on-demand with React.lazy(). A user visiting the home page downloads only 85KB of initial JavaScript. Blog pages are loaded only when needed. The Lighthouse result: Time to Interactive under 2 seconds on a 3G connection. Chunk optimization with manualChunks in vite.config.ts: we separated dependencies into logical chunks. React and React DOM in one chunk, animation libraries (framer-motion) in another, utilities (date-fns, i18n) in a third. This maximizes browser cache hits: when we update application code, dependencies stay cached. Compression and asset optimization: we use the vite-plugin-compression plugin to generate gzip and brotli versions of every asset. Images are optimized with vite-plugin-imagemin. Unused CSS is eliminated by Tailwind CSS with its built-in purging system. The production build numbers for i3k.eu: total bundle 320KB (gzip), of which 95KB is critical JavaScript for the first render. Build time: 4.2 seconds. With CRA/Webpack the same build took 38 seconds and produced a 480KB bundle. Both the i3k.eu site and the LetsAI dashboard are deployed on Vercel, which integrates perfectly with Vite without additional configuration.
Related Services
See how we apply these technologies in our enterprise projects.
Interested?
Contact us to receive a personalized quote.
Securvita S.r.l. — i3k.eu