Slide 1
Slide 1 text
Unbundling the JavaScript
Unbundling the JavaScript
module bundler
module bundler
Luciano Mammino -
Luciano Mammino - @loige
@loige
21/11/2018
loige.link/bundle-oredev
1
Slide 2
Slide 2 text
loige.link/bundle-oredev
2
Slide 3
Slide 3 text
Webpack == PAIN!?
Webpack == PAIN!?
twitter.com/search?q=webpack%20pain
@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
@loige 10
Slide 11
Slide 11 text
It's not Webpack!
It's not Webpack!
Module bundling is actually complicated!
Module bundling is actually complicated!
@loige 11
Slide 12
Slide 12 text
Luciano... who
Luciano... who
Find me online:
- (@loige)
- (lmammino)
-
- (loige.co)
Twitter
GitHub
Linkedin
Blog
Solution Architect at
with @mariocasciaro
with @andreaman87
with @Podgeypoos79
12
Slide 13
Slide 13 text
Luciano... who
Luciano... who
Find me online:
- (@loige)
- (lmammino)
-
- (loige.co)
Twitter
GitHub
Linkedin
Blog
Solution Architect at
with @mariocasciaro
with @andreaman87
with @Podgeypoos79
CLICK HERE IF YOU
WANT TO WIN
A (USEFUL) PRIZE
loige.link/oredev-win
12
Slide 14
Slide 14 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
Agenda
@loige 13
Slide 15
Slide 15 text
https://poo.loige.co
@loige 14
Slide 16
Slide 16 text
App features
App features
@loige 15
Slide 17
Slide 17 text
Dynamic DOM manipulation
React, Angular, Vue
are so... overrated!
@loige 16
Slide 18
Slide 18 text
Dynamic Favicon
favico.js
@loige 17
Slide 19
Slide 19 text
Custom animated tooltips
tippy.js
@loige 18
Slide 20
Slide 20 text
Confetti rainfall
dom-confetti
@loige 19
Slide 21
Slide 21 text
Persist state through Local Storage + UUIDs
+
store2 uuidjs
@loige 20
Slide 22
Slide 22 text
@loige 21
Slide 23
Slide 23 text
@loige 21
Slide 24
Slide 24 text
7 Requests only for the JS code!
@loige 21
Slide 25
Slide 25 text
Current scenario
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/favico0.3.10.min.js
@loige 22
Slide 26
Slide 26 text
Ideal scenario
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/favico0.3.10.min.js
vendors.js
+
+
+
+
+
=
@loige 23
Slide 27
Slide 27 text
How to do this?
How to do this?
@loige 24
Slide 28
Slide 28 text
./buildVendors.sh > vendors.js
buildVendors.sh
$
@loige 25
Slide 29
Slide 29 text
npx lumpy build
$
github.com/lmammino/lumpy
@loige 26 . 1
Slide 30
Slide 30 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/confettijs@0.0.11/dist/index.min.js
https://unpkg.com/domconfetti@0.0.10/lib/main.js
https://unpkg.com/favico.js@0.3.10/favico0.3.10.min.js
Lumpy allows you to define
all the vendors in a text file
@loige 26 . 2
Slide 31
Slide 31 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 32
Slide 32 text
7 requests
2 requests
@loige 27
Slide 33
Slide 33 text
7 requests
2 requests
@loige
Even better if you "minify" these!
27
Slide 34
Slide 34 text
Concatenation
Concatenation
+
+
Minification
Minification
@loige 28
Slide 35
Slide 35 text
This is good...
This is good...
@loige 29
Slide 36
Slide 36 text
This is good...
This is good...
@loige 29
Slide 37
Slide 37 text
This is good...
This is good...
... in 2008
... in 2008
was
was
@loige 29
Slide 38
Slide 38 text
Today...
Today...
We can do better!
We can do better!
@loige 30
Slide 39
Slide 39 text
Updating
Updating them should be easy
them should be easy
We shouldn't worry about
We shouldn't worry about transitive dependencies
transitive dependencies
(dependencies of dependencies)
(dependencies of dependencies)
Order of imports
Order of imports shouldn't really matter
shouldn't really matter
We rely on
We rely on dependencies
dependencies!
!
@loige 31
Slide 40
Slide 40 text
Dependency
Dependency
(or coupling)
a state in which one object uses a function of
another object
— Wikipedia
@loige 32
Slide 41
Slide 41 text
Reusable dependencies...
Reusable dependencies...
Modules!
Modules!
@loige 33
Slide 42
Slide 42 text
Modules
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 (Second Edition)
* yeah, I quite like quoting my stuff...
@loige 34
Slide 43
Slide 43 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
Agenda
@loige 35
Slide 44
Slide 44 text
Meet my friend
Meet my friend I.I.F.E.
I.I.F.E.
(Immediately Invoked Function Expression)
loige.link/iife
@loige 36
Slide 45
Slide 45 text
We generally define a function this way
We generally define a function this way
@loige 37
Slide 46
Slide 46 text
We generally define a function this way
We generally define a function this way
const sum = (a, b) => a + b
@loige 37
Slide 47
Slide 47 text
We generally define a function this way
We generally define a function this way
const sum = (a, b) => a + b
or
or
@loige 37
Slide 48
Slide 48 text
We generally define a function this way
We generally define a function this way
const sum = (a, b) => a + b
function sum(a, b) {
return a + b
}
or
or
@loige 37
Slide 49
Slide 49 text
We generally define a function this way
We generally define a function this way
const sum = (a, b) => a + b
function sum(a, b) {
return a + b
}
or
or
then, at some point, we execute it...
then, at some point, we execute it...
@loige 37
Slide 50
Slide 50 text
We generally define a function this way
We generally define a function this way
const sum = (a, b) => a + b
function sum(a, b) {
return a + b
}
or
or
then, at some point, we execute it...
then, at some point, we execute it...
const four = sum(2, 2)
@loige 37
Slide 51
Slide 51 text
A function in JS creates an isolated scope
A function in JS creates an isolated scope
@loige 38
Slide 52
Slide 52 text
A function in JS creates an isolated scope
A function in JS creates an isolated scope
(a, b) => {
const secretString = "Hello"
return a + b
}
console.log(secretString) // undefined
@loige 38
Slide 53
Slide 53 text
A function in JS creates an isolated scope
A function in JS creates an isolated scope
(a, b) => {
const secretString = "Hello"
return a + b
}
console.log(secretString) // undefined
secretString
secretString is not visible outside the function
is not visible outside the function
@loige 38
Slide 54
Slide 54 text
IIFE allows you to define an isolated scope
IIFE allows you to define an isolated scope
that executes itself
that executes itself
(arg1, arg2) => {
// do stuff here
const iAmNotVisibleOutside = true
}
@loige 39
Slide 55
Slide 55 text
IIFE allows you to define an isolated scope
IIFE allows you to define an isolated scope
that executes itself
that executes itself
(arg1, arg2) => {
// do stuff here
const iAmNotVisibleOutside = true
}
A function with its own scope
@loige 39
Slide 56
Slide 56 text
)(someArg1, someArg2)
IIFE allows you to define an isolated scope
IIFE allows you to define an isolated scope
that executes itself
that executes itself
(arg1, arg2) => {
// do stuff here
const iAmNotVisibleOutside = true
}
(
@loige 39
Slide 57
Slide 57 text
)(someArg1, someArg2)
IIFE allows you to define an isolated scope
IIFE allows you to define an isolated scope
that executes itself
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 58
Slide 58 text
IIFE is a recurring pattern in
IIFE is a recurring pattern in
JavaScript modules
JavaScript modules
@loige 40
Slide 59
Slide 59 text
Let's implement a module
Let's implement a module
that provides:
that provides:
Information hiding
Information hiding
exported functionalities
exported functionalities
@loige 41
Slide 60
Slide 60 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 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 @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
IIFE
Creates an isolated scope
and executes it
@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
information hiding
non-exposed functionality
@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
defines exported
functionalities
@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
propagates the exports
to the outer scope (assigning it to myModule)
@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
Can access exported
functionalities
@loige
42
Slide 67
Slide 67 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 68
Slide 68 text
We want modules to be
We want modules to be
reusable
reusable across different apps and
across different apps and
organisations...
organisations...
...we need
...we need
A
A STANDARD MODULE
STANDARD MODULE format!
format!
@loige 43
Slide 69
Slide 69 text
Module system features
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 70
Slide 70 text
Module system features
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 71
Slide 71 text
JavaScript module systems
JavaScript module systems
globals
CommonJS (Node.js)
AMD (Require.js / Dojo)
UMD
ES2015 Modules (ESM)
Many others (SystemJS, ...)
@loige 45
Slide 72
Slide 72 text
Globals
Globals
var $, jQuery
$ = jQuery = (() => {
return { /* ... */ }
})()
// ... use $ or jQuery in the global scope
$.find('.button').remove()
@loige 46
Slide 73
Slide 73 text
Globals
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 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
CommonJS
@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
CommonJS
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
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
CommonJS
module
app using module
@loige 48
Slide 78
Slide 78 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
CommonJS
module
app using module
@loige 48
Slide 79
Slide 79 text
CommonJS
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 80
Slide 80 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
Require.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
@loige 50
Slide 81
Slide 81 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
Require.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
module
@loige 50
Slide 82
Slide 82 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
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 83
Slide 83 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
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 84
Slide 84 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
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 85
Slide 85 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
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 86
Slide 86 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
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 87
Slide 87 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
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 88
Slide 88 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
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 89
Slide 89 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
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 90
Slide 90 text
AMD (
AMD ( )
)
Asynchronous Module Definition
Asynchronous Module Definition
Require.js
Require.js
Asynchronous modules
Works on Browsers and Server side
Very verbose and convoluted syntax (my opinion™)
@loige 52
Slide 91
Slide 91 text
UMD
UMD
Universal Module Definition
Universal Module Definition
A module definition that is compatible with
Global modules, CommonJS & AMD
github.com/umdjs/umd
@loige 53 . 1
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
@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
IIFE with arguments:
- Current scope (this) and the module
factory function.
- "dep" is a sample dependency of the
module.
@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
(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 97
Slide 97 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
UMD
Universal Module Definition
Universal Module Definition
@loige 53 . 3
Slide 98
Slide 98 text
ES2015 modules
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 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
ES2015 modules
@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
ES2015 modules
module
@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
ES2015 modules
module
exported functionalities
@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
ES2015 modules
module
app
@loige 54 . 2
Slide 103
Slide 103 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
ES2015 modules
module
app
import specific functionality
@loige 54 . 2
Slide 104
Slide 104 text
// index.html
import { add } from 'calculator.js'
console.log(add(2,2)) // 4
ES2015 modules
ES2015 modules
@loige 54 . 3
Slide 105
Slide 105 text
// index.html
import { add } from 'calculator.js'
console.log(add(2,2)) // 4
ES2015 modules
ES2015 modules
"works" in some modern browsers
@loige 54 . 3
Slide 106
Slide 106 text
ES2015 modules
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 107
Slide 107 text
So many options...
So many options...
Current most used practice:
Use CommonJS or ES2015 & create "compiled bundles"
@loige 55
Slide 108
Slide 108 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
Agenda
@loige 56
Slide 109
Slide 109 text
Let's try to use CommonJS
Let's try to use CommonJS
in the browser
in the browser
@loige 57
Slide 110
Slide 110 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 111
Slide 111 text
Module Bundler
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 112
Slide 112 text
Dependency graph
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 113
Slide 113 text
A module bundler has to:
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 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
Dependency resolution
62
@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
Dependency resolution
app
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
Dependency resolution
app
calculator
62
(entrypoint)
(1)
@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
Dependency resolution
app
calculator
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
Dependency resolution
app
calculator
parser
62
(entrypoint)
(1)
(2)
@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
Dependency resolution
app
calculator
parser
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
Dependency resolution
app
calculator
parser resolver
62
(entrypoint)
(1)
(2)
(3)
@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
Dependency resolution
app
calculator
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
Dependency resolution
app
calculator log
parser resolver
62
(entrypoint)
(1)
(2)
(3)
(4)
@loige
Slide 123
Slide 123 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
Dependency resolution
app
calculator log
parser resolver
62
(entrypoint)
(1)
(2)
(3)
(4)
(5)
@loige
Slide 124
Slide 124 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
modules map
@loige 63
Slide 125
Slide 125 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
modules map
{
}
@loige 63
Slide 126
Slide 126 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
modules map
{
}
'./app': (module, require) => { … },
@loige 63
Slide 127
Slide 127 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
@loige 63
Slide 128
Slide 128 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./parser': (module, require) => { … },
@loige 63
Slide 129
Slide 129 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
@loige 63
Slide 130
Slide 130 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
@loige 63
Slide 131
Slide 131 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
require path
@loige 63
Slide 132
Slide 132 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
modules map
{
}
'./app': (module, require) => { … },
'./calculator': (module, require) => { … },
'./log': (module, require) => { … },
'./parser': (module, require) => { … },
'./resolver': (module, require) => { … },
module factory function
@loige 63
Slide 133
Slide 133 text
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
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
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
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
During
During dependency resolution
dependency resolution,
,
the bundler creates a
the bundler creates a modules map
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 136
Slide 136 text
Packing
Packing
{
:
:
:
}
Modules map
Modules map
@loige 64
Slide 137
Slide 137 text
Packing
Packing
{
:
:
:
}
Modules map
Modules map
@loige 64
Slide 138
Slide 138 text
Packing
Packing
.js
{
:
:
:
}
Modules map
Modules map
Single executable
Single executable
JS file
JS file
@loige 64
Slide 139
Slide 139 text
Packed executable file
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 140
Slide 140 text
Packed executable file
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 141
Slide 141 text
Packed executable file
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 142
Slide 142 text
Packed executable file
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 143
Slide 143 text
Packed executable file
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 144
Slide 144 text
Packed executable file
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 145
Slide 145 text
Packed executable file
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 146
Slide 146 text
Packed executable file
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 147
Slide 147 text
Packed executable file
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 148
Slide 148 text
Packed executable file
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 149
Slide 149 text
Now you know how
Now you know how
Module bundlers work!
Module bundlers work!
And how to convert code written
And how to convert code written
using
using CommonJS
CommonJS to a single file that
to a single file that
works in the browser
works in the browser
@loige 66
Slide 150
Slide 150 text
A challenge for you!
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?
Can you build a (simple) module bundler from scratch?
@loige 67
Slide 151
Slide 151 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
Agenda
@loige 68
Slide 152
Slide 152 text
A state of the art module
A state of the art module
bundler for the web
bundler for the web
@loige 69
Slide 153
Slide 153 text
npm install webpack webpackcli
@loige 70
Slide 154
Slide 154 text
webpack app.js
yep, recent versions of Webpack work without config!
@loige 71
Slide 155
Slide 155 text
webpack mode=development app.js
Do not compress the code and add
annotations!
@loige 72
Slide 156
Slide 156 text
loige.link/sample-webpacked-file
@loige
73
Slide 157
Slide 157 text
Webpack concepts
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 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
@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
Entrypoint
Build the dependency graph starting from ./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
Output
Save the resulting bundled file in ./build/app.js
@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
Loaders
All the files matching "*.js" are processed with babel
and converted to ES5 Javascript
@loige
75
Slide 162
Slide 162 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 163
Slide 163 text
Everything is a module
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
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
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
Everything is a module
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 167
Slide 167 text
Webpack can load any type of file
Webpack can load any type of file
As long as you can provide a "
As long as you can provide a "loader
loader" that
" that
tells how to convert the file into
tells how to convert the file into
something the browser understands.
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 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', 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)
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
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
78
Slide 172
Slide 172 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 173
Slide 173 text
...Webpack can do (a lot) more!
...Webpack can do (a lot) more!
Dev Server
Dev Server
Tree shaking
Tree shaking
Dependencies analytics
Dependencies analytics
Source maps
Source maps
Async require / module splitting
Async require / module splitting
@loige 79
Slide 174
Slide 174 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
Agenda
@loige 80
Slide 175
Slide 175 text
Bundle cache busting
Bundle cache busting
Device CDN
Origin
Server
bundle.js
(original)
81
Slide 176
Slide 176 text
Bundle cache busting
Bundle cache busting
Device CDN
Origin
Server
example.com
bundle.js
(original)
81
Slide 177
Slide 177 text
Bundle cache busting
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js
bundle.js
(original)
81
Slide 178
Slide 178 text
Bundle cache busting
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
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
bundle.js
(original)
81
Slide 180
Slide 180 text
Bundle cache busting
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
Bundle cache busting
Device CDN
Origin
Server
example.com bundle.js bundle.js
bundle.js
(original)
bundle.js
(cache copy)
81
Slide 182
Slide 182 text
Bundle cache busting
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 183
Slide 183 text
Bundle cache busting
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 184
Slide 184 text
Bundle cache busting
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 185
Slide 185 text
STALE!
Bundle cache busting
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 186
Slide 186 text
Bundle cache busting
Bundle cache busting
83
Slide 187
Slide 187 text
Bundle cache busting
Bundle cache busting
(Manual) Solution 1
(Manual) Solution 1
83
Slide 188
Slide 188 text
Bundle cache busting
Bundle cache busting
(Manual) Solution 1
(Manual) Solution 1
bundle.js?v=1
bundle.js?v=2
bundle.js?v=3
83
Slide 189
Slide 189 text
Bundle cache busting
Bundle cache busting
(Manual) Solution 1
(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 190
Slide 190 text
Bundle cache busting
Bundle cache busting
84
Slide 191
Slide 191 text
Bundle cache busting
Bundle cache busting
(Manual) Solution 2
(Manual) Solution 2
84
Slide 192
Slide 192 text
Bundle cache busting
Bundle cache busting
(Manual) Solution 2
(Manual) Solution 2
bundle-v1.js
bundle-v2.js
bundle-v3.js
...
84
Slide 193
Slide 193 text
Bundle cache busting
Bundle cache busting
(Manual) Solution 2
(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 194
Slide 194 text
Bundle cache busting
Bundle cache busting
85
Slide 195
Slide 195 text
Bundle cache busting
Bundle cache busting
Webpack Solution
Webpack Solution
85
Slide 196
Slide 196 text
Bundle cache busting
Bundle cache busting
Webpack Solution
Webpack Solution
output: {
filename: '[name].[contenthash].js'
}
85
Slide 197
Slide 197 text
Bundle cache busting
Bundle cache busting
Webpack Solution
Webpack Solution
...
bundle.9f61f58dd1cc3bb82182.js
bundle.aacdf58ef1aa12382199.js
bundle.ed61f68defef3bb82221.js
output: {
filename: '[name].[contenthash].js'
}
85
Slide 198
Slide 198 text
Bundle cache busting
Bundle cache busting
Webpack Solution
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 199
Slide 199 text
A good example for dev/prod config
A good example for dev/prod config
(with create-react-app)
(with create-react-app)
npm i -g create-react-app
create-react-app new-project
cd new-project
npm run eject
cat config/webpack*.js
87
Slide 200
Slide 200 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
Agenda
@loige 88
Slide 201
Slide 201 text
Module bundlers are your friends
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 89
Slide 202
Slide 202 text
Webpack is not
Webpack is not
the only possibility!
the only possibility!
90
Slide 203
Slide 203 text
THE PRIZE!
THE PRIZE!
npx twaffle --keywords '#oredev #IWANTTOWINAPRIZE'
Checkout if you want to organise Twitter-based raffles.
twaffle
91
Slide 204
Slide 204 text
Tack så mycket!
Tack så mycket!
Special thanks:
Tadeas from Øredev (for reviewing my stuff thoroughly)
, , ,
(reviewers) and
(inspirations: his and his
)
@Podgeypoos79 @andreaman87 @mariocasciaro
@eugenserbanescu
@MarijnJH amazing book
workshop on JS modules
@loige
Images by .
Streamline Emoji pack
loige.link/bundle-oredev 92