/vite-plugin-bundle-prefetch

A vite plugin for prefetching resources

Primary LanguageTypeScript

Vite-plugin-bundle-prefetch

Why

there is no official rollup/vite plugin to work as the webpack prefetch plugin, we just have preload in vite, but we really need the prefetch for some Scenario.

How

some steps taken by vite-plugin-bundle-prefetch

  • get all bundles which will include the assetsDir
  • filter the target files (rm .map file or ignore the legacy build)
  • get the final output html file content
  • append the <link rel="prefetch" href="xxxx"> in head

Usage

  • npm i vite-plugin-bundle-prefetch -D
  • import in your vite.config.ts
// vite.config.js
import prefetchPlugin from 'vite-plugin-bundle-prefetch';

export default {
  plugins: [prefetchPlugin()],
};

Options

excludeFn

  • Type:Function(assetName:string)=>boolean
  • Default: undefined
  • Desc: provide the customized method to exclude the files which will be added in index.html
export default {
  plugins: [
    prefetchPlugin({
      excludeFn: (assetName) => {
        return assetName.includes('ApproveRecords');
      },
    }),
  ],
};