enhancement/issue 629 cache unchanged assets in development

[thescientist13]

Related Issue

resolves #629 and #553

Summary of Changes

1. Cache importMap from initial walking of all dependencies
2. Set and check ETag and If-None-Match headers respectively as part of dev server request / response middleware. Also setting Cache-Control header too.
3. Created shareable hashString function
4. Upgraded to latest version of es-module-shims dependency
5. Added a mention of this to the How It Works section

Benchmarks - #760 (comment)

TODOs

1. A / B testing against master branch
2. Figure out why Chrome doesn't seem to support this for ESM specifically? Is fine with CSS. maybe need to set a Cache-Control
3. Should only happen during development
4. Have packages share hashString implementation
5. Verify if es-module-shims is causing double renders / script executions?
   • I think default behavior is working fine, so no need to mess with anything IMO

Testing / Demo

So far this works great in Firefox, but testing (as in this feature) can be thought of as a stepping stone to HMR. The value here is in seeing if development is / feels faster with these changes as opposed to not having it.

⚠️ Make sure you don't have Disable Cache set in your dev tools! ⚠️

1. Open a new tab with the network tab open
2. Load the website with the develop command and observe the status of everything should be 200
   
3. Refresh and now the status should change to 304
   
4. Change a file and observe now that there is new content, the status has changed back to 200 and the page should have changed, but everything else stays 304
   
5. Keep refreshing, and the status should go back to 304 for everything
   

Questions

1. Should it be configurable? Or at least documented for awareness?
   • It's always easy enough to just set_Disable Cache_ from the dev tools to bypass, which we can document as well.
2. I notice with live reload, just saving with no changes causes a reload, I wonder if it only looks for a timestamp? Not sure if it's something we can do but it would be great if no change didn't cause a reload, like Skip file write if file content isn't changed postcss/postcss-cli#320 - added to my personal backlog
3. Where should this happen, before or after post-processing in middleware chain? If first, everything after has to do null check on ctx.body. Maybe it's something we could apply to ResourceInterface?
4. Should this exclude:
   • binary files
   • API calls - Yes
   • external HTTP requests - Yes
   • HTML?

[thescientist13]

Not sure if there's a reason to not ever to set the ETag, or what the implications of setting it all the time would be? 🤔

[thescientist13]

not sure if there is something more elegant other than initializing importMap = null, but effectively walking no dependencies should be almost zero cost as it is? Ideally for someone with a handful of dependencies, walking that everytime would be annoying.

Another thought, if we only need to do this once, then in theory we should also be able to include this in the should intercept logic instead?

 async shouldIntercept(url, body, headers) {
    return Promise.resolve(Object.keys(importMap).length === 0 && headers.response['content-type'] === 'text/html');
  }

[thescientist13]

Benchmarking

So did some local testing with Chrome and Firefox on master vs this branch. Results are basically almost a 50% percent improvement for refreshed and live reloads, which is pretty awesome! With E-Tags, unchanged assets stay the same naturally, which you can by their E-Tag staying the same, which adds a really nice level of granularity to loading. 💪

It should be noted Firefox is pretty fast overall, compared to Chrome but everything feels a lot quicker and responsive now overall. ✨ 💯

Master

Firefox

Load: ~1.10 - 1.20s

Refresh: 650-785ms

Live Reload: 650-763ms

Chrome

First Load: ~1.8 - 2s

Manual Refresh: ~800ms - 1s

Live Reload: ~1.9s

---

Current Branch

Firefox

Load: ~800ms

Refresh: ~380ms

Live Reload: ~375-450ms

Chrome

Load: ~1.83s

Refresh: 500-600ms

Live Reload: 450-600ms