Роман Лютиков "Web Apps Performance & JavaScript Compilers"
1 like383 views
1) Web app performance can be improved through code splitting techniques that divide JavaScript bundles into smaller chunks to reduce loading time. 2) Compiler optimizations like tree shaking, constant folding, and dead code elimination can help reduce code size and evaluation time by removing unused code. 3) Code splitting libraries like Webpack allow splitting code at the module or route level to preload important chunks and lazily load others on demand to improve performance.
![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');](https://image.slidesharecdn.com/liutikov-161204092952/85/Web-Apps-Performance-JavaScript-Compilers-20-320.jpg)
![Precache with Service Worker (sw-precache)
Preload + Offline support
plugins: [
new SWPrecacheWebpackPlugin({
cacheId: "app",
filename: "app-sw.js",
staticFileGlobs: [
"app/js/**.js"
]
})]](https://image.slidesharecdn.com/liutikov-161204092952/85/Web-Apps-Performance-JavaScript-Compilers-28-320.jpg)
Роман Лютиков "Web Apps Performance & JavaScript Compilers"
- 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
- 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 ServerRendering (JS&CSS)
- 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
- 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 decy 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 outputb 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 chunkroute-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" ] })]
- 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
- 36. Should I care about compiler? NO