modulepreload-link-relations

A utility for generating modulepreload link relations based on a JavaScript modules import graph. This will prevent module request waterfalls.

It can be used for HTTP server middleware and generating <link> elements in static HTML.

Supports import maps.

Install

npm i modulepreload-link-relations

Usage

This package exports two functions:

• createResolveLinkRelations
  • Returns a function that returns an array of modules that can be preloaded for a specified module. An in-memory cache persists the resulting module import graph.
• formatLinkHeaderRelations
  • A formatter that can be used to generate link relations for an HTTP Link entity-header.

Example

import createResolveLinkRelations from "modulepreload-link-relations/createResolveLinkRelations.mjs";
import formatLinkHeaderRelations from "modulepreload-link-relations/formatLinkHeaderRelations.mjs";

const resolveLinkRelations = createResolveLinkRelations("./app");
const linkRelations = await resolveLinkRelations(
  // The requested module.
  "/lib/a.js", // (a.js imports b.js, b.js imports c.js, c.js imports d.js)
); // => ['/lib/c.js', '/lib/d.js'] // Direct imports aren't included in the result.

// Optionally format the result:
const formattedLinkRelations = formatLinkHeaderRelations(linkRelations); // => </lib/c.js>; rel="modulepreload", </lib/d.js>; rel="modulepreload"

Middleware

Middleware is available for the following Node.js servers:

• Express - modulepreload-express
• Koa - modulepreload-koa

API

createResolveLinkRelations(path[, options])

• path {string} Path to the application root directory, eg "./app".
• options {Object}
  • importMap {string} Import map string.
  • cache {Object} A custom (map-like) cache.