Slide 1
Slide 1 text
Unbundling the JavaScript
module bundler
"La magia dietro Webpack e altri module bundlers"
Luciano Mammino - @loige
loige.link/bundle-coderful
1
Slide 2
Slide 2 text
Webpack == PAIN!?
twitter.com/search?q=webpack%20pain
@loige 2
Slide 3
Slide 3 text
@loige 3
Slide 4
Slide 4 text
@loige 4
Slide 5
Slide 5 text
@loige 5
Slide 6
Slide 6 text
@loige
❤
6
Slide 7
Slide 7 text
@loige 7
Slide 8
Slide 8 text
@loige 8
Slide 9
Slide 9 text
@loige 9
Slide 10
Slide 10 text
It's not Webpack!
Module bundling is actually complicated!
@loige 10
Slide 11
Slide 11 text
Hello, I am Luciano!
Principal Software Engineer at FabFitFun
Blog:
Twitter:
GitHub:
loige.co
@loige
@lmammino
nodejsdp.link/3rd
11
Slide 12
Slide 12 text
loige.link/bundle-coderful
12
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
https://poo.loige.co
@loige 14
Slide 15
Slide 15 text
App features
@loige 15
Slide 16
Slide 16 text
Dynamic DOM manipulation
React, Angular, Vue
are so... overrated!
@loige 16
Slide 17
Slide 17 text
Dynamic Favicon
favico.js
@loige 17
Slide 18
Slide 18 text
Custom animated tooltips
tippy.js
@loige 18
Slide 19
Slide 19 text
Confetti rainfall
dom-confetti
@loige 19
Slide 20
Slide 20 text
Persist state through Local Storage + UUIDs
+
store2 uuidjs
@loige 20
Slide 21
Slide 21 text
@loige 21
Slide 22
Slide 22 text
@loige 21
Slide 23
Slide 23 text
7 Requests only for the JS code!
@loige 21
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
How to do this?
@loige 24
Slide 27
Slide 27 text
./buildVendors.sh > vendors.js
buildVendors.sh
$
@loige 25
Slide 28
Slide 28 text
npx lumpy build
$
github.com/lmammino/lumpy
@loige 26 . 1
Slide 29
Slide 29 text
# 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 define
all the vendors in a text file
@loige 26 . 2
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
7 requests
2 requests
@loige 27
Slide 32
Slide 32 text
7 requests
2 requests
@loige
Even better if you "minify" these!
27
Slide 33
Slide 33 text
Concatenation
+
Minification
@loige 28
Slide 34
Slide 34 text
This is good...
@loige 29
Slide 35
Slide 35 text
This is good...
@loige 29
Slide 36
Slide 36 text
This is good...
... in 2008
was
@loige 29
Slide 37
Slide 37 text
Today...
We can do better!
@loige 30
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
Dependency
(or coupling)
a state in which one object uses a function of
another object
— Wikipedia
@loige 32
Slide 40
Slide 40 text
Reusable dependencies...
Modules!
@loige 33
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
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 35
Slide 43
Slide 43 text
Meet my friend I.I.F.E.
(Immediately Invoked Function Expression)
loige.link/iife
@loige 36
Slide 44
Slide 44 text
We generally define a function this way
@loige 37
Slide 45
Slide 45 text
We generally define a function this way
const sum = (a, b) => a + b
@loige 37
Slide 46
Slide 46 text
We generally define a function this way
const sum = (a, b) => a + b
or
@loige 37
Slide 47
Slide 47 text
We generally define a function this way
const sum = (a, b) => a + b
function sum(a, b) {
return a + b
}
or
@loige 37
Slide 48
Slide 48 text
We generally define a function this way
const sum = (a, b) => a + b
function sum(a, b) {
return a + b
}
or
then, at some point, we execute it...
@loige 37
Slide 49
Slide 49 text
We generally define a function this way
const sum = (a, b) => a + b
function sum(a, b) {
return a + b
}
or
then, at some point, we execute it...
const four = sum(2, 2)
@loige 37
Slide 50
Slide 50 text
A function in JS creates an isolated scope
@loige 38
Slide 51
Slide 51 text
A function in JS creates an isolated scope
(a, b) => {
const secretString = "Hello"
return a + b
}
console.log(secretString) // undefined
@loige 38
Slide 52
Slide 52 text
A function in JS creates an isolated scope
(a, b) => {
const secretString = "Hello"
return a + b
}
console.log(secretString) // undefined
secretString is not visible outside the function
@loige 38
Slide 53
Slide 53 text
IIFE allows you to define an isolated scope
that executes itself
(arg1, arg2) => {
// do stuff here
const iAmNotVisibleOutside = true
}
@loige 39
Slide 54
Slide 54 text
IIFE allows you to define an isolated scope
that executes itself
(arg1, arg2) => {
// do stuff here
const iAmNotVisibleOutside = true
}
A function with its own scope
@loige 39
Slide 55
Slide 55 text
)(someArg1, someArg2)
IIFE allows you to define an isolated scope
that executes itself
(arg1, arg2) => {
// do stuff here
const iAmNotVisibleOutside = true
}
(
@loige 39
Slide 56
Slide 56 text
)(someArg1, someArg2)
IIFE allows you to define an isolated scope
that executes itself
(arg1, arg2) => {
// do stuff here
const iAmNotVisibleOutside = true
}
(
This wrapper executes the function immediately and passes arguments from the
outer scope
@loige 39
Slide 57
Slide 57 text
IIFE is a recurring pattern in
JavaScript modules
@loige 40
Slide 58
Slide 58 text
Let's implement a module
that provides:
Information hiding
exported functionalities
@loige 41
Slide 59
Slide 59 text
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 @loige
42
Slide 60
Slide 60 text
const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined @loige
42
Slide 61
Slide 61 text
const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined
IIFE
Creates an isolated scope
and executes it
@loige
42
Slide 62
Slide 62 text
const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined
information hiding
non-exported functionality
@loige
42
Slide 63
Slide 63 text
const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined
defines exported
functionalities
@loige
42
Slide 64
Slide 64 text
const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined
propagates the exports
to the outer scope (assigning it to myModule)
@loige
42
Slide 65
Slide 65 text
const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined
Can access exported
functionalities
@loige
42
Slide 66
Slide 66 text
const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined
No visibility for the
non-exported ones
@loige
42
Slide 67
Slide 67 text
We want modules to be
reusable across different apps and
organisations...
...we need
A STANDARD MODULE format!
@loige 43
Slide 68
Slide 68 text
Module system features
Must have
Simple syntax for import / export
Information hiding
Allows to define modules in separate files
Modules can import from other modules
(nested dependencies)
@loige 44 . 1
Slide 69
Slide 69 text
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
Slide 70
Slide 70 text
JavaScript module systems
globals
CommonJS (Node.js)
AMD (Require.js / Dojo)
UMD
ES2015 Modules (ESM)
Many others (SystemJS, ...)
@loige 45
Slide 71
Slide 71 text
Globals
var $, jQuery
$ = jQuery = (() => {
return { /* ... */ }
})()
// ... use $ or jQuery in the global scope
$.find('.button').remove()
@loige 46
Slide 72
Slide 72 text
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
Slide 73
Slide 73 text
// 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
Slide 74
Slide 74 text
// 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
module
@loige 48
Slide 75
Slide 75 text
// 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
module
app using module
@loige 48
Slide 76
Slide 76 text
// 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
module
app using module
@loige 48
Slide 77
Slide 77 text
// 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
module
app using module
@loige 48
Slide 78
Slide 78 text
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
Slide 79
Slide 79 text
AMD ( )
Asynchronous Module Definition
Require.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
@loige 50
Slide 80
Slide 80 text
AMD ( )
Asynchronous Module Definition
Require.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
module
@loige 50
Slide 81
Slide 81 text
AMD ( )
Asynchronous Module Definition
Require.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
module
module name
@loige 50
Slide 82
Slide 82 text
AMD ( )
Asynchronous Module Definition
Require.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
module
dependencies
@loige 50
Slide 83
Slide 83 text
AMD ( )
Asynchronous Module Definition
Require.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
module
factory function used to construct the
module,
receives the dependencies as arguments
@loige 50
Slide 84
Slide 84 text
AMD ( )
Asynchronous Module Definition
Require.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
module
exported value
@loige 50
Slide 85
Slide 85 text
AMD ( )
Asynchronous Module Definition
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
Slide 86
Slide 86 text
AMD ( )
Asynchronous Module Definition
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
});
app
@loige 51
Slide 87
Slide 87 text
AMD ( )
Asynchronous Module Definition
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
});
app
Require.js config
jquery will be loaded from
:///js/lib/jquery-1.9.0.js
@loige 51
Slide 88
Slide 88 text
AMD ( )
Asynchronous Module Definition
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
});
app
app main function
Has jquery as dependency
@loige 51
Slide 89
Slide 89 text
AMD ( )
Asynchronous Module Definition
Require.js
Asynchronous modules
Works on Browsers and Server side
Very verbose and convoluted syntax (my opinion™)
@loige 52
Slide 90
Slide 90 text
UMD
Universal Module Definition
A module definition that is compatible with
Global modules, CommonJS & AMD
github.com/umdjs/umd
@loige 53 . 1
Slide 91
Slide 91 text
(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
Slide 92
Slide 92 text
(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
Slide 93
Slide 93 text
(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
Slide 94
Slide 94 text
(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
Slide 95
Slide 95 text
(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
Slide 96
Slide 96 text
Allows you to define modules that
can be used by almost any module loader
Complex, the wrapper code
is almost impossible to write manually
UMD
Universal Module Definition
@loige 53 . 3
Slide 97
Slide 97 text
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
Slide 98
Slide 98 text
// 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
Slide 99
Slide 99 text
// 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
module
@loige 54 . 2
Slide 100
Slide 100 text
// 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
module
exported functionalities
@loige 54 . 2
Slide 101
Slide 101 text
// 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
module
app
@loige 54 . 2
Slide 102
Slide 102 text
// 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
module
app
import specific functionality
@loige 54 . 2
Slide 103
Slide 103 text
// index.html
import { add } from 'calculator.js'
console.log(add(2,2)) // 4
ES2015 modules
@loige 54 . 3
Slide 104
Slide 104 text
// index.html
import { add } from 'calculator.js'
console.log(add(2,2)) // 4
ES2015 modules
"works" in some modern browsers
@loige 54 . 3
Slide 105
Slide 105 text
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
Slide 106
Slide 106 text
So many options...
Current most used practice:
Use CommonJS or ES2015 & create "compiled bundles"
@loige 55
Slide 107
Slide 107 text
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 56
Slide 108
Slide 108 text
Let's try to use CommonJS
in the browser
@loige 57
Slide 109
Slide 109 text
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
Slide 110
Slide 110 text
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
Slide 111
Slide 111 text
Dependency graph
A graph built by connecting every module with its direct
dependencies.
app
dependency A dependency B
dependency A2
shared
dependency
@loige 60
Slide 112
Slide 112 text
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
Slide 113
Slide 113 text
// 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
Slide 114
Slide 114 text
// 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
app
62
(entrypoint)
(1)
@loige
Slide 115
Slide 115 text
// 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
app
calculator
62
(entrypoint)
(1)
@loige
Slide 116
Slide 116 text
// 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
app
calculator
62
(entrypoint)
(1)
(2)
@loige
Slide 117
Slide 117 text
// 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
app
calculator
parser
62
(entrypoint)
(1)
(2)
@loige
Slide 118
Slide 118 text
// 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
app
calculator
parser
62
(entrypoint)
(1)
(2)
(3)
@loige
Slide 119
Slide 119 text
// 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
app
calculator
parser resolver
62
(entrypoint)
(1)
(2)
(3)
@loige
Slide 120
Slide 120 text
// 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
app
calculator
parser resolver
62
(entrypoint)
(1)
(2)
(3)
(4)
@loige
Slide 121
Slide 121 text
// 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
app
calculator log
parser resolver
62
(entrypoint)
(1)
(2)
(3)
(4)
@loige
Slide 122
Slide 122 text
// 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
app
calculator log
parser resolver
62
(entrypoint)
(1)
(2)
(3)
(4)
(5)
@loige
Slide 123
Slide 123 text
During dependency resolution,
the bundler creates a modules map
@loige 63
Slide 124
Slide 124 text
During dependency resolution,
the bundler creates a modules map
{
}
@loige 63
Slide 125
Slide 125 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
@loige 63
Slide 126
Slide 126 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
@loige 63
Slide 127
Slide 127 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./parser': (module, require) => { … },
@loige 63
Slide 128
Slide 128 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
@loige 63
Slide 129
Slide 129 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
@loige 63
Slide 130
Slide 130 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
require path
@loige 63
Slide 131
Slide 131 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
module factory function
@loige 63
Slide 132
Slide 132 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
const parser = require('./parser');const resolver =
require('./resolver');module.exports = (expr) =>
resolver(parser(expr))
@loige 63
Slide 133
Slide 133 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
const parser = require('./parser');const resolver =
require('./resolver');module.exports = (expr) =>
resolver(parser(expr))
@loige 63
Slide 134
Slide 134 text
During dependency resolution,
the bundler creates a modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
const parser = require('./parser');const resolver =
require('./resolver');module.exports = (expr) =>
resolver(parser(expr))
@loige 63
Slide 135
Slide 135 text
Packing
{
--- : ---
--- : ----
--- : --
}
Modules map
@loige 64
Slide 136
Slide 136 text
Packing
{
--- : ---
--- : ----
--- : --
}
Modules map
@loige 64
Slide 137
Slide 137 text
Packing
.js
{
--- : ---
--- : ----
--- : --
}
Modules map
Single executable
JS file
@loige 64
Slide 138
Slide 138 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
) 65
@loige
Slide 139
Slide 139 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
)
IIFE passing the modules map as
argument
65
@loige
Slide 140
Slide 140 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
)
Custom require function:
it will load the modules by
evaluating the code from the
modules map
65
@loige
Slide 141
Slide 141 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
)
A reference to a module with an
empty module.exports.
This will be filled at evaluation
time
65
@loige
Slide 142
Slide 142 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
)
Invoking the factory function for
the given module name.
(Service locator pattern)
65
@loige
Slide 143
Slide 143 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
)
The current reference module is
passed, the factory function will
modify this object by adding the
proper exported values.
65
@loige
Slide 144
Slide 144 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
)
The custom require function is
passed so, modules can
recursively require other modules
65
@loige
Slide 145
Slide 145 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
)
The resulting module.exports is
returned
65
@loige
Slide 146
Slide 146 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
)
The entrypoint module is
required, triggering the actual
execution of the business logic
65
@loige
Slide 147
Slide 147 text
Packed executable file
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … }
}
) 65
@loige
Slide 148
Slide 148 text
Now you know how
Module bundlers work!
And how to convert code written
using CommonJS to a single file that
works in the browser
@loige 66
Slide 149
Slide 149 text
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
Slide 150
Slide 150 text
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 68
Slide 151
Slide 151 text
A state of the art module
bundler for the web
@loige 69
Slide 152
Slide 152 text
npm install webpack webpack-cli
@loige 70
Slide 153
Slide 153 text
webpack app.js
yep, recent versions of Webpack work without config!
@loige 71
Slide 154
Slide 154 text
webpack --mode=development app.js
Do not compress the code and add
annotations!
@loige 72
Slide 155
Slide 155 text
loige.link/sample-webpacked-file
@loige
73
Slide 156
Slide 156 text
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
Slide 157
Slide 157 text
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.config.js
@loige
75
Slide 158
Slide 158 text
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.config.js
Entrypoint
Build the dependency graph starting from ./app.js
@loige
75
Slide 159
Slide 159 text
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.config.js
Output
Save the resulting bundled file in ./build/app.js
@loige
75
Slide 160
Slide 160 text
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.config.js
Loaders
All the files matching "*.js" are processed with babel
and converted to ES5 Javascript
@loige
75
Slide 161
Slide 161 text
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.config.js
Plugins
Uses a plugin that generates a gzipped copy of every
emitted file.
@loige
75
Slide 162
Slide 162 text
Everything is a module
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
class App extends Component {
render() {
return (
);
}
}
export default App 76
Welcome to React
Slide 163
Slide 163 text
Everything is a module
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
class App extends Component {
render() {
return (
);
}
}
export default App 76
Welcome to React
Slide 164
Slide 164 text
Everything is a module
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
class App extends Component {
render() {
return (
);
}
}
export default App 76
Welcome to React
Slide 165
Slide 165 text
Everything is a module
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
class App extends Component {
render() {
return (
);
}
}
export default App 76
Welcome to React
Slide 166
Slide 166 text
Webpack can load any type of file
As long as you can provide a "loader" that
tells how to convert the file 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
Slide 167
Slide 167 text
{
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
Slide 168
Slide 168 text
{
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',
// Defines how to load .css files (uses a pipeline of loaders)
78
Slide 169
Slide 169 text
{
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',
// Defines how to load .css files (uses a pipeline of loaders)
// parses the file with post-css
78
Slide 170
Slide 170 text
{
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',
// Defines how to load .css files (uses a pipeline of loaders)
// parses the file with post-css
// process @import and url()
// statements
78
Slide 171
Slide 171 text
{
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',
// Defines how to load .css files (uses a pipeline of loaders)
// parses the file with post-css
// process @import and url()
// statements
// inject the resulting code with a tag
78
Slide 172
Slide 172 text
...Webpack can do (a lot) more!
Dev Server
Tree shaking
Dependencies analytics
Source maps
Async require / module splitting
@loige 79
Slide 173
Slide 173 text
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 80
Slide 174
Slide 174 text
Bundle cache busting
Device CDN
Origin
Server
bundle.js
(original)
81
Slide 175
Slide 175 text
Bundle cache busting
Device CDN
Origin
Server
example.com
bundle.js
(original)
81
Slide 176
Slide 176 text
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js
bundle.js
(original)
81
Slide 177
Slide 177 text
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
bundle.js
(original)
81
Slide 178
Slide 178 text
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
bundle.js
(original)
81
Slide 179
Slide 179 text
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
bundle.js
(original)
bundle.js
(cache copy)
81
Slide 180
Slide 180 text
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
bundle.js
(original)
bundle.js
(cache copy)
81
Slide 181
Slide 181 text
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
bundle.js
(original)
bundle.js
(cache copy)
81
bundle.js
(cache copy)
Slide 182
Slide 182 text
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
82
bundle.js
(original)
bundle.js
(cache copy)
bundle.js
(cache copy)
Slide 183
Slide 183 text
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
82
bundle.js
(original)
bundle.js
(cache copy)
bundle.js
(cache copy)
NEW VERSION
Slide 184
Slide 184 text
STALE!
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
82
bundle.js
(original)
bundle.js
(cache copy)
bundle.js
(cache copy)
NEW VERSION
STALE!
Slide 185
Slide 185 text
Bundle cache busting
83
Slide 186
Slide 186 text
Bundle cache busting
(Manual) Solution 1
83
Slide 187
Slide 187 text
Bundle cache busting
(Manual) Solution 1
bundle.js?v=1
bundle.js?v=2
bundle.js?v=3
83
Slide 188
Slide 188 text
Bundle cache busting
(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
Slide 189
Slide 189 text
Bundle cache busting
84
Slide 190
Slide 190 text
Bundle cache busting
(Manual) Solution 2
84
Slide 191
Slide 191 text
Bundle cache busting
(Manual) Solution 2
bundle-v1.js
bundle-v2.js
bundle-v3.js
...
84
Slide 192
Slide 192 text
Bundle cache busting
(Manual) Solution 2
bundle-v1.js
bundle-v2.js
bundle-v3.js
...
Better, but still a lot of diligence and manual effort needed...
84
Slide 193
Slide 193 text
Bundle cache busting
85
Slide 194
Slide 194 text
Bundle cache busting
Webpack Solution
85
Slide 195
Slide 195 text
Bundle cache busting
Webpack Solution
output: {
filename: '[name].[contenthash].js'
}
85
Slide 196
Slide 196 text
Bundle cache busting
Webpack Solution
...
bundle.9f61f58dd1cc3bb82182.js
bundle.aacdf58ef1aa12382199.js
bundle.ed61f68defef3bb82221.js
output: {
filename: '[name].[contenthash].js'
}
85
Slide 197
Slide 197 text
Bundle cache busting
Webpack Solution
+
Every new asset version will generate a new file
cache is automatically cleaned up on every release
(if content actually changed)
html-plugin will update the reference to the new file
contenthash webpack-html-plugin
86
Slide 198
Slide 198 text
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 87
Slide 199
Slide 199 text
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
Slide 200
Slide 200 text
Webpack is not
the only possibility!
89
Slide 201
Slide 201 text
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