Predictive Prefetching for Angular

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
August 23, 2018
100

Predictive Prefetching for Angular

Websites are slow! Double-click shows that the average load time on a 3G network is 19 seconds! On top of that, on mobile devices, JavaScript compared to a JPG image with the same size may require x25 more processing time.

How to speed up our apps? Lazy-loading is here to help! By only loading the minimum amount of JavaScript during the initial page load we can improve the UX dramatically. However, this brings another set of questions - how to decide what to load lazily, how to provide instant page load by mindfully prefetching the bundles, without draining the users' mobile data plan?

Machine learning is already playing an essential role in our day-to-day life, and it has the potential to assist in our development process for smaller, smarter, and faster JavaScript applications!

In this talk, we'll see how we can create a machine learning model from a Google Analytics report. Later, by empowering static analysis techniques, we'll map this model to the lazy-loaded JavaScript chunks and apply predictive prefetching and data-driven bundling. In the last part of the presentation, we'll look at Guess.js which provides a sample implementation of these ideas.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

August 23, 2018
Tweet

Transcript

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

  2. twitter.com/mgechev

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

  4. twitter.com/mgechev

  5. twitter.com/mgechev comparable to native

  6. twitter.com/mgechev Everything comes with a price tag

  7. twitter.com/mgechev

  8. twitter.com/mgechev

  9. twitter.com/mgechev

  10. twitter.com/mgechev

  11. twitter.com/mgechev

  12. twitter.com/mgechev

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

  14. twitter.com/mgechev lazy-loading

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

  16. twitter.com/mgechev How do we pick the split points?

  17. twitter.com/mgechev often subjectively

  18. twitter.com/mgechev sometimes based on data

  19. twitter.com/mgechev - Manual - Error-prone but always…

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

    to pre-fetch?
  22. twitter.com/mgechev

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

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

    rest
  25. twitter.com/mgechev

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

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

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

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

  30. twitter.com/mgechev

  31. twitter.com/mgechev

  32. twitter.com/mgechev Route-based splitting

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

    serve -s dist
  34. twitter.com/mgechev Let’s emulate *really* bad conditions

  35. twitter.com/mgechev

  36. twitter.com/mgechev

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

  38. twitter.com/mgechev

  39. twitter.com/mgechev

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

    of the source code - Pre-fetch FAQ when the user is at Home Possible optimizations
  41. twitter.com/mgechev

  42. twitter.com/mgechev early preview

  43. twitter.com/mgechev Supports Angular CLI 1.7 Disclaimer

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

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

    [ "// ""... new GuessPlugin({ GA: 'XXXXXX' }) ] "// ""...
  46. twitter.com/mgechev

  47. twitter.com/mgechev

  48. twitter.com/mgechev How it works…

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

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

  51. twitter.com/mgechev const { fetch } = require(‘guess-ga'); fetch({ key: require('./c.json'),

    viewId: '000000000', period: { startDate, endDate }, routes }) .then(g "=> writeFileSync('data.json', JSON.stringify(g))); guess-ga
  52. twitter.com/mgechev guess-parser Gets metadata by statically analyzing our app

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

  54. twitter.com/mgechev GuessPlugin ClusterChunksPlugin RuntimePrefetchPlugin

  55. twitter.com/mgechev GuessPlugin ClusterChunksPlugin RuntimePrefetchPlugin

  56. twitter.com/mgechev RuntimePrefetchPlugin

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

  58. 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 /
  59. 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
  60. 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
  61. 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
  62. 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
  63. 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
  64. 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
  65. 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
  66. 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
  67. 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
  68. 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
  69. twitter.com/mgechev - Personalized bundling - Smarter clustering - Personalize pre-fetching

    - Reduced chunk over fetching - More robust parsers Future plans
  70. twitter.com/mgechev - https://mgv.io/dd-bundling - https://mgv.io/cost-of-js - https://mgv.io/predictive-fetching - https://mgv.io/guess References

  71. twitter.com/mgechev A new wave of data-driven web tooling is up

    to come
  72. Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com