Madeleine Moser

Code-Splitting

Bundling is great, but as your app grows, your bundle will grow too.

Madeleine Moser
Code-Splitting

Internal navigation

You can visit this post, or this page, go back to the homepage or just back to the archive.

Bundling

Most React apps will have their files “bundled” using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.

Example

App:

javascript
// app.js
import { add } from './math.js';

console.log(add(16, 26)); // 42
javascript
// math.js
export function add(a, b) {
  return a + b;
}

Bundle:

javascript
function add(a, b) {
  return a + b;
}

console.log(add(16, 26)); // 42

Note:

Your bundles will end up looking a lot different than this.

If you’re using Create React App, Next.js, Gatsby, or a similar tool, you will have a Webpack setup out of the box to bundle your app.