Why I switched from Parcel to Vite ?

I am a Frontend Developer who loves to read and talk about Visual design, User experience, React Js, Unit Testing, CSS, Latest frontend tools and libraries.

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

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.

Vite - Speeds up the local build time.

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

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.

Great tooling support especially lint and typescript support.

Prod builds are equally fast as Vite.

Negatives

Cache issues especially when working with mono-repository.

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

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

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

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

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.

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!

Why I switched from Parcel to Vite ?

Comments

More from this blog

Simple steps to Improve your website ranking on Google (SEO)

Bring Your UI to Life: Creating Micro Interactions with Figma, Lottie & React

You don't need a store with React Hook Forms

Migrating to Vite,Vitest?

Introduction

Reasons for switch

Some positives and negatives of parcel and Vite

Parcel

Vite

Command Palette

Comments

More from this blog

Introduction

Reasons for switch

Some positives and negatives of parcel and Vite

Parcel

Vite