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?
- Visit one of the loading scenarios below, and leave the page open.
In the Glitch editor, make a change to a component
Using the Glitch console,
webpack --config=path/to/webpack.config.jsto rebuild the scenario you have open.
- You've just "redeployed!" Navigate around the open scenario page see what works (and what doesn't).
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
- React's Code Spltting Docs
- React's Error Boundary Docs
- Service Workers: an Introduction
- Workbox's Precaching
create-react-appdiscussion that inspired this project