A bundler is a build tool that follows the import statements in your code, gathers every module and dependency, and outputs optimized files for the browser. Webpack, Rollup, esbuild and Vite are common examples.
Why it matters
Modern projects have hundreds of modules and packages. Bundlers combine and transform them, minify the result, split code into chunks that load on demand, and apply tree shaking. The output filenames usually include a content hash, so browsers can cache them for a long time and still fetch new versions after a deploy. Most bundlers also provide a development server, so one tool covers both local work and production builds.
Example
$ npm run build
dist/index.html 0.5 kB
dist/assets/app-3f9a1c.js 142 kB
dist/assets/app-8b21d0.css 12 kBThe hash in app-3f9a1c.js changes whenever the code changes.
Common mistakes
- Bundling everything into one huge file instead of splitting by route.
- Setting long cache lifetimes on files without hashed names.
- Importing a whole library when you need one function.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.