DEV Community

Migrating your React app from Webpack to Vite

Wojciech Maj on April 07, 2022

What is Vite? Vite is a "next generation front-end tooling", as its maintainers claim. Instant dev server, fast Hot Module Reload, easy ...
Read full post
Collapse
 
ekeijl profile image
Edwin • • Edited

Great article! Could you add some info about production builds, difference in timing? When using Webpack, the production build often takes longer due to minimization. Would be interesting to see some statistics for Vite.

Another helpful Webpack feature is aliases, that prevent long absolute paths, e.g.

// instead of
import x from '../../../components/x';
// you write
import x from '@components/x';
Enter fullscreen mode Exit fullscreen mode

I see Vite has a plugin for it.

Collapse
 
wojtekmaj profile image
Wojciech Maj • • Edited

Thanks for the kind words!

Regarding performance - Vite uses esbuild under the hood, and esbuild caused quite a commotion in the industry when it was released.

Enough has been written on this matter so I'll just quote.

Vite pre-bundles dependencies using esbuild. Esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.

vitejs.dev/guide/why.html
esbuild.github.io/

Collapse
 
jamesthomson profile image
James Thomson •

While Vite uses ESBuild during development, it actually uses Rollup for bundling production builds, so the comparisons should be between Webpack & Rollup as ESBuild doesn't weigh in here.

Collapse
 
wintercounter profile image
Victor Vincent •

Most of the time building for prod isn't spent on transpilation. That's why OP is asking. I'm using SWC with Webpack which is even faster than ESBuild, yet prod builds take much longer due to optimizations like minification, tree-shaking, bundle chunks, etc...

Collapse
 
yaireo profile image
Yair Even Or •

You can also set up aliases in Babel (and not Webpack) using the module-resolver plugin

Collapse
 
wojtekmaj profile image
Wojciech Maj • • Edited

An extra tip:

When using Yarn >=2, during installation, you'll get a ton of warnings about esbuild:

The … architecture is incompatible with the this module, link skipped.

You can suppress them by adding the following to yarnrc.yml:

logFilters:
  - code: YN0076
    level: discard
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jamesthomson profile image
James Thomson •

Here's another tip if you need to access your Vite env vars within the config:

import { defineConfig, loadEnv } from 'vite';

defineConfig(({ mode }) => {
  // Loads our env file and merges it with Node's process.env
  Object.assign(process.env, loadEnv(mode, process.cwd()));
})
Enter fullscreen mode Exit fullscreen mode

I found this useful when setting up local https for the devserver.

server: {
      port: 8080,
      https: process.env.VITE_HTTPS_CERT_PATH
        ? {
            cert: fs.readFileSync(process.env.VITE_HTTPS_CERT_PATH),
            key: fs.readFileSync(process.env.VITE_HTTPS_KEY_PATH),
          }
        : null,
    }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
elfsternberg profile image
Eλf Sternberg •

This is great, even if I'm already using Vite for all my personal projects anyway. One thing I've discovered: if your project was written with Create-React-App, don't even bother ejecting. Just delete everything that wasn't your hand-written code, retaining the src and assets and images and all that, adjust the package.json file as you specified, and iterate until it builds. It takes remarkably little time, and Vite is such a greater pleasure to work with compared to CRA.

Collapse
 
frangaliana profile image
Fran Galiana •

I've seen that there could still be incompatibilities with Jest.
Without using the @vite-jest plugin (Authors are working on it yet), how could I configure vite to use jest with testing-library?

Thank you very much for the work and information👌

Collapse
 
tarang_workspace profile image
Tarang P •

I need help with a project that has been around for approximately 7 years and currently uses Webpack and Babel with specific configurations. I'm seeking support to replace Vite in this particular project.

Thank you.

Collapse
 
cezarneaga profile image
Cezar Neaga •

Is there a way to use vite with multiple entries? Meaning having different bundles load in more than one index.html file?

Cheers,
Cezar

Collapse
 
eissorcercode99 profile image
The EisSorcer •

Why would one want to do this from a practical standpoint? Or rather, what are the use cases that requires this?

Collapse
 
elfsternberg profile image
Eλf Sternberg •

Speed and control. Webpack, especially as part of create-react-app, is enormous, and it comes with dozens of side cases and plug-ins that you just do not need. Vite's build system is significantly faster and its dev server lighter weight, plus the plug-ins and features are limited to exactly what you specify, and nothing else.

Collapse
 
getsetgopi profile image
GP •

You can create your own webpack config and not rely on RCA. We have created our own react starter kit, it's pretty small and has only what is need for the project. Creating webpack config is super easy and works great.

Thread Thread
 
elfsternberg profile image
Eλf Sternberg •

That's true, and I don't disagree. My experience, professionally, has been that most web developers out of bootcamp start with create-react-app as they've been taught, and when the project grows to the point where it no longer serves them well, have to struggle with eject, cra-rewire, or manual migration. Webpack's config is easy to learn, but so is Vite's, and I find Vite's dev-UX just a bit more pleasant.

Collapse
 
getsetgopi profile image
GP •

Does Vite has Webpack Module Federation feature?

Collapse
 
flyfishzy profile image
Joe Zhang •

There is a vite plugin for Module Federation github.com/originjs/vite-plugin-fe...

Collapse
 
jucian0 profile image
Jucian0 •

Great article! Thanks for sharing