Fetch Inject
:: JavaScript / ES Module / Playwright / SvelteKit / Node.js
I conceived of a novel technique for managing asynchronous dependencies hacking away at a coffee shop called 9-11 in Bali back in 2017. Fetch Inject is a tiny JavaScript library and Node module making it possible to deep link to full-sized After Dark Image Gallery images without blocking or slowing down page load.
The original implementation was 33 lines of code and I quipped each line took me an hour to write because I worked on the library for three days straight.
What I ended up with was something far more powerful than expected, with all kinds of use cases and a suitable replacement for far more complex libraries – sometimes with hundreds or even thousands of lines of code.
I slipped Fetch Inject into WordPress for a talk I gave once and measured a 200-300% improvement in page load performance. So I wrapped it into a single PHP file and made it a WordPress plug-in.
In 2022 I added support for SvelteKit, allowing server-side fetch-injection. In addition I added TypeScript typings, end-to-end testing with Playwright and fully embraced ES modules by dropping support for the UMD and IIFE bundles of yesteryear.
As of version 3.1.0 the library stands at 462 bytes minzipped, which is why I gave it the cherries emoji on the source repository.
- codeberg.org/vhs/fetch-inject – source
- npmjs.com/fetch-inject – npm package