Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Apps performance & JavaScript compilers
Search
Roman Liutikov
December 04, 2016
Programming
3
120
Web Apps performance & JavaScript compilers
MostJS Frameworks Day @ Dec 4 2016
Roman Liutikov
December 04, 2016
Tweet
Share
More Decks by Roman Liutikov
See All by Roman Liutikov
ClojureScript × Type Inference
roman01la
0
37
React Kyiv – Dec 19, 2017
roman01la
1
220
React & ClojureScript in production at Attendify
roman01la
0
190
Introduction to React.js
roman01la
0
76
React Native: Native Mobile Development in JavaScript @ LvivJS 2016
roman01la
0
130
React Native: Are we there yet? (Pokémon edition) @ VinnytsiaJS '16
roman01la
0
370
React Native: Native mobile development with JavaScript
roman01la
0
180
ClojureScript, что ты такое?
roman01la
1
200
ClojureScript: what are you?
roman01la
2
130
Other Decks in Programming
See All in Programming
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
530
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
740
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
昭和の職場からアジャイルの世界へ
kumagoro95
1
360
SwiftUI Viewの責務分離
elmetal
PRO
1
220
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
120
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
Unity Android XR入門
sakutama_11
0
150
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
Open source software: how to live long and go far
gaelvaroquaux
0
630
Software Architecture
hschwentner
6
2.1k
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Designing Experiences People Love
moore
139
23k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
A Philosophy of Restraint
colly
203
16k
How STYLIGHT went responsive
nonsquared
98
5.4k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Typedesign – Prime Four
hannesfritz
40
2.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
Web Apps performance & JavaScript compilers Roman Liutikov Attendify
Web Apps nowadays 5 MB of awesome web technologies is
loading...
None
None
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
None
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!