@info.nl/bootload NPM

bootload

Conditional script and style resource loading for the browser.

Installation

$ npm install @info.nl/bootload

Benefits

conservative cut the mustard feature tests
- UTSL
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
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 an itemscope attribute
resources are declared with LINK elements that have
- a required itemprop attribute with one of the following values
  - style-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)
the bootload script succeeds those LINK elements (preferably in the HEAD 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

async browser

@infinitebrahmanuniverse/nolb-_inf @everything-registry/sub-chunk-463 @info.nl/pattern-portfolio

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago