Web Apps performance & JavaScript compilers

Web Apps performance & JavaScript compilers Roman Liutikov Attendify

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 performance anti-pattern

the goal is to Reduce Time To Interaction

The right way _______ index.html route-1.js common-1.js I can see
it I can use it route-2.js Pre-caching Server Rendering (JS & CSS)

Code Splitting

Code splitting Divide JS bundle into chunks route-1.js route-2.js route-3.js
route-4.js ... common-1.js common-2.js Webpack CommonsChunkPlugin

Initial load Load initial route and its common chunk route-1.js
common-1.js

The compiler is to blame for everything

Smarter compiler means smaller output size & eval time

Compiler optimizations

Dead code elimination Remove 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 UglifyJS Rollup Babili Closure Compiler Dependency graph

Tree-shaking (A special case of DCE) Do not include unused
exports // math.js export const dec = (x) => x - 1; export const inc = (x) => x + 1; // main.js import { inc } from 'math'; const x = 0; const y = 1; inc(x); Webpack 2 Rollup Closure Compiler

Function call inlining Replace 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 folding Evaluate constant expressions at compile time UglifyJS Babili
Closure 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 folding Evaluate 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 Webpack Module level splitting a b c
d a b c a b a c input output

Code splitting in Closure Compiler Function/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 loading in Webpack 2 Per 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 about framework size?

Ahead-of-time compilation Reduce runtime overhead Templates AOT compilation in Angular
2 & Vue.js 2

Preact Vue.js Riot.js Lightweight alternatives

Out of the box code splitting is coming to

Should I use code splitting? Yes

Should I use server-side rendering? Maybe

Should I care about compiler? NO

@roman01la Thank You!

Web Apps performance & JavaScript compilers

Web Apps performance & JavaScript compilers

More Decks by Roman Liutikov

Other Decks in Programming

Featured

Transcript