Web - Bundler

About

A bundler is a web build tool that

Example

  • A math module
// math.js
export function add(a, b) {
  return a + b;
}
// app.js
import { add } from './math.js';

console.log(add(2, 2)); // 4

Example of Bundle with the entry point being app.js (without any size reduction)

function add(a, b) {
  return a + b;
}

console.log(add(2, 2)); // 4

Features

They may allow:

  • multiple entry points
  • an HTML as entry point
  • a css file as entry point

but the goal remains the same:

Bundler vs Task Runner

The difference with a task runner is that they work on the file tree (dependency graph) and not on a list of files

task runner can still bundle but only on a collection of file, not based on a dependency tree

List





Recommended Pages
Code Splitting

Code splitting is an operation performed by a bundler that splits code into chunks. You can then load only what is needed for a page to render. It's also known as route-chunking (where route refers to...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
Javascript - Toolchain (Build tools)

This page is building/shipping in the context of Javascript A JavaScript build toolchain typically consists of: A package manager to install and update package such as yarn, npm. A bundler (such...
React Mapping Html Javascript
React - Server-rendered markup (renderToString / hydrate)

server-rendered markup is the dynamic possibility of server-side rendering (vs static). The steps are: the web server returns a web page where the root component has been rendered as HTML with special...
React Mapping Html Javascript
React - Multiple Root

This page shows how to render multiple root in the same web page This demo shows you how to render twice the same root. build section The HTML with two div elements where we will render the same...
Web - Build Operations / Build Pipeline

This page is the build operation for the web. A build pipeline will: transform (compile) bundle and optimize web code html, css (less, ...) Javascript (Javascript Module, React Jsx,...
Web - Main

in a web application In a frontend web application, it's a file called the home page that creates an HTML page. In the context of a library (to bundle), the main file may be: a javascript file...
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...
Web Node Build - Task runner orchestrator

A Task runner (orchestrator) is a build tool that permits to run all kind of task (generally build operations) in serie or parallel. A task runner works on a stream of file selected from the file system...



Share this page:
Follow us:
Task Runner