sveltejs / sapper

The next small thing in web development, powered by Svelte
https://sapper.svelte.dev
MIT License
6.99k stars 433 forks source link

Sapper loading resources repeatedly #1650

Open sergmister opened 3 years ago

sergmister commented 3 years ago

Describe the bug Running the default Sapper example app ass explained here in "production mode" produces seemingly strange behavior. When I open the network tab in chrome dev tools with the cache enabled in the blog section whenever I hover over a link it will fetch that page, regardless of whether that page has already been fetched. This will cause the browser to load multiple duplicates of the same resourse as seen here.

Screenshot_20201125_223754

Also, if the cache is disable whenever I navigate to the home page it will fetch the image repeatly and twice each time quickly accumulating bandwidth and memory usage.

Screenshot_20201125_224025

To Reproduce Simply load the example Sapper project in production mode and view resources under Network tab with chrome dev tools as you hover your mouse back and fourth over the blog links causing prefetches. Turn off cache and go back and forth to the home page to see the image resource multiply.

regnaio commented 3 years ago

In service-worker.ts, does replacing the function fetchAndCache with this resolve the issue?

async function fetchAndCache(request: Request) {
  const cache = await caches.open(`offline${timestamp}`);

  try {
    let response = await cache.match(request);
    if (response) return response;

    response = await fetch(request);
    cache.put(request, response.clone());
    return response;
  } catch (err) {
    const response = await cache.match(request);
    if (response) return response;

    throw err;
  }
}
sergmister commented 3 years ago

Before: Screenshot_20201129_122305 After: Screenshot_20201129_122156

So it is helping but not completely mitigating the issue. Something is still being fetched with the initiator client...

regnaio commented 3 years ago

Ah yes, I'm also seeing that prefetches are showing duplicate fetches in the Chrome Network tab

mquandalle commented 3 years ago

I'm also experiencing this issue, did you find any fix?