Here's your Dev.to article:
Title: JavaScript Bundling Explained — From Zero to Optimised
Tags: javascript webdev performance beginners
You write your React or Angular app across dozens of files. Components, services, utilities, third party libraries — all split up neatly.
But here's the thing. The browser doesn't care about your neat folder structure. Loading 200 separate files means 200 separate network requests. That's slow. Really slow.
This is exactly the problem bundlers solve.
What is bundling?
A bundler takes all your files your code, your imports, your node_modules and combines them into one (or a few) optimised files that the browser can load efficiently.
Think of it like packing for a trip. Instead of carrying 50 small bags, you pack everything into one suitcase. Same stuff, much easier to carry.
That's bundling.
What else does a bundler do?
Combining files is just the start. Modern bundlers also:
Minification — removes whitespace, comments, and shortens variable names. Your readable userName becomes a. Same logic, way smaller file.
Tree shaking — removes code you imported but never actually used. If you imported a utility library but only used one function, the bundler strips the rest out automatically.
Code splitting — instead of one giant bundle, splits your code into smaller chunks. Only load what the user actually needs right now.
All of this = smaller files = faster app.
Webpack vs Vite — what's the difference?
Both are bundlers but they take very different approaches.
Webpack came first. It bundles your entire app upfront before serving it — even in development. That means every time you make a change, it rebundles everything. Powerful and highly configurable, but can feel slow in large projects.
Vite is the modern alternative. During development, it doesn't bundle at all it serves your files directly using native ES modules in the browser. Only the file you changed gets updated instantly. The result? Near instant hot reload no matter how big your project is.
For production, Vite uses Rollup under the hood to create optimised bundles.
| Webpack | Vite | |
|---|---|---|
| Dev speed | Slower | Extremely fast |
| Config | Complex but flexible | Simple out of the box |
| Ecosystem | Very mature | Growing fast |
| Best for | Large legacy projects | New modern projects |
Most new projects today use Vite. If you're creating a new project go with Vite.
How bundlers work internally
At a high level, every bundler does the same 3 things:
1. Build a dependency graph
Starting from your entry file (usually main.js or main.ts), the bundler follows every import and maps out which file depends on which. This is called the dependency graph.
2. Transform the code
Each file gets transformed TypeScript gets compiled to JavaScript, JSX gets converted to plain JS, modern syntax gets converted for older browsers.
3. Output the bundle
Everything gets combined, minified, and written to an output folder usually /dist. That's what gets deployed.
Bundle size optimisation tips
A bloated bundle = slow app. Here's how to keep it lean:
Lazy loading — don't load everything upfront. Load components only when the user navigates to them.
// React lazy loading
const Dashboard = lazy(() => import('./Dashboard'));
Avoid importing entire libraries
// ❌ Imports the entire lodash library
import _ from 'lodash';
// ✅ Import only what you need
import debounce from 'lodash/debounce';
Analyse your bundle
Use tools like webpack-bundle-analyzer or Vite's rollup-plugin-visualizer to see exactly what's taking up space.
Use production builds
Always deploy the production build. Development builds include debugging tools that add significant size.
# React
npm run build
# Angular
ng build --configuration production
Wrapping up
Bundling isn't magic it's a practical solution to a real problem. The browser needs fewer, smaller files. Bundlers make that happen automatically.
Start with Vite for new projects. Keep an eye on your bundle size as your app grows. And use lazy loading early — it's one of the easiest wins in frontend performance.
Top comments (0)