fetch-inject
Advanced tools
Dynamically inline assets into the DOM with support for asynchronous dependency management.
Improve website performance and UX by fetching external assets and inlining them into the DOM programmatically. Get a Promise in return.
Read about why I created this on Hack Cabin.
Fetch Inject is available for testing purposes via jsDelivr, and for production via NPM and Bower.
Add the following to your document head and see the Use Cases to get a feel for what it can do:
<script src="https://cdn.jsdelivr.net/fetch-inject/latest/fetch-inject.min.js"></script>
Grab the library from NPM with npm i fetch-inject or Bower with bower install fetch-inject. Recommended placement shown here:
<head>
<meta charset="utf-8">
<script async defer "/js/async/script.js"></script>
<script>
// contents of fetch-inject.min.js
</script>
</head>
fetchInject with an array of URLs.Promise.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}`)
})
Problem: PageSpeed Insights dings you for loading unnecessary styles on initial render.
Solution: Inline your critical path CSS and load non-critical styles asynchronously:
<style>
*{box-sizing:border-box;text-rendering:geometricPrecision} /* ... */
</style>
<script>
// contents of fetch-inject.min.js
fetchInject([
'/css/non-critical.css',
'https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css'
])
</script>
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',
'bower_components/foundation-sites/dist/js/foundation.js'
])
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
}
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()}`)
})
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/normalize/5.0.0/normalize.css',
'//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js',
])
Problem: You have several scripts that depend on one another and you want to load them all asynchronously without causing race conditions.
Solution: Call multiple times, forming a promise chain:
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',
'https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'
]).then(() => {
fetchInject([
'https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js'
])
})
Problem: You want to use library composed of several resources and initialize it as soon as possible.
Solution:
This is precisely why fetchInject was created:
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()
})
script and style elements.script or style in the head of your document already, depending on which you're injecting.url(default-skin.png)) may need to be updated.All browsers with support for Fetch and Promises.
git clone https://github.com/jhabdas/fetch-inject.npm i (brew install node first on macOS).npm run for a listing of available commands.Note: Build variants possible for various module types via the format setting in rollup.config.js. I intend to switch to ES6 modules as soon as reasonable browser support is realized.
Please use Issues sparingly. I favor action over words. Send in a Pull Request if you feel strongly something needs to be changed. Otherwise, please create a fork and mind the licensing terms.
MIT License 2017 © Josh Habdas
FAQs
Dynamically inline assets into the DOM using Fetch Injection.
The npm package fetch-inject receives a total of 418 weekly downloads. As such, fetch-inject popularity was classified as not popular.
We found that fetch-inject demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.