Teach Your Bundler Users' Habits

Slide 1

Slide 1 text

twitter.com/mgechev Teach Your Bundler Users’ Habits twitter.com/mgechev github.com/mgechev blog.mgechev.com

Slide 2

Slide 2 text

twitter.com/mgechev

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

twitter.com/mgechev

Slide 5

Slide 5 text

twitter.com/mgechev Teach Your Bundler Users’ Habits twitter.com/mgechev github.com/mgechev blog.mgechev.com

Slide 6

Slide 6 text

twitter.com/mgechev ML-driven bundling Teach Your Bundler Users’ Habits twitter.com/mgechev github.com/mgechev blog.mgechev.com

Slide 7

Slide 7 text

twitter.com/mgechev ML-driven bundling Data-driven bundling Teach Your Bundler Users’ Habits twitter.com/mgechev github.com/mgechev blog.mgechev.com

Slide 8

Slide 8 text

twitter.com/mgechev JavaScript is powerful

Slide 9

Slide 9 text

twitter.com/mgechev comparable to native

Slide 10

Slide 10 text

twitter.com/mgechev Everything comes with a price tag

Slide 11

Slide 11 text

twitter.com/mgechev

Slide 12

Slide 12 text

twitter.com/mgechev

Slide 13

Slide 13 text

twitter.com/mgechev

Slide 14

Slide 14 text

twitter.com/mgechev

Slide 15

Slide 15 text

twitter.com/mgechev

Slide 16

Slide 16 text

twitter.com/mgechev

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

twitter.com/mgechev lazy-loading

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

twitter.com/mgechev often subjectively

Slide 22

Slide 22 text

twitter.com/mgechev sometimes based on data

Slide 23

Slide 23 text

twitter.com/mgechev - Manual - Error-Prone but always…

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

twitter.com/mgechev How do we pick the priorities of the bundles to pre-fetch?

Slide 26

Slide 26 text

twitter.com/mgechev

Slide 27

Slide 27 text

twitter.com/mgechev Lazy-load everything!

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

twitter.com/mgechev

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

twitter.com/mgechev

Slide 35

Slide 35 text

twitter.com/mgechev

Slide 36

Slide 36 text

twitter.com/mgechev route-based splitting

Slide 37

Slide 37 text

twitter.com/mgechev &

Slide 38

Slide 38 text

twitter.com/mgechev $ npm run build # For Create React App $ serve -s build # For Angular CLI $ serve -s dist

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

twitter.com/mgechev

Slide 41

Slide 41 text

twitter.com/mgechev

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

twitter.com/mgechev

Slide 44

Slide 44 text

twitter.com/mgechev

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

twitter.com/mgechev Introducing data-driven bundling

Slide 47

Slide 47 text

twitter.com/mgechev Introducing data-driven bundling early preview

Slide 48

Slide 48 text

twitter.com/mgechev $ npm run eject # For Create React App $ vim config/webpack.config.prod.js # For Angular CLI $ vim webpack.config.js

Slide 49

Slide 49 text

twitter.com/mgechev const { MLPlugin } = require('@mlx/webpack'); const data = require('./data.json'); "// ""... plugins: [ "// ""... new MLPlugin({ data }) "// ""... ] "// ""...

Slide 50

Slide 50 text

twitter.com/mgechev

Slide 51

Slide 51 text

twitter.com/mgechev How it works…

Slide 52

Slide 52 text

twitter.com/mgechev Tooling

Slide 53

Slide 53 text

twitter.com/mgechev - @mlx/ga - @mlx/parser - @mlx/webpack - @mlx/cluster Packages

Slide 54

Slide 54 text

twitter.com/mgechev @mlx/ga Fetching structured data from Google Analytics

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

twitter.com/mgechev @mlx/parser Gets metadata by statically analyzing our app

Slide 57

Slide 57 text

twitter.com/mgechev @mlx/webpack Set of webpack plugins which automate the build

Slide 58

Slide 58 text

twitter.com/mgechev MLPlugin ClusterChunksPlugin RuntimePrefetchPlugin

Slide 59

Slide 59 text

twitter.com/mgechev ClusterChunksPlugin

Slide 60

Slide 60 text

twitter.com/mgechev /a /a/a /a/b /b /b/a / ClusterChunksPlugin Performs clustering based on: - GA data - Application metadata

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

twitter.com/mgechev RuntimePrefetchPlugin

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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 /

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Slide 73

Slide 73 text

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

twitter.com/mgechev - Personalized bundling - Smarter clustering - Personalize pre-fetching - Reduced chunk over fetching - More robust parsers Future plans

Slide 76

Slide 76 text

twitter.com/mgechev

Slide 77

Slide 77 text

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