DEV Community

loading...

Paying Attention while Loading Lazily

jeffposnick profile image Jeff Posnick ・2 min read

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

Learn more

Loading JavaScript

Service workers

HTTP serving

Discussion (0)

Forem Open with the Forem app