What are bundlers (Webpack, Rollup, Parcel, esbuild, Vite) ?
Can someone explain what bundlers are. For example, I know "Vite" is a bundler, I only heard the term but never bother to find out. From what I've read/understand, a bundler is just a kind of "pre-processor" that process our JS files before being rendered on the web? Can someone clarify and add to if if needed please.
I was read that using a bundler can result in less files being used and "unnecessary" content being removed. I'm kind of confused about this point, would really appreciate if someone can elaborate.
14 Replies
A bundler creates a bundle. The original purpose was to allow a project to have multiple JS files during development. The bundler would combine them all into one JS file for deployment. Contemporary bundlers do more than this. They also include things like compiling TS to JS, tree shaking, minification, and other processes needed to convert dev code to deliverable code.
Ah ok, having multiple JS files wasn't really a good thing?
with http 1.0 and 1.1, it's horrible for performance
with 1.0, you would have to open and close each tcp connection to the server, with https handshakes and all, for EACH file
with 1.1, you could say to keep the tcp connection open and the files would all be sent in the same connection
but still, it has a lot of overhead, as one request has to end to download the next file, making it slow
with 3.0, the same connection can be used to send many files at the same time
with 2.0, it's a mess because servers do different things, so, im not even gonna get there
by the way, with http 1.0 and 1.1, browsers open 2 connections instead of 1, to try and speed things up
oh ok
Also don't mistake Build tooling for bundlers either. π₯²
ah ? Because they are different? π π₯²
thought these were the same things π
No they are different
Vite does more than bundling, Rollup does it.
Soon Rolldown too (uses esbuild now)
will have to read on that a bit, thanks ! Good to know these are 2 different things
Vite is its own beast really
because it does things for Dev server/env then also uses Rollup to bundle for prod
Thats how we get good HMR from it and why it requires ESM (I think)
The only other real comparable lib would be Snowpack (what Fred Scott made before Astro)
oh I guess this ? https://wmr.dev/
WMR: Tiny all-in-one development tool for modern web apps.
Complete tooling from dev to prod, in a 2mb CLI with no dependencies. Supports Rollup plugins, hotlinking and HMR.
but that is for preact only? π€·ββοΈ
yep I will read a bit about that and came back, thanks !
https://voidzero.dev/
They even use that as "offical language" too
Vite is a build tool, Rollup/down are bundlers
I always forget about TurboPack too (webpack successor) because I don't use NextJS but ... they call it a bundler with HMR (cause ofc they gotta be that way lol)
noted, will try to read a bit on vite since it's the one I mostly heard of π