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
Predictive Prefetching
Search
Minko Gechev
March 26, 2019
Programming
4
630
Predictive Prefetching
Minko Gechev
March 26, 2019
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
150
Fast Angular Apps from End to End
mgechev
1
160
The State of Angular
mgechev
1
180
The State of Angular
mgechev
1
310
Software Engineering as a Superpower
mgechev
1
160
Introduction to Angular
mgechev
1
170
Internals of the Angular CLI
mgechev
2
1.2k
The State of Angular
mgechev
1
180
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Programming
See All in Programming
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
250
Better Code Design in PHP
afilina
0
180
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.6k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
130
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.3k
クックパッド検索システム統合/Cookpad Search System Consolidation
giga811
0
140
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
650
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.1k
Datadog Workflow Automation で圧倒的価値提供
showwin
1
310
PEPCは何を変えようとしていたのか
ken7253
3
310
Featured
See All Featured
BBQ
matthewcrist
87
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Producing Creativity
orderedlist
PRO
344
40k
Building an army of robots
kneath
303
45k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Optimizing for Happiness
mojombo
377
70k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Rails Girls Zürich Keynote
gr2m
94
13k
Building Applications with DynamoDB
mza
93
6.2k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Transcript
twitter.com/mgechev Predictive Prefetching twitter.com/mgechev github.com/mgechev blog.mgechev.com
twitter.com/mgechev twitter.com/mgechev github.com/mgechev
twitter.com/mgechev Evolution of the web UI Code-splitting Prefetching Guess.js Agenda
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
twitter.com/mgechev lazy-loading
twitter.com/mgechev - Route-based - Component-based Lazy-loading strategies
twitter.com/mgechev Step 1: Open https://example.com/ Step 2: Determine JavaScript which
is likely to be required Step 3: Download the chunks Step 4: Store chunks in browser cache Pre-fetching
twitter.com/mgechev How do we pick the priorities of the bundles
to pre-fetch?
twitter.com/mgechev
twitter.com/mgechev Lazy-load everything!
twitter.com/mgechev Lazy-load everything! …and let tooling take care of the
rest
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev Route-based splitting
twitter.com/mgechev $ npm run build # For Angular CLI $
serve -s dist
twitter.com/mgechev Let’s emulate *really* bad conditions
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev Let’s take a look at the GA graph
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev - Main & Settings in same chunk ‣ Update
of the source code - Pre-fetch FAQ when the user is at Home Possible optimizations
twitter.com/mgechev
twitter.com/mgechev early preview
twitter.com/mgechev $ vim webpack.config.js
twitter.com/mgechev const { GuessPlugin } = require('guess-webpack'); // ... plugins:
[ // ... new GuessPlugin({ GA: 'XXXXXX' }) ] // ...
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev How it works…
twitter.com/mgechev - guess-ga - guess-parser - guess-webpack Packages
twitter.com/mgechev guess-ga Fetching structured data from Google Analytics
twitter.com/mgechev guess-parser Gets metadata by statically analyzing our app
twitter.com/mgechev guess-webpack Set of webpack plugins which automate the build
twitter.com/mgechev /a /a/a /a/b /b /b/a /
twitter.com/mgechev Markov Chain / /a /a/:id /b /b/a / 0
0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 /a /a/a /a/b /b /b/a /
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: / /a
/a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: / /a
/a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: / /a
/a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev / /a /a/:id /b /b/a / 0 0.3 0
0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 /a /a/a /a/b /b /b/a / Activity: - Download b.bundle.js Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: - Download
b.bundle.js / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: - Download
b.bundle.js / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id
/b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id
/b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id
/b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id
/b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action - Download a.bundle.js Probability threshold: 0.5
twitter.com/mgechev - https://mgv.io/dd-bundling - https://mgv.io/cost-of-js - https://mgv.io/predictive-fetching - https://mgv.io/guess References
Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com