# rollup-plugin-modulepreload

> Rollup plugin to add modulepreload links from generated chunks.

Latest version **2.0.0** (published 2023-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-modulepreload
pnpm add rollup-plugin-modulepreload
yarn add rollup-plugin-modulepreload
bun add rollup-plugin-modulepreload
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-05-28 |
| First published | 2019-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Benny Powers |
| Maintainers | bennyp |
| Keywords | rollup, code splitting, performance |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-modulepreload
- Repository: https://github.com/bennypowers/rollup-plugin-modulepreload
- Homepage: https://github.com/bennypowers/rollup-plugin-modulepreload#readme
- Issues: https://github.com/bennypowers/rollup-plugin-modulepreload/issues
- npm.io page: https://npm.io/package/rollup-plugin-modulepreload

## Dependencies (4)

- [jsdom](https://npm.io/package/jsdom.md) ^16.4.0
- [crocks](https://npm.io/package/crocks.md) ^0.12.4
- [fs.promises](https://npm.io/package/fs.promises.md) ^0.1.2
- [rollup-pluginutils](https://npm.io/package/rollup-pluginutils.md) ^2.4.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2023-05-28
- 1.2.3 — 2020-11-13
- 1.2.2 — 2019-03-09
- 1.2.1 — 2019-02-24
- 1.2.0 — 2019-02-15
- 1.1.1 — 2019-02-11
- 1.1.0 — 2019-02-05
- 1.0.1 — 2019-02-05
- 1.0.0 — 2019-02-05

## README

# rollup-plugin-modulepreload
Rollup plugin to add [modulepreload links](https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload) from generated chunks. Users may customize which chunks are preloaded using the `shouldPreload` option.

## Usage

```js
import config from './rollup.config.rest.js'
import modulepreload from 'rollup-plugin-modulepreload';

export default {
  plugins: [
    modulepreload({
      prefix: 'modules',
      index: 'public/index.html',
    })
  ]
}
```

This will write something like the following to the `<head>` of index.html
```html
<link rel="modulepreload" href="modules/chunk-47ckl37a.js">
```

## Options

|Name|Accepts|Default|
|-----|-----|-----|
|`index`|Path to index.html to modify.|`undefined`|
|`prefix`|Path to prepend to chunk filenames in link tag `href` attribute.|your bundle's `dir` option|
|`shouldPreload`|Predicate which takes a [`ChunkInfo`](https://rollupjs.org/guide/en#generatebundle)|[Default predicate](#default-predicate)|

### Determining Which Chunks to Preload
You can customize the function which determines whether or not to preload a chunk by passing a `shouldPreload` predicate, which takes a [`ChunkInfo`](https://rollupjs.org/guide/en#generatebundle) object.

It can be synchronous:
```js
function shouldPreload({ code }) {
  return !!code && code.includes('INCLUDE THIS CHUNK');
}

export default {
  input: 'src/index.js',
  plugins: [
    modulepreload({
      index: 'public/index.html',
      prefix: 'modules',
      shouldPreload,
    })
  ]
}
```

or asynchronous:
```js
import { readFile } from 'fs/promises'; // node ^14

async function shouldPreload(chunk) {
  if (!chunk.facadeModuleId)
    return false;

  const file =
    await readFile(chunk.facadeModuleId, 'utf-8');

  return file.includes('INCLUDE THIS CHUNK');
}

export default {
  input: 'src/index.js',
  plugins: [
    modulepreload({
      index: 'public/index.html',
      prefix: 'modules',
      shouldPreload,
    })
  ]
}
```

The <a name="default-predicate">Default Predicate</a> is :
```js
const defaultShouldPreload =
  ({ exports, facadeModuleId, isDynamicEntry }) =>
    !!(
      // preload dynamically imported chunks
      isDynamicEntry ||
      // preload generated intermediate chunks
      (exports && exports.length && !facadeModuleId)
    );
```

---
_Source: https://npm.io/package/rollup-plugin-modulepreload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._