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: 8 days 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 (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-16T07:41:23.000Z (over 1 year ago)
- Last Synced: 2025-03-26T07:36:34.430Z (25 days ago)
- Topics: prefetch, vite, vite-plugin
- Language: TypeScript
- Homepage:
- Size: 43 KB
- Stars: 19
- 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');
},
}),
],
};
```