Unbundling the JavaScript module bundler - Road to Coderful

Unbundling the JavaScript
module bundler
"La magia dietro Webpack e altri module bundlers"
Luciano Mammino - @loige
loige.link/bundle-coderful
1

Webpack == PAIN!?
twitter.com/search?q=webpack%20pain
@loige 2

It's not Webpack!
Module bundling is actually complicated!
@loige 10

👋 Hello, I am Luciano!
Principal Software Engineer at FabFitFun
Blog:
Twitter:
GitHub:
loige.co
@loige
@lmammino
nodejsdp.link/3rd
11

1. Why we need modules
2. JavaScript module systems
3. How a module bundler works
4. Webpack in 2 minutes!
5. Advanced module bundling
Agenda
@loige 13

https://poo.loige.co
@loige 14

Dynamic DOM manipulation
React, Angular, Vue
are so... overrated! 😆
@loige 16

Dynamic Favicon
favico.js@loige 17

Custom animated tooltips
tippy.js@loige 18

🎉 Confetti rainfall 😱
dom-confetti@loige 19

Persist state through Local Storage + UUIDs
+store2 uuidjs@loige 20

7 Requests only for the JS code!
@loige 21

Current scenario
zepto@1.2.0/dist/zepto.min.js
uuidjs@4.0.3/dist/uuid.core.js
store2@2.7.0/dist/store2.min.js
tippy.js@2.2.3/dist/tippy.all.min.js
confetti@0.0.10/lib/main.js
favico.js@0.3.10/favico-0.3.10.min.js
@loige 22

Ideal scenario
zepto@1.2.0/dist/zepto.min.js
uuidjs@4.0.3/dist/uuid.core.js
store2@2.7.0/dist/store2.min.js
tippy.js@2.2.3/dist/tippy.all.min.js
confetti@0.0.10/lib/main.js
favico.js@0.3.10/favico-0.3.10.min.js
vendors.js
+
+
+
+
+
=
@loige 23

./buildVendors.sh > vendors.js
buildVendors.sh
$
@loige 25

npx lumpy build$
github.com/lmammino/lumpy
@loige 26 . 1

# lumpy.txt
https://unpkg.com/zepto@1.2.0/dist/zepto.min.js
https://unpkg.com/uuidjs@4.0.3/dist/uuid.core.js
https://unpkg.com/store2@2.7.0/dist/store2.min.js
https://unpkg.com/tippy.js@2.2.3/dist/tippy.all.min.js
https://unpkg.com/confetti-js@0.0.11/dist/index.min.js
https://unpkg.com/dom-confetti@0.0.10/lib/main.js
https://unpkg.com/favico.js@0.3.10/favico-0.3.10.min.js
Lumpy allows you to deﬁne
all the vendors in a text ﬁle
@loige 26 . 2

lumpy build$
1. Downloads the files from lumpy.txt (and caches them)
2. Concatenates the content of the files
3. Minifies the resulting source code (using )
4. Saves the resulting content in vendors.js
babel-minify
@loige 26 . 3

7 requests
2 requests
@loige 27

7 requests
2 requests
@loige
Even better if you "minify" these!
27

Concatenation
+
Miniﬁcation
@loige 28

This is good...
... in 2008
was
@loige 29

Today...
We can do better!
@loige 30

Updating them should be easy
We shouldn't worry about transitive dependencies
(dependencies of dependencies)
Order of imports shouldn't really matter
We rely on dependencies!
@loige 31

Dependency
(or coupling)
a state in which one object uses a function of
another object
— Wikipedia
@loige 32

Reusable dependencies...
Modules!
@loige 33

Modules
The bricks for structuring non-trivial applications,
but also the main mechanism to enforce information
hiding by keeping private all the functions and
variables that are not explicitly marked to be
exported
— *Node.js Design Patterns
* yeah, I quite like quoting my stuff... 😅@loige 34

Agenda
@loige 35

Meet my friend I.I.F.E.
(Immediately Invoked Function Expression)
loige.link/iife
@loige 36

We generally deﬁne a function this way
@loige 37

const sum = (a, b) => a + b
@loige 37

or
@loige 37

function sum(a, b) {
return a + b
}
or
@loige 37

return a + b
}
or
then, at some point, we execute it...
@loige 37

return a + b
}
or
then, at some point, we execute it...
const four = sum(2, 2)
@loige 37

A function in JS creates an isolated scope
@loige 38

(a, b) => {
const secretString = "Hello"
return a + b
}
console.log(secretString) // undefined
@loige 38

(a, b) => {
const secretString = "Hello"
return a + b
}
console.log(secretString) // undefined
secretString is not visible outside the function
@loige 38

IIFE allows you to deﬁne an isolated scope
that executes itself
(arg1, arg2) => {
// do stuff here
const iAmNotVisibleOutside = true
}
@loige 39

(arg1, arg2) => {
// do stuff here
}
A function with its own scope
@loige 39

)(someArg1, someArg2)
(arg1, arg2) => {
// do stuff here
}
(
@loige 39

)(someArg1, someArg2)
(arg1, arg2) => {
// do stuff here
}
(
This wrapper executes the function immediately and passes arguments from the
outer scope
@loige 39

IIFE is a recurring pattern in
JavaScript modules
@loige 40

Let's implement a module
that provides:

Information hiding
exported functionalities
@loige 41

const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})()
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined @loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
privateBar // undefined @loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
privateBar // undefined
IIFE
Creates an isolated scope
and executes it
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
information hiding
non-exported functionality
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
deﬁnes exported
functionalities
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
propagates the exports
to the outer scope (assigning it to myModule)
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
Can access exported
functionalities
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
No visibility for the
non-exported ones
@loige42

We want modules to be
reusable across different apps and
organisations...
...we need
A STANDARD MODULE format!@loige 43

Module system features
Must have
Simple syntax for import / export
Information hiding
Allows to deﬁne modules in separate ﬁles
Modules can import from other modules
(nested dependencies)
@loige 44 . 1

Module system features
Nice to have
Ability to import module subsets
Avoid naming collision
Asynchronous module loading
Seamless support for Browsers & Server-side
@loige 44 . 2

JavaScript module systems
globals
CommonJS (Node.js)
AMD (Require.js / Dojo)
UMD
ES2015 Modules (ESM)
Many others (SystemJS, ...)
@loige 45

Globals
var $, jQuery
$ = jQuery = (() => {
return { /* ... */ }
})()
// ... use $ or jQuery in the global scope
$.find('.button').remove()
@loige 46

Globals
👎 Might generate naming collisions
(e.g. $ overrides browser global variable)

👎 Modules needs to be "fully loaded" in the right order

👎 Cannot import parts of modules
@loige 47

// or import single functionality
const { concat } = require('./loDash')
concat([1], [2], [3])
// app.js
// import full module
const _ = require('./loDash')
_.concat([1], [2], [3])
// loDash.js
const loDash = {
/* ... */
}
module.exports = loDash
CommonJS
@loige 48

concat([1], [2], [3])
// app.js
_.concat([1], [2], [3])
// loDash.js
const loDash = {
/* ... */
}
CommonJS
module
@loige 48

concat([1], [2], [3])
// app.js
_.concat([1], [2], [3])
// loDash.js
const loDash = {
/* ... */
}
CommonJS
module
app using module
@loige 48

CommonJS
👍 No naming collisions
(imported modules can be renamed)
👍 Huge repository of modules through

👎 Synchronous import only
👎 Works natively on the server side only (Node.js)
NPM
@loige 49

AMD ( )
Asynchronous Module Deﬁnition
Require.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
@loige 50

AMD ( )
Require.js
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
@loige 50

AMD ( )
Require.js
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
module name
@loige 50

AMD ( )
Require.js
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
dependencies
@loige 50

AMD ( )
Require.js
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
factory function used to construct the
module,
receives the dependencies as arguments
@loige 50

AMD ( )
Require.js
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
exported value
@loige 50

AMD ( )
Require.js
// app.js
// define paths
requirejs.config({
baseUrl: 'js/lib',
paths: {
jquery: 'jquery-1.9.0'
}
})
define(['jquery'], function ($) {
// this is executed only when jquery
// and its deps are loaded
});
@loige 51

AMD ( )
Require.js
// app.js
// define paths
requirejs.config({
baseUrl: 'js/lib',
paths: {
}
})
});
app
@loige 51

AMD ( )
Require.js
// app.js
// define paths
requirejs.config({
baseUrl: 'js/lib',
paths: {
}
})
});
app
Require.js conﬁg
jquery will be loaded from
://<currentDomain>/js/lib/jquery-1.9.0.js
@loige 51

AMD ( )
Require.js
// app.js
// define paths
requirejs.config({
baseUrl: 'js/lib',
paths: {
}
})
});
app
app main function
Has jquery as dependency
@loige 51

AMD ( )
Require.js
👍 Asynchronous modules
👍 Works on Browsers and Server side

👎 Very verbose and convoluted syntax (my opinion™)
@loige 52

UMD
Universal Module Deﬁnition
A module deﬁnition that is compatible with
Global modules, CommonJS & AMD

👉 👈github.com/umdjs/umd
@loige 53 . 1

(function (root, factory) {
if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('dep'))
} else if (typeof define === 'function' && define.amd) {
// AMD
define(['dep'], function (dep) {
return (root.returnExportsGlobal = factory(dep))
})
} else {
// Global Variables
root.myModule = factory(root.dep)
}
}(this, function (dep) {
// Your actual module
return {}
}))
loige.link/umd@loige 53 . 2

(function (root, factory) {
if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('dep'))
} else if (typeof define === 'function' && define.amd) {
// AMD
define(['dep'], function (dep) {
return (root.returnExportsGlobal = factory(dep))
})
} else {
// Global Variables
root.myModule = factory(root.dep)
}
}(this, function (dep) {
// Your actual module
return {}
}))
loige.link/umd
IIFE with arguments:
- Current scope (this) and the module
factory function.
- "dep" is a sample dependency of the
module.
@loige 53 . 2

👍 Allows you to deﬁne modules that
can be used by almost any module loader

👎 Complex, the wrapper code
is almost impossible to write manually
UMD
Universal Module Deﬁnition
@loige 53 . 3

ES2015 modules
Cool & broad subject, it would deserve it's own talk
Wanna know more?
🔗 / syntax reference
🔗
🔗
🔗
import export
ECMAScript modules in browsers
ES modules: A cartoon deep-dive
ES Modules in Node Today!
@loige 54 . 1

// calculator.js
const add = (num1, num2) => num1 + num2
const sub = (num1, num2) => num1 - num2
const div = (num1, num2) => num1 / num2
const mul = (num1, num2) => num1 * num2
export { add, sub, div, mul }
// app.js
import { add } from './calculator'
console.log(add(2,2)) // 4
ES2015 modules
@loige 54 . 2

// calculator.js
// app.js
ES2015 modules
module
@loige 54 . 2

// calculator.js
// app.js
ES2015 modules
moduleexported functionalities
@loige 54 . 2

// calculator.js
// app.js
ES2015 modules
module
app
@loige 54 . 2

// calculator.js
// app.js
ES2015 modules
module
app
import speciﬁc functionality
@loige 54 . 2

// index.html
<html>
<body>

<script type="module">
import { add } from 'calculator.js'
</script>
</body>
</html>
ES2015 modules
@loige 54 . 3

// index.html
<html>
<body>

<script type="module">
import { add } from 'calculator.js'
</script>
</body>
</html>
ES2015 modules
"works" in some modern browsers
@loige 54 . 3

ES2015 modules
🙄 Syntactically very similar to CommonJS...
BUT
👍 import & export are static
(allow static analysis of dependencies)

👍 It is a (still work in progress) standard format

👍 Works (almost) seamlessly in browsers & servers
@loige 54 . 4

So many options...
Current most used practice:
Use CommonJS or ES2015 & create "compiled bundles"
@loige 55

Agenda
@loige 56

Let's try to use CommonJS
in the browser
@loige 57

const $ = require('zepto')
const tippy = require('tippy.js')
const UUID = require('uuidjs')
const { confetti } = require('dom-confetti/src/main')
const store = require('store2')
const Favico = require('favico.js')
!(function () {
const colors = ['#a864fd', '#29cdff', '#78ff44', '#ff718d', '#fdff6a']
const todoApp = (rootEl, opt = {}) => {
const todos = opt.todos || []
let completedTasks = opt.completedTasks || 0
const onChange = opt.onChange || (() => {})
const list = rootEl.find('.todo-list')
const footer = rootEl.find('.footer')
const todoCount = footer.find('.todo-count')
const insertInput = rootEl.find('.add-todo-box input')
const insertBtn = rootEl.find('.add-todo-box button')
const render = () => {
let tips
list.html('')
The browser doesn't know how
to process require.
It doesn't support CommonJS!
@loige 58

Module Bundler
A tool that takes modules with dependencies and emits
static assets representing those modules

Those static assets can be processed by browsers!
@loige 59

Dependency graph
A graph built by connecting every module with its direct
dependencies.
app
dependency A dependency B
dependency A2
shared
dependency
@loige 60

A module bundler has to:
1. Construct the dependency graph
(Dependency Resolution)
2. Assemble the modules in the graph into a
single executable asset (Packing)
@loige 61

// app.js
const calculator = require('./calculator')
const log = require('./log')
log(calculator('2 + 2 / 4'))
// log.js
module.exports = console.log
// calculator.js
const parser = require('./parser')
const resolver = require('./resolver')
module.exports = (expr) => resolver(parser(expr))
// parser.js
module.exports = (expr) => { /* ... */ }
// resolver.js
module.exports = (tokens) => { /* ... */ }
Dependency resolution
62@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
62
(entrypoint)
(1)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
62
(entrypoint)
(1)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
62
(entrypoint)
(1)
(2)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
parser
62
(entrypoint)
(1)
(2)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
parser
62
(entrypoint)
(1)
(2)
(3)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
parser resolver
62
(entrypoint)
(1)
(2)
(3)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
parser resolver
62
(entrypoint)
(1)
(2)
(3)
(4)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator log
parser resolver
62
(entrypoint)
(1)
(2)
(3)
(4)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator log
parser resolver
62
(entrypoint)
(1)
(2)
(3)
(4)
(5)
@loige

During dependency resolution,
the bundler creates a modules map
@loige 63

{
}
@loige 63

{
}
'./app': (module, require) => { … },
@loige 63

{
}
'./calculator': (module, require) => { … },
@loige 63

{
}
'./parser': (module, require) => { … },
@loige 63

{
}
'./resolver': (module, require) => { … },
@loige 63

{
}
'./log': (module, require) => { … },
@loige 63

{
}
require path
@loige 63

{
}
module factory function
@loige 63

{
}
const parser = require('./parser');const resolver =
require('./resolver');module.exports = (expr) =>
resolver(parser(expr))@loige 63

Packing
{
--- : ---
--- : ----
--- : --
}
Modules map
@loige 64

Packing
.js
{
--- : ---
--- : ----
--- : --
}
Modules map
Single executable
JS ﬁle
@loige 64

Packed executable ﬁle
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./resolver': (module, require) => { … }
}
) 65
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
IIFE passing the modules map as
argument
65
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
Custom require function:
it will load the modules by
evaluating the code from the
modules map
65
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
A reference to a module with an
empty module.exports.
This will be ﬁlled at evaluation
time
65
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
Invoking the factory function for
the given module name.
(Service locator pattern)
65
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
The current reference module is
passed, the factory function will
modify this object by adding the
proper exported values.
65
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
The custom require function is
passed so, modules can
recursively require other modules
65
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
The resulting module.exports is
returned
65
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
The entrypoint module is
required, triggering the actual
execution of the business logic
65
@loige

Now you know how
Module bundlers work!

And how to convert code written
using CommonJS to a single ﬁle that
works in the browser
@loige 66

A challenge for you!
If you do, ... I'll arrange a prize for you!

TIP: you can use or to parse JavaScript files (look for
require and module.exports) and to map relative module paths to
actual files in the filesystem.

Need an inspiration?
Check the awesome and !
let me know
acorn babel-parser
resolve
minipack @adamisnotdead's w_bp_ck
Can you build a (simple) module bundler from scratch?
@loige 67

Agenda
@loige 68

A state of the art module
bundler for the web
@loige 69

npm install webpack webpack-cli
@loige 70

webpack app.js
yep, recent versions of Webpack work without conﬁg! 😎
@loige 71

webpack --mode=development app.js
Do not compress the code and add
annotations!
@loige 72

loige.link/sample-webpacked-ﬁle
@loige73

Webpack concepts
Entry point: the starting file for dependency resolution.
Output: the destination file (bundled file).
Loaders: algorithms to parse different file types and convert them
into executable javascript (e.g. babel, typescript, but also CSS,
images or other static assets)
Plugins: do extra things (e.g. generate a wrapping HTML or
analysis tools)
@loige 74

const { resolve, join } = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
entry: './app.js',
output: {
path: resolve(join(__dirname, 'build')),
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env']
]
}
}
}
]
},
plugins: [
new CompressionPlugin()
]
}
Webpack.conﬁg.js
@loige75

module.exports = {
entry: './app.js',
output: {
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
use: {
options: {
presets: [
]
}
}
}
]
},
plugins: [
]
}
Webpack.conﬁg.js
Entrypoint
Build the dependency graph starting from ./app.js
@loige75

module.exports = {
entry: './app.js',
output: {
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
use: {
options: {
presets: [
]
}
}
}
]
},
plugins: [
]
}
Webpack.conﬁg.js
Output
Save the resulting bundled ﬁle in ./build/app.js
@loige75

module.exports = {
entry: './app.js',
output: {
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
use: {
options: {
presets: [
]
}
}
}
]
},
plugins: [
]
}
Webpack.conﬁg.js
Loaders
All the ﬁles matching "*.js" are processed with babel
and converted to ES5 Javascript
@loige75

module.exports = {
entry: './app.js',
output: {
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
use: {
options: {
presets: [
]
}
}
}
]
},
plugins: [
]
}
Webpack.conﬁg.js
Plugins
Uses a plugin that generates a gzipped copy of every
emitted ﬁle.
@loige75

Everything is a module
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
</div>
);
}
}
export default App 76

Webpack can load any type of ﬁle
As long as you can provide a "loader" that
tells how to convert the ﬁle into
something the browser understands.
This is how Webpack allows you to use Babel, TypeScript,
Clojure, Elm, Imba but also to load CSSs, Images and other
assets.
77

{
test: /.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', 78

{
test: /.css$/,
use: [
{
options: {
importLoaders: 1,
},
},
{
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
// Deﬁnes how to load .css ﬁles (uses a pipeline of loaders)
78

{
test: /.css$/,
use: [
{
options: {
importLoaders: 1,
},
},
{
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
// parses the ﬁle with post-css
78

{
test: /.css$/,
use: [
{
options: {
importLoaders: 1,
},
},
{
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
// process @import and url()
// statements
78

{
test: /.css$/,
use: [
{
options: {
importLoaders: 1,
},
},
{
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
// process @import and url()
// statements
// inject the resulting code with a <style> tag
78

...Webpack can do (a lot) more!
Dev Server
Tree shaking
Dependencies analytics
Source maps
Async require / module splitting
@loige 79

Agenda
@loige 80

Bundle cache busting
Device CDN
Origin
Server
bundle.js
(original)
81

Device CDN
Origin
Server
example.com
bundle.js
(original)
81

Device CDN
Origin
Server
example.com bundle.js
bundle.js
(original)
81

Device CDN
Origin
Server
example.com bundle.js bundle.js
bundle.js
(original)
81

Device CDN
Origin
Server
bundle.js
(original)
bundle.js
(cache copy)
81

Device CDN
Origin
Server
bundle.js
(original)
bundle.js
(cache copy)
81
bundle.js
(cache copy)

Device CDN
Origin
Server
82
bundle.js
(original)
bundle.js
(cache copy)
bundle.js
(cache copy)

Device CDN
Origin
Server
82
bundle.js
(original)
bundle.js
(cache copy)
bundle.js
(cache copy)
NEW VERSION

STALE!
Device CDN
Origin
Server
82
bundle.js
(original)
bundle.js
(cache copy)
bundle.js
(cache copy)
NEW VERSIONSTALE!

(Manual) Solution 1
83

(Manual) Solution 1
bundle.js?v=1
bundle.js?v=2
bundle.js?v=3
83

(Manual) Solution 1
bundle.js?v=1
bundle.js?v=2
bundle.js?v=3
Doesn't play nice with some CDNs and Proxies
(they won't consider different query parameters to be different resources)
83

(Manual) Solution 2
84

(Manual) Solution 2
bundle-v1.js
bundle-v2.js
bundle-v3.js
...
84

(Manual) Solution 2
bundle-v1.js
bundle-v2.js
bundle-v3.js
...
Better, but still a lot of diligence and manual effort needed...
84

Webpack Solution
85

Webpack Solution
output: {
filename: '[name].[contenthash].js'
}
85

Webpack Solution
...
bundle.9f61f58dd1cc3bb82182.js
bundle.aacdf58ef1aa12382199.js
bundle.ed61f68defef3bb82221.js
output: {
filename: '[name].[contenthash].js'
}
85

Webpack Solution
+

Every new asset version will generate a new ﬁle
cache is automatically cleaned up on every release
(if content actually changed)
html-plugin will update the reference to the new ﬁle
contenthash webpack-html-plugin
86

Agenda
@loige 87

Module bundlers are your friends
Now you know how they work,
they are not (really) magic!
Start small and add more when needed
If you try to build your own, you'll learn a
lot more!
@loige 88

Webpack is not
the only possibility!
89

Grazie!
Special thanks:
, , ,
(reviewers) and
(inspirations: his and his
)
@Podgeypoos79 @andreaman87 @mariocasciaro
@eugenserbanescu
@MarijnJH amazing book
workshop on JS modules
@loige
Images by
Pug-Unicorn cover image by
Background cover image by
Streamline Emoji pack
1smr1 from Pixabay
Gerd from Pixabay
loige.link/bundle-coderful
90

Unbundling the JavaScript module bundler - Road to Coderful

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (10)

Similaire à Unbundling the JavaScript module bundler - Road to Coderful

Similaire à Unbundling the JavaScript module bundler - Road to Coderful (20)

Plus de Luciano Mammino

Plus de Luciano Mammino (20)

Dernier

Dernier (20)

Unbundling the JavaScript module bundler - Road to Coderful