Download to read offline
![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/75/Web-Apps-Performance-JavaScript-Compilers-20-2048.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/75/Web-Apps-Performance-JavaScript-Compilers-28-2048.jpg)
Uploaded byFwdays
Роман Лютиков "Web Apps Performance & JavaScript Compilers"
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.
Роман Лютиков "Web Apps Performance & JavaScript Compilers"
- 1. Web Apps performance& JavaScript compilers Roman Liutikov Attendify
- 2. Web Apps nowadays 5 MBof awesome web technologies is loading...
- 5. This is NOTgood ● Makes people wait ● Eats their traffic and money ● Everyone hates you ● You loose money
- 6.
- 7. the goal isto 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)
- 9.
- 10. Code splitting Divide JSbundle 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 initialroute and its common chunk route-1.js common-1.js
- 12. The compiler isto blame for everything
- 13. Smarter compiler means smaller outputsize & eval time
- 14.
- 15. Dead code elimination Removecode 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 specialcase 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 Replacea 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) Collapseobject 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 constantexpressions 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 Evaluateknown 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 inWebpack Module level splitting a b c d a b c a b a c input output
- 22. Code splitting inClosure Compiler Function/method & variable level splitting a b c d a a b a c input outputb c
- 23. Precache & Lazyload
- 24. Precache route-1.js common-1.js Load and/or cachechunks in background UI is ready Load in bg
- 25. Lazy load route-1.js common-1.js Load chunkson 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 ServiceWorker (sw-precache) Preload + Offline support plugins: [ new SWPrecacheWebpackPlugin({ cacheId: "app", filename: "app-sw.js", staticFileGlobs: [ "app/js/**.js" ] })]
- 29.
- 30. Ahead-of-time compilation Reduce runtimeoverhead Templates AOT compilation in Angular 2 & Vue.js 2
- 32. Preact Vue.js Riot.js Lightweightalternatives
- 33. Out of thebox code splitting is coming to
- 34. Should I use codesplitting? Yes
- 35.
- 36. Should I care aboutcompiler? NO
- 37.