Migrating a 5-Year-Old CMS Project from Webpack 4 to Vite

A CMS maintained since 2020, built on React 16, TypeScript 4.4, MobX 5, Material-UI 4, and Webpack 4, hit its limits as it grew. After growing to over 40 domains, over 30 dynamic routes, a 538-line config file, and over 300 dependencies, CI/CD builds began failing with OOM.

Neither the stopgap of increasing memory from 4GB to 8GB, nor optimizing filesystem cache and splitChunks, provided a fundamental fix. In reality, circular references, Webpack 4's structural memory overhead, and TypeScript type-checking cost compounded together, requiring at least 6GB or more of memory, and at the 4GB limit, FATAL ERROR: ... heap out of memory would occur.

The migration candidates were Vite, Parcel, and Rsbuild, and Vite was ultimately chosen. The reasons were as follows:

• An ESM-based dev server that serves only the needed modules without full bundling
• A Rollup-based production build and an active plugin ecosystem
• The ability to accommodate legacy combinations like MobX decorators, React 16, and MUI 4 via Babel configuration

As a result of the migration, the config was reduced from 538 lines to 121 lines, a 77% decrease, and over 9 Webpack-related packages were removed while only the core Vite-related packages were added. The work proceeded on a separate qa-vite-conversion branch, aliasing querystring to qs, transpiling react-csv as an exception via Babel, and pre-bundling dayjs via optimizeDeps.include.

The results were clear.

• Production build time: 54.28s → 28.21s, a 48% decrease
• Dev server startup time: about 47s → 102ms, a 460x improvement
• Bundle size: 57MB → 11MB, an 81% decrease
• Build memory: needed 8GB → stabilized under 4GB
• 210,000 lines of code removed

Node.js was also upgraded from 16.18.0 to 22.14.0, securing an up-to-date LTS environment. Ultimately, this confirmed that if old configurations and accumulated technical debt aren't cleaned up, problems will eventually erupt in forms like build failures, and that measurement and incremental migration are the key to legacy migration.