https://github.com/dburles/modulepreload-link-relations

Utility for generating modulepreload link relations based on a JavaScript module import graph.
https://github.com/dburles/modulepreload-link-relations

ecmascript esm link link-rel link-relations middleware modulepreload preload

Last synced: 2 months ago
JSON representation

Utility for generating modulepreload link relations based on a JavaScript module import graph.

• Host: GitHub
• URL: https://github.com/dburles/modulepreload-link-relations
• Owner: dburles
• License: mit
• Created: 2023-10-05T05:04:45.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-31T05:44:01.000Z (6 months ago)
• Last Synced: 2024-11-01T12:06:07.802Z (3 months ago)
• Topics: ecmascript, esm, link, link-rel, link-relations, middleware, modulepreload, preload
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/modulepreload-link-relations
• Size: 26.4 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# modulepreload-link-relations

A utility for generating [modulepreload](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/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 [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) elements in static HTML.

Supports import maps.

## Install

```sh

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) entity-header.

## Example

```js

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); // => ; rel="modulepreload", ; rel="modulepreload"

```

## Middleware

Middleware is available for the following Node.js servers:

- Express - [modulepreload-express](https://github.com/dburles/modulepreload-express)

- Koa - [modulepreload-koa](https://github.com/dburles/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.