Paying Attention while Loading Lazily
Tags: react, lazyloading, performance, serviceworkers
Published: 2019-06-07 17:53:30

---
title: Paying Attention while Loading Lazily
published: true
description: Avoiding lazy-loading pitfalls, with real-world React examples.
tags: react, lazyloading, performance, serviceworkers
---

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

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

{% youtube 9Ifnvm9nWs8 %}

<h3>How's it work?</h3>
<ol>
  <li>Visit one of the loading scenarios below, and leave the page open.</li>
  <li>
    In the Glitch editor, make a change to a component
    (like <a href="https://glitch.com/edit/#!/pawll?path=common/About.js"><code>About.js</code></a>)
  </li>
  <li>
    Using the <a href="https://glitch.com/help/console/">Glitch console</a>,
    run <code>webpack --config=path/to/webpack.config.js</code> to rebuild the scenario you have open.
  </li>
  <li>You've just "redeployed!" Navigate around the open scenario page see what works (and what doesn't).</li>
</ol>
<p>
  (Updating the web app's JavaScript <a href="https://glitch.com/edit/#!/pawll?path=watch.json">won't trigger</a>
  an <em>automatic</em> rebuild, though updating
  <a href="https://glitch.com/edit/#!/pawll?path=server.js"><code>server.js</code></a> will.)
</p>

<h3>Loading scenarios to try</h3>
<ul>
  <li><a href="https://pawll.glitch.me/1-no-hash-no-lazy/build/">No hashing, no lazy-loading</a></li>
  <li><a href="https://pawll.glitch.me/2-no-hash-lazy/build/">No hashing, with lazy-loading</a></li>
  <li><a href="https://pawll.glitch.me/3-hash-lazy/build/">Hashed asset URLs, with lazy-loading</a></li>
  <li><a href="https://pawll.glitch.me/4-hash-lazy-errorboundary/build/">Hashed asset URLs, with lazy-loading, and error boundaries</a></li>
  <li><a href="https://pawll.glitch.me/5-hash-lazy-errorboundary-sw/build/">Hashed asset URLs, with lazy-loading, error boundaries, and service worker precaching</a></li>
</ul>

<h3>Learn more</h3>
<h4>Loading JavaScript</h4>
<ul>
  <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/">Reduce JavaScript Payloads with Code Splitting</a></li>
  <li><a href="https://reactjs.org/docs/code-splitting.html">React's Code Spltting Docs</a></li>
  <li><a href="https://reactjs.org/docs/error-boundaries.html">React's Error Boundary Docs</a></li>
</ul>
<h4>Service workers</h4>
<ul>
  <li><a href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers: an Introduction</a></li>
  <li><a href="https://developers.google.com/web/tools/workbox/">Workbox</a></li>
  <li><a href="https://developers.google.com/web/tools/workbox/modules/workbox-precaching">Workbox's Precaching</a></li>
  <li><a href="https://github.com/facebook/create-react-app/issues/3613#issuecomment-353467430">The <code>create-react-app</code> discussion that inspired this project</a></li>
</ul>
<h4>HTTP serving</h4>
<ul>
  <li><a href="https://jakearchibald.com/2016/caching-best-practices/">Caching best practices & max-age gotchas</a></li>
  <li><a href="https://blog.pshrmn.com/entry/how-single-page-applications-work/">How Single-Page Applications Work</a></li>
</ul>