(core) Prefetch/preload SFC componentUrl


Framework7 popped up on my radar a few years ago. It was an impressive project then and seems to have only gotten better in the past couple of years. Bravo!

I just cloned the repo and started to tinker with the core lib. The ability to lazy-load SFCs without any bundler/transpiler is WAY cool!

One concern that came to mind, should I use F7 core with SFCs (mainly for the componentization, not async loading), is how that might impact offline usage.

My first thought is to use prefetch/preload links: preload for components needed for immediate render, and prefetch for components needed on an adjacent page.

<link rel="prefetch" href="/components/MyComponent.[html|js]">

From Preload, Prefetch And Priorities in Chrome | by Addy Osmani | reloading | Medium

preload is a declarative fetch, allowing you to force the browser to make a request for a resource without blocking the document’s onload event.

Prefetch is a hint to the browser that a resource might be needed, but delegates deciding whether and when loading it is a good idea or not to the browser.

I’m going to be digging into this more but wanted to get some feedback from the community.

Has anyone used F7 SFCs in this manner? Did I overlook something?

Thank you!

If you do a web app, look at service-workers (PWA) which should problems of offline access. Also Framework7 CLI can create PWA boilerplate

1 Like

D’oh — so that’s what service workers are for! :man_facepalming:

Thank you for your gracious reply.