A bundler takes your source files and dependencies, builds a dependency graph by following imports, transforms code like JSX, and outputs optimized bundles the browser can run.

Tree shaking removes unused code from your final bundle. It relies on the static structure of ES modules to determine which exports are never used, so they are excluded from the output.

Code splitting breaks your bundle into smaller chunks loaded on demand, usually via dynamic imports. It reduces the initial bundle size and improves load performance.