Роман Лютиков "web apps performance & javascript compilers"
TRANSCRIPT
Web Apps performance & JavaScript compilersRoman LiutikovAttendify
Web Apps nowadays
5 MB of awesome web technologies is loading...
This is NOT good
● Makes people wait● Eats their traffic and money● Everyone hates you
● You loose money
WTMHLM
performanceanti-pattern
the goal is toReduceTime To Interaction
The right way _______
index.htmlroute-1.js
common-1.js
I can see it I can use it
route-2.js Pre-cachingServ
er R
ende
ring
(JS
& CS
S)
Code Splitting
Code splittingDivide JS bundle into chunks
route-1.js route-2.js route-3.js route-4.js ...common-1.js common-2.js
WebpackCommonsChunkPlugin
Initial loadLoad initial route and its common chunk
route-1.js
common-1.js
The compiler is to blame for everything
Smarter compilermeans smalleroutput size & eval time
Compileroptimizations
Dead code eliminationRemove code that can never be executed
const dec = (x) => x - 1;const inc = (x) => x + 1;
const x = 0;const y = 1;
inc(x);
inc
dec y
x
UglifyJSRollupBabiliClosure Compiler
Dependency graph
Tree-shaking (A special case of DCE)
Do not include unused exports
// math.jsexport const dec = (x) => x - 1;export const inc = (x) => x + 1;
// main.jsimport { inc } from 'math';
const x = 0;const y = 1;
inc(x);
Webpack 2RollupClosure Compiler
Function call inliningReplace a function call with its body
const person = { fname: 'John', lname: 'Doe'};
function fullName(p) { return p.fname + ' ' + p.lname;}
console.log(fullName(person));
Closure Compiler
const person = { fname: 'John', lname: 'Doe'};
console.log( person.fname + ' ' + person.lname);
Property flattening (collapsing)Collapse object properties into separate variables
const person = { fname: 'John', lname: 'Doe'};
console.log( person.fname + ' ' + person.lname);
Closure Compiler
const person$fname = 'John';const person$lname = 'Doe';
console.log( person$fname + ' ' + person$lname);
Constant foldingEvaluate constant expressions at compile time
UglifyJSBabiliClosure Compiler
const person$fname = 'John';const person$lname = 'Doe';
console.log('John Doe');
const person$fname = 'John';const person$lname = 'Doe';
console.log( person$fname + ' ' + person$lname);
Known methods foldingEvaluate known methods at compile time
Closure Compiler
'012345'
'World!'
99
[0, 1, 2, 3, 4, 5].join('');
'Hello, world!'.substr(7, 11);
parseInt('99 UAH');
Code splitting in WebpackModule level splitting
a b c d a b c
a b
a c
input output
Code splitting in Closure CompilerFunction/method & variable level splitting
a b c d a
a b
a c
input output b
c
Precache & Lazy load
Precache
route-1.js
common-1.js
Load and/or cache chunks in background
UI is ready
Load in bg
Lazy load
route-1.js
common-1.js
Load chunks on demand
Navigation
Load chunk route-2.js
...
Code splitting & Lazy loadingin Webpack 2Per route chunks with React Router
<Route path="user/:id" getComponent={(loc, cb) => { System.import("pages/User") .then((module) => cb(null, module)); }}>
Preload chunks* Chrome, Opera & Chrome for Android
<head> <link rel="preload" as="script" href="chunk-1.js"> <link rel="preload" as="script" href="chunk-2.js"> ...</head>
Precache with Service Worker (sw-precache)
Preload + Offline support
plugins: [ new SWPrecacheWebpackPlugin({ cacheId: "app", filename: "app-sw.js", staticFileGlobs: [ "app/js/**.js" ]})]
What aboutframework size?
Ahead-of-time compilationReduce runtime overhead
Templates AOT compilation inAngular 2 & Vue.js 2
Preact Vue.js Riot.js
Lightweight alternatives
Out of the box code splitting is coming to
Should I usecode splitting? Yes
Should I useserver-side rendering?
Maybe
Should I careabout compiler? NO
@roman01la
Thank You!