Code Splitting Made EASY

David Novicki

Roadmap

• The Old
• The New
• Our strategy

The Old

HTTP/1
1 Bundle
Extra Code

HTTP/1

Multiple roundtrips

• Increased latency for serving     multiple assets

• Favored single large bundles over many small

Large App Bundles

Shipping entire application in one large payload.

• Exponential latency over long            distance

• Long loading times

• Even longer scripting times

Extra Code

Delivering code we may not need

• Bulky

• Do something never is faster than   doing it once.

The New(ish)

HTTP/2
Code Split
Lazy Load

HTTP/2

Sending assets down in parallel

• Optimized for limited to no   roundtrips

• Only works well if you leverage it

Code Splitting

Splitting your application up in chunks to allow for multiple smaller assets to download

• Helps slim down extra code

• Improves loading

• Improves scripting

• Optimizes for HTTP/2

Lazy loading

Loading assets only when you need them.

• Do something only when you   need too

• Can be hard to track and code for

Our Strategy

• HTTP/2 through Cloudfront
• Dynamic imports
• Each bundle < 300kb gzip
• Preloading
• Prefetching

Goals