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
(like
About.js
) -
Using the Glitch console,
run
webpack --config=path/to/webpack.config.js
to rebuild the scenario you have open. - 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
Top comments (0)