Introduction

We have recently switched from parcel to Vite in one of my frontend projects(tech stack - Yarn Monorepos, React, Typescript, Styled Components, Jest, RTL). we were facing the problem of HMR since we were using mono repos, so decided to give a shot at vite and the results were incredible. Vite is fast!

Reasons for switch

1. Parcel is a zero-config tool. It simplifies the project setup at the cost of cache issues, poor HMR and slower build times. This problem will be more evident in bigger projects. I still recommend Parcel for people who are starting out new or don't want to worry about the project setup.

2. Vite - Speeds up the local build time.

3. Vite - HMR(hot module replacement) is incredibly fast. Loads the changes in no time. Vite internally uses Rollup as a bundler but they are planning to use esbuild in future which might make it even faster for production builds. Click to know more.

Some positives and negatives of parcel and Vite

Parcel

Positives

1. Seriously Zero Config. This is the tool you should go for if you are a newbie or don't want to scratch your head around project setup.

2. Great tooling support especially lint and typescript support.

3. Prod builds are equally fast as Vite.

Negatives

1. Cache issues especially when working with mono-repository.

2. HMR delay. Take a lot of time to reflect the changes on the browser which can be because of the cache it maintains. The browser gets into the loading state and never recovers from it, the only solution is to close the tab or restart the parcel build script.

Vite

Positives

1. Incredibly fast build times, especially local builds but comparatively prod build might take more time.

2. HMR works like a charm. The browser reflects the changes in no time. Hardly there are times when I have to go and refresh the page.

Negatives

1. Tooling support for lint and typescript is not that great as of now. I am using vite-plugin-checker for highlighting typescript issues.

2. Little Config overhead. It needs you to go through the docs to set up the project but I feel it's minimal. Far better than webpack config.

3. Changes are required for environment variables for eg. env variables are now exposed on import.meta.env and they have to be appended with VITE_ for it to be accessible in the project. Click here to know more. Jest test setup might start throwing errors because now the environment variables are not directly accessible on process object. But there is still a way to fix that by using the define attribute in vite.config.js . Click here to know more.

I will cover the setup part for React, Typescript, Jest + Vite in upcoming blog.

Feel free to share your thoughts in the comments.

Thanks for reading!