DEV Community 👩‍💻👨‍💻

Jeff Posnick
Jeff Posnick

Posted on

Paying Attention while Loading Lazily

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

Top comments (0)

⬇️ The only reason people scroll to the bottom...

 

is because they want to read more. Sign up for an account to bookmark, comment, and react to articles that interest you.