fetch-inject
Advanced tools
Dynamically inline assets into the DOM using Fetch Injection.
Improve website performance and UX by fetching external assets and inlining them into the DOM programmatically. Get a Promise in return.
Learn about Fetch Injection and why I created this library 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. Suggested placement shown here:
<head>
<meta charset="utf-8">
<script async defer "/js/vendor/script.js"></script>
<script>
(function (window, document, undefined) {
if !(window.fetch) return
// contents of fetch-inject.min.js
// YOUR CODE HERE
})(window, document)
</script>
</head>
To fallback for older browsers document.write and noscript are your friends.
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 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'
])
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'
])
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/drop/1.4.2/js/drop.min.js',
'https://cdn.jsdelivr.net/drop/1.4.2/css/drop-theme-arrows-bounce.min.css'
])
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',
]).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 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()
})
Problem: You want to load some dependencies which requires some dependencies, which requires a dependency.
Solution:
You could scatter some links into your document head, blocking initial page render and bloat your application bundle. Or...
const tether = ['/js/tether.min.js']
const drop = [
'/js/drop.min.js',
'/css/drop-theme-arrows-bounce.min.css'
]
const tooltip = [
'/js/tooltip.min.js',
'/css/tooltip-theme-arrows.css'
]
fetchInject(tether)
.then(() => fetchInject(drop))
.then(() => fetchInject(tooltip))
.then(() => {
new Tooltip({
target: document.querySelector('h1'),
content: "You moused over the first <b>H1</b>!",
classes: 'tooltip-theme-arrows',
position: 'bottom center'
})
})
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
git clone https://github.com/jhabdas/fetch-inject.npm i (brew install node first on macOS).npm run for a listing of available commands.Please use Issues for bugs and enhancement requests only. If you need support, you know where to go. Thanks!
window.fetchfetch in NodeMIT 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.