Bundling

As explained in Web Components in Action

Module bundling is the process of combining source modules and their dependencies into one or more deployable output files.

Module bundling combines source modules and their dependencies into one or more deployable files. It preserves the benefits of small, organized JavaScript files while reducing browser network requests and avoiding timing problems caused by scripts loading separately. section 12.4

A module bundler typically:

• Follows import statements to discover the dependency graph. section 12.4
• Combines the required modules into a final output file or multiple output bundles. section 12.4
• Uses tree shaking to omit imported modules that the application never uses. section 12.4
• Generates source maps so bundled errors can be traced back to source files. section 12.4

Building a component with Rollup

Keep a component’s source in separate files, such as slider.js and its imported modules, then run Rollup with the source entry point, an output filename, the UMD format, a global name, and source-map generation. A package.json build script can wrap that command, while separate scripts can build several components and a combined script can run them in sequence. section 12.4 section 12.4

Figure 12.1. Rollup vs. Webpack

Compare Rollup and Webpack when choosing between focused module bundling and broader multi-bundle or file-type support. section 12.4

How Web Components in Action covers it

How deep it goes

Explains dependency tracking, tree shaking, source maps, and Rollup build commands, but defers complex build-system setup.

Examples

Uses component source folders, import statements, Rollup commands, package.json scripts, and chained builds.

What it assumes

Assumes basic JavaScript modules and imports while introducing the reasons for a build step from practical browser-loading concerns.

What you can do after

Operate/configure Rollup through npm scripts to produce component bundles with UMD output and source maps.

How it connects

Connects ES6 modules, tree shaking, source maps, npm, package.json, Rollup, Webpack, and transpilation.

liveBookmanning.com

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

Also explained in

• 

  liveBookmanning.com
  Essential TypeScript 5, Third EditionA bundle is a generated file or set of files containing packaged application modules and their dependencies for delivery to a client.
• 

  liveBookmanning.com
  Pro Angular 16Bundling is the process of consolidating compiled application modules and their resources into distributable files.
• 

  liveBookmanning.com
  React in DepthThe process of transforming source files and dependencies into optimized application bundles.
• 

  liveBookmanning.com
  The Well-Grounded Rubyist, Fourth EditionBundler is a Ruby dependency manager that resolves and installs the exact gem versions specified for a project.
• 

  liveBookmanning.com
  Build a Frontend Web Framework (From Scratch)The process of combining source modules or related assets into fewer output files for delivery.
• 

  liveBookmanning.com
  Automating API DeliveryBundling is the technique of combining an API document with the definitions referenced from other files or URLs into a single document.
• 

  liveBookmanning.com
  Refactoring to RustA bundler is a build tool that combines source modules and dependencies into one or more distributable assets.

Compare how 8 books explain bundling →

Related concepts

• Webpackincludes · Webpack is a JavaScript module bundler that analyzes dependencies and processes application modules and assets into bundles for delivery or execution.
• OpenAPI specificationuses · The OpenAPI Specification is a standard, machine-readable format for describing HTTP APIs, including their operations, inputs, outputs, data structures, and security requirements.
• CSS Modulesused by · CSS Modules is a build-time CSS scoping technique that transforms class names into locally unique names to prevent naming collisions.
• browserused by · A web browser is software that retrieves, interprets, and renders web resources, executes supported web content, and enables interaction with web pages and applications.

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.