Tree-shaking

As explained in Web Components in Action

Tree shaking is static analysis that removes imported code and other module parts that are not used from a bundle.

Tree shaking analyzes module imports and excludes imported code that the application never uses, producing smaller JavaScript bundles with only the required code. section 12.4

Unused modules in a component bundle

Suppose a component imports a module but never calls or references it. A bundler such as Rollup can omit that module from the final output. For a larger application, separate functionality bundles can also keep account information code out of a user’s transaction view. section 12.4

Figure 12.1. Rollup vs. Webpack

Compare Rollup’s simpler bundling approach with Webpack’s more complex support for multiple output bundles and additional file types. section 12.4

How Web Components in Action covers it

How deep it goes

Defines import tracking and omission, then stops short of explaining the analysis algorithm or configuration details.

Examples

Uses an unused module and a banking application separating transaction and account-information bundles.

What it assumes

Introduces the shift from pre-ES2015 file concatenation to module-based imports and bundling.

What you can do after

Apply it via Rollup or Webpack to create smaller bundles containing only needed module code.

How it connects

Connects ES modules, import statements, module bundling, build processes, and multiple output bundles.

liveBookmanning.com

Read Web Components in Action on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  The Joy of JavaScriptA bundler optimization that removes unused exports, modules, or code paths from a program during build time.

Compare how 2 books explain tree-shaking →

Related concepts

• CommonJScontrasts with · CommonJS is a JavaScript module-system specification that defines how modules export and load values, traditionally using synchronous require calls and module.exports assignments.
• Viteused by · Vite is a frontend development tool that provides a development server and production build pipeline for modern web applications.
• package.jsonconfigured by · package.json is the standard JSON manifest for an npm or Node.js package, declaring metadata, dependencies, scripts, entry points, and related configuration.

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.