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
Immutable ActiveRecord
megane42
0
130
Domain-Driven Transformation
hschwentner
2
1.9k
Rails アプリ地図考 Flush Cut
makicamel
1
110
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
WebDriver BiDiとは何なのか
yotahada3
1
140
Introduction to kotlinx.rpc
arawn
0
630
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Producing Creativity
orderedlist
PRO
343
39k
Fireside Chat
paigeccino
34
3.2k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Building Applications with DynamoDB
mza
93
6.2k
The Cult of Friendly URLs
andyhume
78
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Adopting Sorbet at Scale
ufuk
74
9.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
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!