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
660
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
200
Fast Angular Apps from End to End
mgechev
1
200
The State of Angular
mgechev
1
200
The State of Angular
mgechev
1
380
Software Engineering as a Superpower
mgechev
1
210
Introduction to Angular
mgechev
1
210
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
220
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Programming
See All in Programming
Le côté obscur des IA génératives
pascallemerrer
0
130
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
580
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.9k
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
930
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
170
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
140
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
360
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
410
CSC509 Lecture 04
javiergs
PRO
0
300
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Gamification - CAS2011
davidbonilla
81
5.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Thoughts on Productivity
jonyablonski
70
4.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
BBQ
matthewcrist
89
9.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
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