Unbundling the JavaScript module bundler - Øredev 21 Nov 2018

Unbundling the JavaScriptUnbundling the JavaScript
module bundlermodule bundler
Luciano Mammino -Luciano Mammino - @loige@loige
21/11/2018
loige.link/bundle-oredev
1

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

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

Luciano... whoLuciano... who
Find me online:
- (@loige)
- (lmammino)
-
- (loige.co)
Twitter
GitHub
Linkedin
Blog
Solution Architect at
with @mariocasciaro
with @andreaman87
with @Podgeypoos79
12

Luciano... whoLuciano... 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

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

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

App featuresApp features
@loige 15

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

Dynamic Favicon
favico.js@loige 17

Custom animated tooltips
tippy.js@loige 18

Confetti rainfall
dom-confetti@loige 19

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

7 Requests only for the JS code!
@loige 21

Current scenarioCurrent 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

Ideal scenarioIdeal 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

How to do this?How to do this?
@loige 24

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

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

# lumpy.txt
https://unpkg.com/zepto@1.2.0/dist/zepto.min.js
https://unpkg.com/uuidjs@4.0.3/dist/uuid.core.js
https://unpkg.com/store2@2.7.0/dist/store2.min.js
https://unpkg.com/tippy.js@2.2.3/dist/tippy.all.min.js
https://unpkg.com/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 deﬁne
all the vendors in a text ﬁle
@loige 26 . 2

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

7 requests
2 requests
@loige 27

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

ConcatenationConcatenation
++
MiniﬁcationMiniﬁcation
@loige 28

This is good...This is good...
@loige 29

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

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

UpdatingUpdating them should be easythem should be easy
We shouldn't worry aboutWe shouldn't worry about transitive dependenciestransitive dependencies
(dependencies of dependencies)(dependencies of dependencies)
Order of importsOrder of imports shouldn't really mattershouldn't really matter
We rely onWe rely on dependenciesdependencies!!
@loige 31

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

Reusable dependencies...Reusable dependencies...
Modules!Modules!
@loige 33

ModulesModules
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

AgendaAgenda
@loige 35

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

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

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

oror
@loige 37

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

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

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

A function in JS creates an isolated scopeA function in JS creates an isolated scope
@loige 38

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

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

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

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

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

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

IIFE is a recurring pattern inIIFE is a recurring pattern in
JavaScript modulesJavaScript modules
@loige 40

Let's implement a moduleLet's implement a module
that provides:that provides:

Information hidingInformation hiding
exported functionalitiesexported functionalities
@loige 41

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

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

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

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

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

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

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

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

We want modules to beWe want modules to be
reusablereusable across different apps andacross different apps and
organisations...organisations...
...we need...we need
AA STANDARD MODULESTANDARD MODULE format!format!@loige 43

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

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

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

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

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

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

Cannot import parts of modules
@loige 47

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AMD (AMD ( ))
Asynchronous modules
Works on Browsers and Server side

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

UMDUMD
Universal Module DefinitionUniversal Module Definition
A module definition that is compatible with
Global modules, CommonJS & AMD

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

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

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

Allows you to define modules that
can be used by almost any module loader

Complex, the wrapper code
is almost impossible to write manually
UMDUMD
Universal Module DefinitionUniversal Module Definition
@loige 53 . 3

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

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

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

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

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

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

// index.html
<html>
<body>

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

// index.html
<html>
<body>

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

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

It is a (still work in progress) standard format

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

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

AgendaAgenda
@loige 56

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DuringDuring dependency resolutiondependency resolution,,
the bundler creates athe bundler creates a modules mapmodules map
@loige 63

{

}
@loige 63

{

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

{

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

{

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

{

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

{

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

{

}
require path
@loige 63

{

}
module factory function
@loige 63

{

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

PackingPacking
{
   :
   :
   :
}
Modules mapModules map
@loige 64

PackingPacking
.js
{
   :
   :
   :
}
Modules mapModules map
Single executableSingle executable
JS ﬁleJS ﬁle
@loige 64

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

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

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

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

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

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

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

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

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

Now you know howNow you know how
Module bundlers work!Module bundlers work!

And how to convert code writtenAnd how to convert code written
usingusing CommonJSCommonJS to a single ﬁle thatto a single ﬁle that
works in the browserworks in the browser
@loige 66

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

AgendaAgenda
@loige 68

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

npm install webpack webpackcli
@loige 70

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

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

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

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

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

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

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

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

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

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

Webpack can load any type of fileWebpack can load any type of file
As long as you can provide a "As long as you can provide a "loaderloader" that" that
tells how to convert the file intotells 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

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

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

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

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

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

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

AgendaAgenda
@loige 80

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

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

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

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

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

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

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

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

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

83

(Manual) Solution 1(Manual) Solution 1
83

bundle.js?v=1
bundle.js?v=2
bundle.js?v=3
83

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

84

bundle-v1.js
bundle-v2.js
bundle-v3.js
...
84

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

85

Webpack SolutionWebpack Solution
85

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

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

+

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

A good example for dev/prod conﬁgA good example for dev/prod conﬁg
(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

AgendaAgenda
@loige 88

Module bundlers are your friendsModule 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

Webpack is notWebpack is not
the only possibility!the only possibility!
90

THE PRIZE!THE PRIZE!
npx twaffle --keywords '#oredev #IWANTTOWINAPRIZE'
Checkout if you want to organise Twitter-based rafﬂes.twafﬂe
91

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

Unbundling the JavaScript module bundler - Øredev 21 Nov 2018

More Related Content

What's hot

Similar to Unbundling the JavaScript module bundler - Øredev 21 Nov 2018

More from Luciano Mammino

Recently uploaded

Unbundling the JavaScript module bundler - Øredev 21 Nov 2018