How to Migrate a Large Webpack Project to Vite and Cut Build Time by 98%

Introduction

In frontend development, the choice of build tool is crucial. While Webpack has been the mainstream, Vite has emerged as a fast, modern alternative.

Applying Simon Sinek's Golden Circle model, this article explores how to migrate a Webpack project to Vite.

Result: Build time reduced from 120 s to 1.5 s, a 98 % improvement.

What is the Golden Circle

The Golden Circle, proposed by Simon Sinek, consists of three concentric circles: Why, How, What.

Why : core motivation.

How : methods and means.

What : concrete actions and deliverables.

Great leaders think from the inside out (Why → How → What). The same principle can guide migration decisions.

Why Migrate

Current problems

Complex project with >7,000 module dependencies.

Slow development builds: ~120 s on macOS, even slower on Windows.

Hot‑module replacement takes ~2 s on macOS.

Large bundle size, difficult to optimize further.

These issues motivated us to seek a faster, smaller solution.

Vite’s Faster Development Experience

Vite leverages native ES modules in the browser, avoiding full bundling during development, which dramatically speeds up startup and HMR, especially for large projects.

Vite Build Model

Only the modules required for the entry page are parsed, enabling rapid startup.

Modern Features

Vite includes built‑in TypeScript support, Rollup‑based production builds, and other modern capabilities.

Simpler Configuration

Compared with Webpack’s complex config, Vite’s config is concise and easier to maintain.

Migration Steps

Initialize Vite dependencies:

<code>npm i [email protected] [email protected] -D</code>

Install Vue 2 compatible plugins:

<code>npm i [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]</code>

Adjust project structure: copy

public/index.html

to the project root.

Update template variables in the entry file.

Define

VITE_APP_TITLE

in

.env

.

Configure

vite.config.js

(example provided below).

Handle CSS modules by renaming files to

*.module.scss

.

Replace deprecated

/deep/

selectors with

::v-deep

(plugin example provided).

Configure global SCSS variables via

css.preprocessorOptions

.

Vite Configuration Example

<code>import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import envCompatible from 'vite-plugin-env-compatible'
import { viteCommonjs } from 'vite-plugin-commonjs'
import viteRequireContext from 'vite-plugin-require-context'
import dynamicImport from 'vite-plugin-dynamic-import'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

function vitePluginTransDeep() {
  return {
    name: 'vite-plugin-transform-scss',
    enforce: 'pre',
    transform(src, id) {
      if (/\.(js|vue)(\?)*/.test(id) && id.includes('lang.scss') && !id.includes('node_modules')) {
        return { code: src.replace(/(\/deep\/|>>>)/gi, '::v-deep') }
      }
    }
  }
}

export default defineConfig({
  plugins: [
    createVuePlugin({ jsx: true }),
    dynamicImport(),
    viteCommonjs(),
    viteRequireContext(),
    envCompatible(),
    nodePolyfills(),
    vitePluginTransDeep()
  ],
  envPrefix: ['VUE_APP_'],
  base: '/dd/',
  server: { host: 'me.jr.jd.com' },
  resolve: { extensions: ['.js', '.vue', '.json'], alias: {} },
  css: { preprocessorOptions: { scss: { additionalData: `@import './src/variables/index.scss';` } } }
})
</code>

Migration Value and Results

After migration, build time dropped to 1.5 s, HMR to ~0.2 s, and bundle size decreased significantly.

Overall Summary

Using the Golden Circle framework, we examined the motivation, method, and concrete actions for migrating a Webpack project to Vite. Vite’s rapid development experience, modern features, and simple configuration make it an attractive choice for frontend engineering.