Bundling
Bundling is the process of combining related modules, dependencies, or assets into one or more packaged units for delivery, loading, or execution.
Web Components in Action
Module bundling is the process of combining source modules and their dependencies into one or more deployable output files.
- How it is used
- Reduces browser requests and packages modular JavaScript for deployment, especially when supporting older browsers.
- 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 you can do after
- Operate/configure Rollup through npm scripts to produce component bundles with UMD output and source maps.
Essential TypeScript 5, Third Edition
A bundle is a generated file or set of files containing packaged application modules and their dependencies for delivery to a client.
- How it is used
- Packages resolved application dependencies for efficient delivery to a browser over HTTP.
- How deep it goes
- Works through webpack setup, development serving and production output without detailing webpack’s internal bundling algorithm.
- Examples
- Uses webpack.config.js, an HTML script reference, development-server commands and a production build command.
- What you can do after
- Build it from scratch with webpack and ts-loader, then serve a development bundle or create a minified production bundle.
Read how Essential TypeScript 5, Third Edition explains bundling →
Pro Angular 16
Bundling is the process of consolidating compiled application modules and their resources into distributable files.
- How it is used
- Uses bundling to deliver compiled Angular modules and resources to browsers without managing individual source-file downloads.
- How deep it goes
- Traces imports from `main.ts` through compilation and bundle reports, then contrasts development and production builds without requiring direct webpack configuration.
- Examples
- Traces `main.ts` imports, inspects chunk reports, adds a Bootstrap 5.2.3 stylesheet, and compares `ng serve` with `ng build`.
- What you can do after
- Operate/configure it with `ng serve`, `ng build`, and `ng config`, then interpret bundle reports and stylesheet changes.
React in Depth
The process of transforming source files and dependencies into optimized application bundles.
- How it is used
- Organizes source and dependency processing within React application setup and productivity tooling.
- How deep it goes
- Explains CSS imports and emitted assets, but defers loader configuration and other technical details to the setup.
- Examples
- Uses Vite CSS imports, separate emitted assets, direct HTML references, and alternative bundler CSS-loader configuration.
- What you can do after
- Apply it via Vite to import CSS from JavaScript and produce document-ready CSS and JavaScript assets.
The Well-Grounded Rubyist, Fourth Edition
Bundler is a Ruby dependency manager that resolves and installs the exact gem versions specified for a project.
- How it is used
- Coordinates Ruby project dependencies so required gems and versions can be installed together.
- How deep it goes
- Explains dependency declaration, resolution, fetching, installation, and execution, but does not detail Bundler's internal resolver.
- Examples
- Uses a colorize Gemfile, bundled installation output, and a bundle exec Ruby command.
- What you can do after
- Operate/configure a Ruby project by declaring gems in a Gemfile and installing them through Bundler.
Read how The Well-Grounded Rubyist, Fourth Edition explains bundling →
Build a Frontend Web Framework (From Scratch)
The process of combining source modules or related assets into fewer output files for delivery.
- How it is used
- Reduces frontend delivery requests by combining source modules and dependencies into browser-loadable output files.
- How deep it goes
- Explains a simplified multi-step build process and common output bundles, without implementing a bundler or covering production completeness.
- Examples
- Uses app.bundle.js, vendors.bundle, npm run build, multiple bundles, and lazy-loaded output as concrete artifacts and operations.
- What you can do after
- Operate a framework-provided build command that emits application and third-party bundles for frontend deployment.
Read how Build a Frontend Web Framework (From Scratch) explains bundling →
Automating API Delivery
Bundling is the technique of combining an API document with the definitions referenced from other files or URLs into a single document.
- How it is used
- Applies bundling during CI/CD transformations when consumers or tools require a single externally usable API definition.
- How deep it goes
- Defines reference consolidation, distinguishes bundling from merging, and demonstrates a CLI command without detailing reference-resolution internals.
- Examples
- Uses product-catalog-api, openapi.yaml, bundled.yaml, and the Redocly CLI bundle command as concrete artifacts.
- What you can do after
- Apply it via Redocly CLI or Swagger CLI to generate a single API definition for downstream tools and consumers.
Refactoring to Rust
A bundler is a build tool that combines source modules and dependencies into one or more distributable assets.
- How it is used
- Packages WebAssembly code as an importable library for use within a JavaScript component.
- How deep it goes
- Defines bundling and contrasts script loading with module imports, then demonstrates a WebAssembly build and package setup.
- Examples
- Uses wasm-pack build commands, npm package linking, and a local dependency declaration.
- What you can do after
- Configure it with wasm-pack's bundler target and link the generated package into a JavaScript app.
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.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.