From Webpack to Vite: A Smooth Migration Journey

2022-09-05 3 min

Table of Contents

1. Why Migrate? Webpack’s Pain Points

Webpack is an extremely powerful and configurable module bundler that has been a cornerstone of frontend projects for years. As projects grow, however, its core bundling model creates performance bottlenecks:

Slow cold starts: Every time the development server (dev-server) starts, Webpack must traverse the entire dependency graph and bundle all modules into memory. In a large project, this process can take several minutes.
Slow hot updates (HMR): When you modify a file, Webpack must recalculate and replace the related modules. Although this is faster than refreshing the entire page, the delay can still reach several or even more than ten seconds in a large project, interrupting the development flow.

2. How Does Vite Solve These Problems?

Vite, whose name means “fast” in French, takes a different path. It uses modern browsers’ native ES module (ESM) support and divides the build process into two parts:

During development: Vite starts a server without bundling every module in advance. Instead, it intercepts module requests from the browser and transforms and serves source code on demand. For example, the browser requests main.js, and Vite serves it; main.js imports Button.vue, so the browser sends another request, and Vite serves the transformed Button.vue. This makes development server startup nearly instantaneous.
For production: Vite uses Rollup, another efficient bundler, to produce highly optimized static assets.

This model transforms the development experience, delivering lightning-fast startup and millisecond-level hot updates.

3. Practical Migration Steps

Migrating an existing Webpack project to Vite usually involves the following steps:

a. Install Dependencies and Create the Configuration File

First, install Vite:

pnpm add -D vite @vitejs/plugin-react # 或 @vitejs/plugin-vue

Then create vite.config.js in the project root:

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react()],
})

b. Move `index.html`

Webpack usually places index.html in the public directory and automatically injects the bundled JS. Vite treats index.html as the application entry point. You need to move it to the project root and add the script reference manually:

<!-- /index.html -->
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

c. Replace Webpack Plugins

You need to find Vite plugins corresponding to your Webpack Loaders and Plugins. The community ecosystem is rich, and solutions exist for most needs.

Webpack	Vite
`babel-loader`	`@vitejs/plugin-react` (built-in Babel)
`vue-loader`	`@vitejs/plugin-vue`
`file-loader`	Built into Vite
`webpack-dev-server`	Development server built into Vite

d. Handle Environment Variables

In Webpack, we are accustomed to using process.env.NODE_ENV. In Vite, environment variables must be accessed through import.meta.env, for example import.meta.env.VITE_API_URL.

e. Configure Path Aliases

Configuring path aliases in vite.config.js is straightforward:

import path from 'node:path'
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

4. Results After Migration

After migrating to Vite, the most immediate impression is speed.

Development server startup dropped from 50 seconds to 2 seconds.
Hot updates fell from an average of 3–5 seconds to almost imperceptible tens of milliseconds.
The configuration file (vite.config.js) became much simpler than webpack.config.js.

Conclusion

Although the migration may require handling some project-specific configuration issues, moving from Webpack to Vite brings an enormous improvement to the development experience. If you are still enduring a slow build process, now is the best time to embrace Vite.