Predictive Prefetching

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
March 26, 2019
Programming
4
470

Predictive Prefetching

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

March 26, 2019
Tweet

Want more?

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
12
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
2
440
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
53
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
1
130
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
67
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
67
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
4
130
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
150
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
220
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
410
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
110
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200

Transcript

  1. 1.

    twitter.com/mgechev Predictive Prefetching twitter.com/mgechev github.com/mgechev blog.mgechev.com

  2. 2.

    twitter.com/mgechev twitter.com/mgechev github.com/mgechev

  3. 3.

    twitter.com/mgechev Evolution of the web UI Code-splitting Prefetching Guess.js Agenda

  4. 4.

    twitter.com/mgechev

  5. 5.

    twitter.com/mgechev

  6. 6.

    twitter.com/mgechev

  7. 7.

    twitter.com/mgechev https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

  8. 8.

    twitter.com/mgechev lazy-loading

  9. 9.

    twitter.com/mgechev - Route-based - Component-based Lazy-loading strategies

  10. 10.

    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
  11. 11.

    twitter.com/mgechev How do we pick the priorities of the bundles

    to pre-fetch?
  12. 12.

    twitter.com/mgechev

  13. 13.

    twitter.com/mgechev Lazy-load everything!

  14. 14.

    twitter.com/mgechev Lazy-load everything! …and let tooling take care of the

    rest
  15. 15.

    twitter.com/mgechev

  16. 16.

    twitter.com/mgechev

  17. 17.

    twitter.com/mgechev Route-based splitting

  18. 18.

    twitter.com/mgechev $ npm run build # For Angular CLI $

    serve -s dist
  19. 19.

    twitter.com/mgechev Let’s emulate *really* bad conditions

  20. 20.

    twitter.com/mgechev

  21. 21.

    twitter.com/mgechev

  22. 22.

    twitter.com/mgechev Let’s take a look at the GA graph

  23. 23.

    twitter.com/mgechev

  24. 24.

    twitter.com/mgechev

  25. 25.

    twitter.com/mgechev - Main & Settings in same chunk ‣ Update

    of the source code - Pre-fetch FAQ when the user is at Home Possible optimizations
  26. 26.

    twitter.com/mgechev

  27. 27.

    twitter.com/mgechev early preview

  28. 28.

    twitter.com/mgechev $ vim webpack.config.js

  29. 29.

    twitter.com/mgechev const { GuessPlugin } = require('guess-webpack'); // ... plugins:

    [ // ... new GuessPlugin({ GA: 'XXXXXX' }) ] // ...
  30. 30.

    twitter.com/mgechev

  31. 31.

    twitter.com/mgechev

  32. 32.

    twitter.com/mgechev How it works…

  33. 33.

    twitter.com/mgechev - guess-ga - guess-parser - guess-webpack Packages

  34. 34.

    twitter.com/mgechev guess-ga Fetching structured data from Google Analytics

  35. 35.

    twitter.com/mgechev guess-parser Gets metadata by statically analyzing our app

  36. 36.

    twitter.com/mgechev guess-webpack Set of webpack plugins which automate the build

  37. 37.

    twitter.com/mgechev /a /a/a /a/b /b /b/a /

  38. 38.

    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 /
  39. 39.

    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
  40. 40.

    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
  41. 41.

    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
  42. 42.

    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
  43. 43.

    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
  44. 44.

    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
  45. 45.

    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
  46. 46.

    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
  47. 47.

    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
  48. 48.

    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
  49. 49.

    twitter.com/mgechev - https://mgv.io/dd-bundling - https://mgv.io/cost-of-js - https://mgv.io/predictive-fetching - https://mgv.io/guess References

  50. 50.

    Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com