Refactoring FieldTask: How I Cut Build Times 6x

Why the old pipeline had to go

FieldTask's frontend had been on Create React App and Babel since the project's first commit. Every CI run paid the same tax: a full, uncached transpile of a codebase that had grown far past what that setup was designed for. Local rebuilds crept past ten seconds, and CI build times were eating into every deploy window.

Picking Vite over Webpack

I evaluated a Webpack 5 upgrade first, since it was the smaller diff. But Vite's native ESM dev server and esbuild-based dependency pre-bundling promised a bigger win for the same migration effort, and the auth-gateway project had already proven the toolchain out on a smaller codebase.

- Swapped Jest for Vitest to keep the test runner on the same dependency graph as the build. - Replaced CRA's Webpack config with a Vite config plus the React plugin, no ejecting required. - Migrated environment variable handling from REACT_APP_ prefixes to Vite's import.meta.env. - Ran both pipelines in parallel in CI for two weeks before removing the old one.

Results

Production build times dropped 6x, from just under three minutes to under thirty seconds. Local dev server startup and hot-reload sped up enough that engineers stopped context-switching during rebuilds — a 43% improvement in measured development speed across the team.

"The best migrations are the ones nobody notices happening until the build finishes early."