Tree Shaking
Tree shaking is a dead code elimination technique used by modern JavaScript bundlers that removes unused exports from modules during the build process, producing smaller production bundles.
When you import one function from a library, tree shaking ensures only that function (and its dependencies) end up in your bundle — not the entire library. This requires ES module syntax (`import`/`export`) and a bundler that supports it (Webpack, Turbopack, Rollup, esbuild).
Tree shaking fails when: libraries use CommonJS (`require()`), code has side effects that prevent safe removal, or barrel exports (`index.ts` re-exporting everything) prevent the bundler from analyzing which exports are used. Next.js's `optimizePackageImports` config helps with barrel exports from known libraries.
To ensure effective tree shaking: prefer libraries that ship ES modules, avoid importing from barrel files when possible (`import { Button } from './Button'` instead of `import { Button } from './components'`), and mark your package as side-effect-free in `package.json` with `"sideEffects": false`.
Related terms
Code Splitting
Code splitting is a technique that breaks a JavaScript application into smaller chunks (bundles) that are loaded on demand, reducing the initial payload size and improving page load performance.
Page Speed
Page speed is the measurement of how quickly a web page's content loads and becomes interactive, typically measured by metrics like Time to First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP).
Lazy Loading
Lazy loading is a technique that defers the loading of non-critical resources (images, iframes, components) until they are about to enter the viewport, reducing initial page load time.
Stop shipping broken SEO
Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.