Skip to content

bennypowers/rollup-plugin-modulepreload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rollup-plugin-modulepreload

Rollup plugin to add modulepreload links from generated chunks. Users may customize which chunks are preloaded using the shouldPreload option.

Usage

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

<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 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 object.

It can be synchronous:

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:

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 :

const defaultShouldPreload =
  ({ exports, facadeModuleId, isDynamicEntry }) =>
    !!(
      // preload dynamically imported chunks
      isDynamicEntry ||
      // preload generated intermediate chunks
      (exports && exports.length && !facadeModuleId)
    );