Teach Your Bundler Users' Habits

Bundlers provide an efficient method of combining resources from our application in order to prevent redundant network requests by the browser. The statically resolvable ES2015 modules allow tree-shaking so in the end, we can deliver to our users only the code they need to run the entire application. Combining bundling and lazy-loading we provide to the users only the piece of the application they need at given point.

In this talk, we’ll discuss how different machine learning techniques can help us to improve the traditional static, pre-defined bundling and pre-fetching methods. We’ll describe how, using webpack and SystemJS, we can personalize the bundling based on the users’ behavior.

Transcript

1. twitter.com/mgechev Teach Your Bundler Users’ Habits 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 Teach Your Bundler Users’ Habits twitter.com/mgechev github.com/mgechev blog.mgechev.com
6. twitter.com/mgechev ML-driven bundling Teach Your Bundler Users’ Habits twitter.com/mgechev github.com/mgechev blog.mgechev.com
7. twitter.com/mgechev ML-driven bundling Data-driven bundling Teach Your Bundler Users’ Habits twitter.com/mgechev github.com/mgechev blog.mgechev.com
8. twitter.com/mgechev JavaScript is powerful
9. twitter.com/mgechev comparable to native
10. twitter.com/mgechev Everything comes with a price tag
11. twitter.com/mgechev
12. twitter.com/mgechev
13. twitter.com/mgechev
14. twitter.com/mgechev
15. twitter.com/mgechev
16. twitter.com/mgechev
17. twitter.com/mgechev https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
18. twitter.com/mgechev lazy-loading
19. twitter.com/mgechev - Route-Based - Component-Based Lazy-loading strategies
20. twitter.com/mgechev How do we pick the split points?
21. twitter.com/mgechev often subjectively
22. twitter.com/mgechev sometimes based on data
23. twitter.com/mgechev - Manual - Error-Prone but always…
24. 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
25. twitter.com/mgechev How do we pick the priorities of the bundles to pre-fetch?
26. twitter.com/mgechev
27. twitter.com/mgechev Lazy-load everything!
28. twitter.com/mgechev Lazy-load everything! …and let tooling take care of the rest
29. twitter.com/mgechev
30. twitter.com/mgechev /a /a/a /a/b /b /b/a /
31. twitter.com/mgechev /a /a/a /a/b /b /b/a /
32. twitter.com/mgechev /a /a/a /a/b /b /b/a /
33. twitter.com/mgechev /a /a/a /a/b /b /b/a /
34. twitter.com/mgechev
35. twitter.com/mgechev
36. twitter.com/mgechev route-based splitting
37. twitter.com/mgechev &
38. twitter.com/mgechev $ npm run build # For Create React App $ serve -s build # For Angular CLI $ serve -s dist
39. twitter.com/mgechev Let’s emulate *really* bad conditions
40. twitter.com/mgechev
41. twitter.com/mgechev
42. twitter.com/mgechev Let’s take a look at the GA graph
43. twitter.com/mgechev
44. twitter.com/mgechev
45. twitter.com/mgechev - Main & Settings in same chunk ‣ Update of the source code - Pre-fetch FAQ when the user is at Home ‣ Custom logic Possible optimizations
46. twitter.com/mgechev Introducing data-driven bundling
47. twitter.com/mgechev Introducing data-driven bundling early preview
48. twitter.com/mgechev $ npm run eject # For Create React App $ vim config/webpack.config.prod.js # For Angular CLI $ vim webpack.config.js
49. twitter.com/mgechev const { MLPlugin } = require('@mlx/webpack'); const data = require('./data.json'); "// ""... plugins: [ "// ""... new MLPlugin({ data }) "// ""... ] "// ""...
50. twitter.com/mgechev
51. twitter.com/mgechev How it works…
52. twitter.com/mgechev Tooling
53. twitter.com/mgechev - @mlx/ga - @mlx/parser - @mlx/webpack - @mlx/cluster Packages
54. twitter.com/mgechev @mlx/ga Fetching structured data from Google Analytics
55. twitter.com/mgechev const { fetch } = require(‘@mlx/ga'); fetch({ key: require('./c.json'), viewId: '000000000', period: { startDate, endDate }, routes }) .then(g "=> writeFileSync('data.json', JSON.stringify(g))); @mlx/ga
56. twitter.com/mgechev @mlx/parser Gets metadata by statically analyzing our app
57. twitter.com/mgechev @mlx/webpack Set of webpack plugins which automate the build
58. twitter.com/mgechev MLPlugin ClusterChunksPlugin RuntimePrefetchPlugin
59. twitter.com/mgechev ClusterChunksPlugin
60. twitter.com/mgechev /a /a/a /a/b /b /b/a / ClusterChunksPlugin Performs clustering based on: - GA data - Application metadata
61. twitter.com/mgechev /a /a/a /a/b /b /b/a / ClusterChunksPlugin Performs clustering based on: - GA data - Application metadata root.bundle.js a.bundle.js b.bundle.js
62. twitter.com/mgechev RuntimePrefetchPlugin
63. twitter.com/mgechev /a /a/a /a/b /b /b/a /
64. 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 /
65. 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
66. 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
67. 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
68. 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
69. 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
70. 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
71. 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
72. 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
73. 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
74. 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
75. twitter.com/mgechev - Personalized bundling - Smarter clustering - Personalize pre-fetching - Reduced chunk over fetching - More robust parsers Future plans
76. twitter.com/mgechev
77. twitter.com/mgechev - https://mgv.io/dd-bundling - https://mgv.io/cost-of-js - https://mgv.io/predictive-fetching - https://mgv.io/mlx References
78. twitter.com/mgechev A new wave of data-driven web tooling is up to come
79. Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com