Web Apps performance & JavaScript compilers

MostJS Frameworks Day @ Dec 4 2016

1. Web Apps performance & JavaScript compilers Roman Liutikov Attendify
2. Web Apps nowadays 5 MB of awesome web technologies is loading...
5. This is NOT good • Makes people wait • Eats their traffic and money • Everyone hates you • You loose money
6. WTMHLM performance anti-pattern
7. the goal is to Reduce Time To Interaction
8. 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)
9. Code Splitting
10. 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
11. Initial load Load initial route and its common chunk route-1.js common-1.js
12. The compiler is to blame for everything
13. Smarter compiler means smaller output size & eval time
14. Compiler optimizations
15. 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
16. 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
17. 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);
18. 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);
19. 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);
20. 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');
21. Code splitting in Webpack Module level splitting a b c d a b c a b a c input output
22. Code splitting in Closure Compiler Function/method & variable level splitting a b c d a a b a c input output b c
23. Precache & Lazy load
24. Precache route-1.js common-1.js Load and/or cache chunks in background UI is ready Load in bg
25. Lazy load route-1.js common-1.js Load chunks on demand Navigation Load chunk route-2.js ...
26. 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)); }}>
27. 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>
28. Precache with Service Worker (sw-precache) Preload + Offline support plugins: [ new SWPrecacheWebpackPlugin({ cacheId: "app", filename: "app-sw.js", staticFileGlobs: [ "app/js/**.js" ] })]
29. What about framework size?
30. Ahead-of-time compilation Reduce runtime overhead Templates AOT compilation in Angular 2 & Vue.js 2
32. Preact Vue.js Riot.js Lightweight alternatives
33. Out of the box code splitting is coming to
34. Should I use code splitting? Yes
35. Should I use server-side rendering? Maybe
36. Should I care about compiler? NO
37. @roman01la Thank You!