Leveraging code-splitting in React apps

Slide 1

Slide 1 text

Code Splitting in React Apps Leveraging @glnnrys

Slide 2

Slide 2 text

Witaj Warszawa!

Slide 3

Slide 3 text

Glenn Reyes @glnnrys

Slide 4

Slide 4 text

Glenn Reyes ! Source: Stefan Steinbauer at unsplash.com @glnnrys

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Code Splitting

Slide 7

Slide 7 text

What is  Code Splitting? ✂

Slide 8

Slide 8 text

– webpack.js.org “Splits your code into various bundles which can then be loaded on demand.”

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

/home

Slide 11

Slide 11 text

/home /proﬁle

Slide 12

Slide 12 text

bundle.js

Slide 13

Slide 13 text

/home /proﬁle

Slide 14

Slide 14 text

/home /proﬁle ✂ snip! ✂ snap!

Slide 15

Slide 15 text

bundle.js home.js proﬁle.js

Slide 16

Slide 16 text

/home /proﬁle

Slide 17

Slide 17 text

/home

Slide 18

Slide 18 text

bundle.js home.js proﬁle.js

Slide 19

Slide 19 text

Why should I care?

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Why should I care?

Slide 25

Slide 25 text

it’s simple

Slide 26

Slide 26 text

How does Code Splitting increase performance?

Slide 27

Slide 27 text

Caching

Slide 28

Slide 28 text

Load code   asynchronously

Slide 29

Slide 29 text

Load code on demand

Slide 30

Slide 30 text

Load code as needed

Slide 31

Slide 31 text

How does it work?

Slide 32

Slide 32 text

glennreyes/code-splitting-example

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

bundle + home

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

bundle + home + proﬁle

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

A Beginner's Guide to Code Splitting Your React App  https://youtu.be/bb6RCrDaxhw?t=5m51s Before

Slide 40

Slide 40 text

Dynamic import import();

Slide 41

Slide 41 text

Function-like syntactic form

Slide 42

Slide 42 text

tc39/proposal-dynamic-import

Slide 43

Slide 43 text

syntax-dynamic-plugin

Slide 44

Slide 44 text

https://webpack.js.org/guides/code-splitting https://survivejs.com/webpack/building/code-splitting

Slide 45

Slide 45 text

Sync vs async imports

Slide 46

Slide 46 text

Synchronous import

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Asynchronous import

Slide 49

Slide 49 text

Async functions and import();

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

How with React?

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

react-loadable https://github.com/thejameskyle/react-loadable

Slide 59

Slide 59 text

sync async

Slide 60

Slide 60 text

Only 3 more lines of code

Slide 61

Slide 61 text

create-react-app https://github.com/facebookincubator/create-react-app

Slide 62

Slide 62 text

What about SSR?

Slide 63

Slide 63 text

Next.js https://github.com/zeit/next.js

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Where to code split?

Slide 66

Slide 66 text

Split app and vendor #1

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Split at route level #2

Slide 70

Slide 70 text

webpack chunk names /home.360c0ce7.chunk.js /proﬁle.8b26492e.chunk.js

Slide 71

Slide 71 text

Split at component level #3

Slide 72

Slide 72 text

Chart.js

Slide 73

Slide 73 text

Predict user intent and prefetch

Slide 74

Slide 74 text

Where to code split ✂ App and vendor ✂ Routes ✂ Components

Slide 75

Slide 75 text

Good reads •Straightforward code splitting with React and Webpack  https://hackernoon.com/straightforward-code-splitting-with-react-and- webpack •ES proposal: import() – dynamically importing ES modules  http://2ality.com/2017/01/import-operator.html •Tree Shaking vs Code Splitting: A Real-World Benchmark  https://medium.com/outreach-engineering/tree-shaking-vs-code-splitting-a- real-world-benchmark-bbbf36245db3 •Progressive Web Apps with React.js: Part 2 — Page Load Performance  https://medium.com/@addyosmani/progressive-web-apps-with-react-js- part-2-page-load-performance-33b932d97cf2 •The PRPL Pattern  https://developers.google.com/web/fundamentals/performance/prpl-pattern/

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Recap ✨ import(); ✨ Load code as needed ✨ Up to 5x faster page load ✨ Split vendor, at route & component ✨ create-react-app & Next.js @glnnrys glennreyes