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
300
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
170
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Programming
See All in Programming
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
200
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
270
Ruby on cygwin 2025-02
fd0
0
180
Ça bouge du côté des animations CSS !
goetter
2
150
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
200
CloudNativePGを布教したい
nnaka2992
0
110
Formの複雑さに立ち向かう
bmthd
1
930
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Agile that works and the tools we love
rasmusluckow
328
21k
What's in a price? How to price your products and services
michaelherold
244
12k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Cult of Friendly URLs
andyhume
78
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
A better future with KSS
kneath
238
17k
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