Web - Build Operations / Build Pipeline

About

This page is about 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, Typescript, ..)
for a specified target environment (browser, node, …)
and create:
- a library
- a web app
- and optionally:
  - the javascript source map
  - the css source map

The pipeline:

is built on top of a resolver in order to resolve (find) the code/package.
can also inject in the HTML a script to live reload (see the change immediately)

Process

The below flow shows you a typic build pipeline.

graph LR Entries("Entries (ML/CSS/JS)") -->MarkupOrigin("Markup (ML)") Entries -->JsOrigin Entries -->JsxOrigin Entries -->TsOrigin Entries -->CssOrigin Entries -->ImageOrigin subgraph "Transformer (Transpiler/Compiler)" JsxOrigin(JSX) -- Babel ---> JsTrans MarkupOrigin --> HtmlTrans(HTML) TsOrigin(TS) -- Typescript --> JsTrans JsOrigin("JS (Node/Es)") -- Babel --> JsTrans(JS) CssOrigin(Css/Less/Sass) --> CssTrans(CSS) ImageOrigin(Image) -- "Format/Size" --> ImageTrans(Image) end subgraph Packagers JsTrans --> JsPackage(JS Package) CssTrans --> CssPackage(CSS Package) end subgraph "Optimizers (Linter/Minifier/Validation)" JsPackage--> JsOptimizer("Js Optimized") CssPackage --> CssOptimizer("Css Optimized") HtmlTrans --HTMLNano--> HtmlOptimizer("HTML Optimized") ImageTrans --"Delete Meta, ..."--> ImageOptimizer("Image Optimized") end subgraph "LiveReload" HtmlOptimizer --> HtmlLiveReload["Live Reload"] end JsOptimizer--> Output(App/Library/Source Map) CssOptimizer-->Output ImageOptimizer-->Output HtmlLiveReload-->Output

Transformer (Compiler)

compiler
- Typescript compiler
- Markup Language (ML) to HTML (ie markdown, …)
transpiler - Browser targeting
- babel
Tree-Shaking (deleting the code unused)
Code Splitting: Splits code into chunks.

Packager / Concatenation

concatenation means simply merging multiple files together, i.e. copying and pasting several files into one.

The reason is that it’s more efficient to fetch one file, rather than lots of small files.

Optimizer

Linter / Quality

Minification / Compression

The term minification or compression in the context of CSS, Javascript means removing all unnecessary characters, such as spaces, new lines, comments without affecting the functionality of the source code.

Minification is the process of taking a file and making the overall number of characters less, without changing how the code works. The goal is to make the file size smaller.

Example:

removing comments,
taking a long variable name and making it smaller.

Image optimization

Meta data is removed from the image as it’s not needed by the browser to display the image

Example: information about the camera used to take the photo.

Live Reload

Live reload reloads your page automatically while updating your code. See Web - (Hot|Live) (Edit|Reload) - Auto File Sync

Tools

The below listed tools are node orchestrator tools that permits to create a build pipeline.

You may also find similar tool in other language
They are installed as dev dependencies.

Bundler

bundler:

are working on a entry file
build the dependency tree
and performs the build operations

See the list at bundler list

Task Runner

Task runner/orchestrator such as Gulp and Grunt can also perform most of the bundle operation through plugin.

They have also tasks for bundler.

Why ? because they don't get their files from dependency graph but from the file system and therefore generally don't support directly dependency graph task such as:

tree-shaking
or code splitting

Monorepo framework

All monorepo framework because they wraps a bundler.

nx
rush

Example

How to develop, publish and use a javascript library ?

Documentation / Reference

Comparison of Module Bundler