https://github.com/dreambo8563/vite-plugin-bundle-prefetch

A vite plugin for prefetching resources
https://github.com/dreambo8563/vite-plugin-bundle-prefetch

prefetch vite vite-plugin

Last synced: about 2 months ago
JSON representation

A vite plugin for prefetching resources

• Host: GitHub
• URL: https://github.com/dreambo8563/vite-plugin-bundle-prefetch
• Owner: dreambo8563
• Created: 2024-01-16T06:00:03.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-01-16T07:41:23.000Z (8 months ago)
• Last Synced: 2024-07-17T01:56:45.278Z (2 months ago)
• Topics: prefetch, vite, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 43 KB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-vite - vite-plugin-bundle-prefetch - Inject prefetch assets into `index.html`. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-bundle-prefetch - Inject prefetch assets into `index.html`. (Plugins / Framework-agnostic Plugins)

README

        
# 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 `` in `head`

## Usage

- `npm i vite-plugin-bundle-prefetch -D`

- import in your vite.config.ts

```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

```ts

export default {

  plugins: [

    prefetchPlugin({

      excludeFn: (assetName) => {

        return assetName.includes('ApproveRecords');

      },

    }),

  ],

};

```