Web - Bundler


A bundler is a web build tool that


  • 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


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


Discover More
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
How to import Svg into React (Manually and with SvgR)?

This page shows you how you can show Svg in React. The problem is that Raw Svg are not natively React component and therefore cannot be added to the React tree directly. URL The Javascript world is...
How to inject multi React components in a page? A Multiple Root demo

This page shows how to render multiple root in the same web page For instance, when you want to integrate React component in another HTML application (php, ruby,...) with templating, you may render several...
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 - 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...
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...
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...

Share this page:
Follow us:
Task Runner