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
180
Fast Angular Apps from End to End
mgechev
1
190
The State of Angular
mgechev
1
190
The State of Angular
mgechev
1
370
Software Engineering as a Superpower
mgechev
1
190
Introduction to Angular
mgechev
1
200
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
210
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Programming
See All in Programming
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
310
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
400
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
730
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
230
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
4
490
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
リッチエディターを安全に開発・運用するために
unachang113
1
320
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
140
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
370
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7k
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
320
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Gamification - CAS2011
davidbonilla
81
5.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A Tale of Four Properties
chriscoyier
160
23k
Practical Orchestrator
shlominoach
190
11k
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