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 headers
markup: 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)
})

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
lib		lib
test		test
.editorconfig		.editorconfig
.gitignore		.gitignore
.npmignore		.npmignore
.travis.yml		.travis.yml
changelog.md		changelog.md
contributing.md		contributing.md
license		license
package.json		package.json
readme.md		readme.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

PostHTML Plugin Link Preload

Install

Usage

Options

Attribute values

Where to use it

Adding headers

About

Uh oh!

Releases

Packages

Uh oh!

Languages

License

sithmel/posthtml-plugin-link-preload

Folders and files

Latest commit

History

Repository files navigation

PostHTML Plugin Link Preload

Install

Usage

Options

Attribute values

Where to use it

Adding headers

About

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages