Why we switched from Webpack to Vite

#1

Post by schestakov » Wed, Apr 28, 2021, 6:20 PM UTC

Why we switched from Webpack to Vite
blog.replit.com

Re: Why we switched from Webpack to Vite

#2

Post by WORMS_EAT_WORMS » Wed, Apr 28, 2021, 6:53 PM UTC

From the article, a good explainer:

> Vite works by treating your source code and your dependencies differently. Unlike your source code, dependencies don't change nearly as often during development. Vite takes advantage of this fact by pre-bundling your dependencies using esbuild. Esbuild is a JS bundler written in Go that bundles dependencies 10-100x faster than JavaScript based alternatives like Webpack and Parcel.

Re: Why we switched from Webpack to Vite

#3

Post by marclave » Wed, Apr 28, 2021, 6:55 PM UTC

It's always impressive to me that, the co-founder of Figma (https://twitter.com/evanwallace) who essentially built a browser in a browser (figma.com) built esbuild. Could honestly be the Woz of our generation.

Re: Why we switched from Webpack to Vite

#4

Post by TurningCanadian » Wed, Apr 28, 2021, 7:01 PM UTC

For people already on webpack, there's esbuild-loader (https://github.com/privatenumber/esbuild-loader)

Re: Why we switched from Webpack to Vite

#5

Post by zellyn » Wed, Apr 28, 2021, 7:01 PM UTC

I was a little surprised that Vite, which depends on esbuild and thus should know better, is written in Javascript.

I presume this is a considered choice, and that what Vite does is unlikely to be on the critical path for edit/build/view cycle time…

Re: Why we switched from Webpack to Vite

#6

Post by amasad » Wed, Apr 28, 2021, 7:04 PM UTC

Some stats not mentioned in the post. Create React App (webpack) vs Vite (esbuild) on Replit containers:

- 1 second start up time on Vite vs 15 seconds for CRA

- React.js hello world project is 234mb on CRA and only 34mb on Vite

- 1GB RAM for Vite dev server vs 3GB+ for CRA

This is a perfect example of how fast and efficient tools can be, and I think we can do even better! Super excited about the future of JavaScript tooling ecosystem with more focus on efficiency and speed.

In addition to the UX win, and I wish we measured this, but I bet this saved us thousands of dollars in monthly cloud spend.

Re: Why we switched from Webpack to Vite

#7

Post by yepthatsreality » Wed, Apr 28, 2021, 7:14 PM UTC

> Esbuild is a JS bundler written in Go that bundles dependencies 10-100x faster than JavaScript based alternatives like Webpack and Parcel.

A JS library calling a golang js-build tool to get the job done. Too funny.

Re: Why we switched from Webpack to Vite

#8

Post by Vekz » Wed, Apr 28, 2021, 7:15 PM UTC

marclave wrote: post #3

It's always impressive to me that, the co-founder of Figma ( https://twitter.com/evanwallace ) who essentially built a browser in a browser (figma.com) built esbuild. Could honestly be the Woz of our generation.

He has some insanely high quality projects. shout out to his His Kiwi Schema https://github.com/evanw/kiwi project that saved me from protobuff swamp monster hell

Re: Why we switched from Webpack to Vite

#9

Post by nailer » Wed, Apr 28, 2021, 7:16 PM UTC

TurningCanadian wrote: post #4

For people already on webpack, there's esbuild-loader ( https://github.com/privatenumber/esbuild-loader )

Ooh next uses webpack right? Might be some free speed. Thanks.

Re: Why we switched from Webpack to Vite

#10

Post by mavelikara » Wed, Apr 28, 2021, 7:19 PM UTC

yepthatsreality wrote: post #7

> Esbuild is a JS bundler written in Go that bundles dependencies 10-100x faster than JavaScript based alternatives like Webpack and Parcel. A JS library calling a golang js-build tool to get the job done. Too funny.

Many golang webapps use JS as their front-end language. Use the right tool to get the job done etc.