Predictive Prefetching

Transcript

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

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

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

4. twitter.com/mgechev

5. twitter.com/mgechev

6. twitter.com/mgechev

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

8. twitter.com/mgechev lazy-loading

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

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. twitter.com/mgechev How do we pick the priorities of the bundles

    to pre-fetch?

12. twitter.com/mgechev

13. twitter.com/mgechev Lazy-load everything!

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

    rest

15. twitter.com/mgechev

16. twitter.com/mgechev

17. twitter.com/mgechev Route-based splitting

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

    serve -s dist

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

20. twitter.com/mgechev

21. twitter.com/mgechev

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

23. twitter.com/mgechev

24. twitter.com/mgechev

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. twitter.com/mgechev

27. twitter.com/mgechev early preview

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

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

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

30. twitter.com/mgechev

31. twitter.com/mgechev

32. twitter.com/mgechev How it works…

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

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

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

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

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

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com