Why we switched from Webpack to Vite
https://news.ycombinator.com/item?id=26972400
Vite is a JavaScript build tool that provides a fast and lean development experience. Vite comes with a number of features including HMR, or Hot Module Replacement, a build command that bundles your tools with Rollup, and built-in support for TypeScript and JSX.
How it works
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.
It then serves your source code over native ES Modules, or ESM, which allows the browser to handle the actual bundling.
Finally, Vite supports HMR, which ensures only the relevant modules are replaced when a file is edited instead of rebuilding the entire bundle, which triggers a page reload and resets state. Unlike other bundlers, Vite performs HMR over native ES Modules which means it only needs to invalidate affected modules when a file is edited. This ensures that update times are consistently fast instead of scaling linearly as your application grows.
Getting Started
To get started, simply fork our React template or select React.js in the languages dropdown when creating a new repl.
Vite is also framework agnostic, so if React isn’t your thing, you can use our Vue and Vanilla JS templates too.
We hope this helps build out your ideas even quicker and look forward to seeing what you build!
HN thread:
Author of Vite here. I see many people evaluating Vite as a webpack replacement, so I want to clarify the goal of the project here:
It is NOT Vite’s goal to completely replace webpack. There are probably a small number of features/capabilities that some existing webpack projects rely on that doesn’t exist in Vite, but those features are in the long tail and are only needed by a small number of power users who write bespoke webpack configuration. Some of the commenters here probably belong in this group. If you do (e.g. you tried to migrate and found roadblocks, or evaluated and concluded that Vite doesn’t suite your needs), use webpack by all means! You are not Vite’s target audience by design – and you should absolutely pick the right tool for the job.
However, in the context of the general web dev population, 90% of existing devs and 100% of beginners don’t need or care about these long tail features. This is an estimation made based on years of experience working on vue-cli, which is webpack-based. (context: I’m also the author of Vue.js and vue-cli is downloaded more than 3 million times per month on npm). Vite is optimized for these common use cases, and we’ve heard many success stories of painlessly moving from vue-cli/CRA to Vite.
This is also why Vite is a good fit for Repl.it where majority of its use cases overlap with the target use cases of Vite.
That said, we are also seeing frameworks like Svelte/Solid/Marko building SSR meta frameworks on top of Vite, projects that were previously webpack-based offering alternative modes running on top of Vite (e.g. Nuxt, Storybook), so we believe Vite does cover quite a lot even for power users.
So – try it, and if it doesn’t work for you, stick to webpack (specially if you have an existing project relying on specific webpack behavior). As many people said, webpack 5 has made decent performance gains, and if you are targeting modern browsers, consider replacing Babel/TS with esbuild. These should already get you pretty far.