https://github.com/bennypowers/rollup-plugin-modulepreload
Rollup plugin to add modulepreload links from generated chunks.
https://github.com/bennypowers/rollup-plugin-modulepreload
es-modules hacktoberfest module preload rollup rollup-plugin
Last synced: about 1 year ago
JSON representation
Rollup plugin to add modulepreload links from generated chunks.
- Host: GitHub
- URL: https://github.com/bennypowers/rollup-plugin-modulepreload
- Owner: bennypowers
- License: mit
- Created: 2019-02-05T00:30:30.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-05-28T07:24:21.000Z (about 3 years ago)
- Last Synced: 2025-02-19T12:51:19.439Z (over 1 year ago)
- Topics: es-modules, hacktoberfest, module, preload, rollup, rollup-plugin
- Language: JavaScript
- Homepage:
- Size: 205 KB
- Stars: 17
- Watchers: 3
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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 `` of index.html
```html
```
## 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 Default Predicate is :
```js
const defaultShouldPreload =
({ exports, facadeModuleId, isDynamicEntry }) =>
!!(
// preload dynamically imported chunks
isDynamicEntry ||
// preload generated intermediate chunks
(exports && exports.length && !facadeModuleId)
);
```