0.1.2 • Published 9 years ago
@info.nl/bootload v0.1.2
bootload
Conditional script and style resource loading for the browser.
Installation
$ npm install @info.nl/bootload
Benefits
- conservative cut the mustard feature tests
- expose assets to the preload scanner with declarative syntax
- asynchronous loading, no blocking
- scripts are executed in order of declaration
- beware that the
DOMContentLoaded
event might have already fired at this point
- beware that the
- progressive enhancement
- remember the little guy
- indeed, IE <= 9 doesn't cut the mustard (cf. IE <= 8)
- not YADSL
- specification conforming
API
- the
HEAD
element must have anitemscope
attribute - resources are declared with
LINK
elements that have- a required
itemprop
attribute with one of the following valuesstyle-resource
script-resource
- a required
href
attribute with the resource URL - an optional
media
attribute with a media query- the media query is only evaluated once, when the bootload script is executed; use it with caution and common sense
- an optional
rel
attribute with a resource hint value (but don't shoot yourself in the foot)
- a required
- the bootload script succeeds those
LINK
elements (preferably in theHEAD
element as well and inline)
Usage
Since the bootload script should always be included inline, the module exports the script as a string that can directly be used with a template engine.
var bootload = require('@info.nl/bootload');
Normal style sheets links should be placed after this inline script because the CSSOM blocks script execution: https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/
React example
import bootload from '@info.nl/bootload';
<head itemscope>
[...]
<link itemprop="style-resource" href="beep.css" />
<link itemprop="script-resource" href="beep.js" />
<link itemprop="script-resource" href="boop.js" />
<script
dangerouslySetInnerHTML={{__html: bootload}}
></script>
<link href="mobile-first.js" rel="stylesheet" />
</head>
License
MIT