Paying Attention while Loading Lazily

pawll.glitch.me

@JeffPosnick // Google's Web DevRel Team // Edit the Code

What's all this?

This is an interactive project that explores what happens when loading best practices (hashed asset URLs, lazy-loading, service workers) meets single page app usage patterns (long-lived tabs, "fake" navigations via the History API) meets common deployment scenarios (redeployments that don't preserve old URLs).

If you're feeling particularly meta, you can watch a video walkthrough of this material:

How's it work?

1. Visit one of the loading scenarios below, and leave the page open.
2. In the Glitch editor, make a change to a component (like About.js)
3. Using the Glitch console, run webpack --config=path/to/webpack.config.js to rebuild the scenario you have open.
4. You've just "redeployed!" Navigate around the open scenario page see what works (and what doesn't).

(Updating the web app's JavaScript won't trigger an automatic rebuild, though updating server.js will.)

Loading scenarios to try

• No hashing, no lazy-loading
• No hashing, with lazy-loading
• Hashed asset URLs, with lazy-loading
• Hashed asset URLs, with lazy-loading, and error boundaries
• Hashed asset URLs, with lazy-loading, error boundaries, and service worker precaching

Learn more

Loading JavaScript

• Reduce JavaScript Payloads with Code Splitting
• React's Code Spltting Docs
• React's Error Boundary Docs

Service workers

• Service Workers: an Introduction
• Workbox
• Workbox's Precaching
• The create-react-app discussion that inspired this project

HTTP serving

• Caching best practices & max-age gotchas
• How Single-Page Applications Work