Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
PostHTML Plugin Link Preload 
This plugin sets up preload/prefetch tags and headers.
Before:
<html>
<head>
...
</head>
<body>
<div>... component...</div>
<script
data-link-preload="preload"
data-link-preload-type="markup"
src="component.js"
></script>
</body>
</html>After:
<html>
<head>
<link rel="preload" href="component.js" as="script">
...
</head>
<body>
<div>... component...</div>
<script
data-link-preload="preload"
data-link-preload-type="markup"
src="component.js"
></script>
</body>
</html>Install
npm i posthtml posthtml-plugin-link-preload
Usage
const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlPluginLinkPreload = require('posthtml-plugin-link-preload');
posthtml()
.use(posthtmlPluginLinkPreload({}))
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));Options
- attr: the html attribute name to use (optional, default: data-link-preload)
- addHeader: a function that is called with 2 arguments: headerName, headerValue (optional, default: an empty function)
Attribute values
data-link-preload:
preload: enable resource preload (default)prefetch: enable resource prefetch
data-link-preload-type:
header: does not insert any additional tag. It calls the function "addHeader" with the new header. Some CDN and HTTP server converts this into HTTP2 server push, if used with preload (default)header-nopush: like 'header' but it adds 'nopush' to the headersmarkup: adds additional tag at the top of the head tag
Where to use it
These features can be use on these tags with either srv or href tag:
- script
- link with rel stylesheet
- audio
- video
- track
- img
- iframe
- embed
- object
Adding headers
Here is an example using Expressjs:
app.get('/', async (req, res) => {
const html = `
<html>
<head></head>
<body>
<div>... component...</div>
<script
data-link-preload="preload"
data-link-preload-type="header"
src="component.js"
></script>
</body>
</html>`
const addHeader = (name, content) => {
// name: link
// content: '<component.js>; rel=preload; as=script
res.set(name, content)
}
const result = await posthtml()
.use(posthtmlPluginLinkPreload({ addHeader }))
.process(html)
res.send(result.html)
})