tree-shaking

To eliminate dead code and shrink JavaScript bundle size, use ES2015 import/export syntax and configure your bundler to support tree shaking. Import only what you need and mark side-effect-free packages to maximize unused export removal.

Tree shaking is a technique that eliminates dead code from JavaScript bundles to reduce bundle size and improve load performance. It works by identifying and removing unused exports in modern front-end applications using ES modules.

Tree shaking requires ES2015 import/export syntax to function effectively. You must use ES modules rather than CommonJS, because the static structure of ES module imports and exports enables bundlers to detect and remove unused code.

Configure Webpack or Rollup for tree shaking by using ES modules and named imports in your code. Ensure your bundler configuration supports tree shaking, and mark packages as side-effect-free so the bundler can safely remove unused exports.

Tree shaking fails to remove unused code when packages are not marked as side-effect-free. Without this designation, bundlers must preserve all exports to avoid breaking hidden side effects, preventing dead code elimination and leaving the bundle size unchanged.

The best way to reduce bundle size for modern web apps is applying tree shaking by importing only what you need and marking side-effect-free packages. This eliminates dead code from JavaScript bundles to improve load performance.