fetch-inject

Fetch Inject

A library used to dynamically inline content into the DOM using Fetch Injection.

Background

Fetch Injection is performance optimization technique for loading resources into the DOM asynchronously using the Fetch API. Use it to inject content into your page (even across the network), on-demand.

Understand why this library exists by reading the intro article on Hack Cabin.

Don't have time to read? Here's a playground:
https://codepen.io/jhabdas/pen/MpVeOE?editors=0012

Installing

Get it on NPM with npm i fetch-inject or Bower with bower install fetch-inject.

Also available via CDN using jsDelivr.

Syntax

Promise<Response> fetchInject(urls, promise)

urls

Required. An Array of resources to fetch. Elements must be one of type USVString or Request.

promise

Optional. A Promise to await before injecting currently fetched resources.

Use Cases

Loading Utility Scripts

Problem: You want to prototype some code using the browser as a REPL.

Solution: Skip the emulators and use the real deal:

fetchInject([
  'https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js'
]).then(() => {
  console.log(`Successfully loaded Lodash ${_.VERSION}`)
})

Loading CSS Asynchronously

Problem: PageSpeed Insights dings you for loading blocking CSS and unnecessary styles on initial render.

Solution: Inline your critical path CSS and load non-critical styles asynchronously:

fetchInject([
  '/css/non-critical.css',
  'https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css'
])

Preventing Script Blocking

Problem: Remote assets can lead to jank or, worse yet, SPOF if not handled correctly.

Solution: Asynchronously load remote scripts without blocking:

fetchInject([
  '/bower_components/jquery/dist/jquery.js',
  '/bower_components/what-input/dist/what-input.js'
])

Loading Scripts Lazily

Problem: You want to load a script in response to a event without optimistically preloading the asset.

Solution: Create an event listener, respond to the event and then destroy the listener.

const el = document.querySelector('details summary')
el.onclick = (evt) => {
  fetchInject([
    'https://cdn.jsdelivr.net/smooth-scroll/10.2.1/smooth-scroll.min.js'
  ])
  el.onclick = null  
}

Responding to Asynchronous Scripts

Problem: You need to perform a synchronous operation immediately after an asynchronous script is loaded.

Solution: You could create a script element and use the async and onload attributes. Or you could...

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

Combining Resource Types

Problem: You need to asynchronously download multiple related assets of different types.

Solution: Specify multiple URLs of different types when calling:

fetchInject([
  'https://cdn.jsdelivr.net/drop/1.4.2/js/drop.min.js',
  'https://cdn.jsdelivr.net/drop/1.4.2/css/drop-theme-arrows-bounce.min.css'
])

Ordering Dependent Scripts

Problem: You have several scripts that depend on one another and you want to load them all asynchronously, in parallel, without causing a race condition.

Solution: Pass fetchInject to itself as a second argument, forming a recursion:

fetchInject([
  'https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js'
], fetchInject([
  'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js',
  'https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js'
])

Loading and Handling Composite Libraries

Problem: You want to use library composed of several resources and initialize it as soon as possible.

Solution: This is precisely the kind of activity fetchInject works best at:

const container = document.querySelector('.pswp')
const items = JSON.parse({{ .Params.gallery.main | jsonify }})
fetchInject([
  '/css/photoswipe.css',
  '/css/default-skin/default-skin.css',
  '/js/photoswipe.min.js',
  '/js/photoswipe-ui-default.min.js'
]).then(() => {
  const gallery = new PhotoSwipe(container, PhotoSwipeUI_Default, items)
  gallery.init()
})

Managing Asynchronous Dependencies

Problem: You want to load some dependencies which require some dependencies, which require a dependency. You want it all in parallel, and you want it now.

Solution: You could scatter some links into your document head, blocking initial page render. You could bloat your application bundle with scripts the user might not actually need half the time. Or you could...

const tether = ['https://cdn.jsdelivr.net/tether/1.4.0/tether.min.js']
const drop = [
  'https://cdn.jsdelivr.net/drop/1.4.2/js/drop.min.js'
]
const tooltip = [
  'https://cdn.jsdelivr.net/tooltip/1.2.0/tooltip.min.js',
  'https://cdn.jsdelivr.net/tooltip/1.2.0/tooltip-theme-arrows.css'
]
fetchInject(tooltip,
  fetchInject(drop,
    fetchInject(tether)
  )
).then(() => {
  new Tooltip({
    target: document.querySelector('h1'),
    content: "You moused over the first <b>H1</b>!",
    classes: 'tooltip-theme-arrows',
    position: 'bottom center'
  })
})

Supported Browsers

All browsers with support for Fetch and Promises.

Fetch will become available in Safari in the Safari 10.1 release that ships with macOS Sierra 10.12.4 and Safari on iOS 10.3. Jon Davis,  Web Technologies Evangelist

Development

1. Clone the repo with git clone https://github.com/jhabdas/fetch-inject.
2. Install dev dependencies with npm i.
3. Execute npm run for a listing of available commands.

Contributing

Please use Issues for bugs and enhancement requests only. Use npm run commit to create Commitizen-friendly commit messages. If you need support, you know where to go. Thanks!

See Also

• fetch - Polyfill for window.fetch
• promise-polyfill - Polyfill for Promises
• es-module-loader - Polyfill for the ES Module Loader
• isomorphic-fetch - A library for using fetch in Node

License

ISC