https://github.com/cszhjh/vite-plugin-magic-preloader
A Vite plugin for preloading and prefetching
https://github.com/cszhjh/vite-plugin-magic-preloader
Last synced: 8 months ago
JSON representation
A Vite plugin for preloading and prefetching
- Host: GitHub
- URL: https://github.com/cszhjh/vite-plugin-magic-preloader
- Owner: cszhjh
- License: mit
- Created: 2024-09-02T07:10:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-14T11:54:33.000Z (about 1 year ago)
- Last Synced: 2024-10-20T21:44:24.646Z (about 1 year ago)
- Language: TypeScript
- Size: 130 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vite - vite-plugin-magic-preloader - Generate `<link rel="prefetch" />` or `<link rel="preload" />` tags through magic comments and inject them into `index.html`. (Plugins / Framework-agnostic Plugins)
- fucking-awesome-vite - vite-plugin-magic-preloader - Generate `<link rel="prefetch" />` or `<link rel="preload" />` tags through magic comments and inject them into `index.html`. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-magic-preloader
**English** | [中文](./README.zh_CN.md)
Rollup/Vite does not provide [Magic Comments](https://webpack.js.org/api/module-methods/#magic-comments) like `/* vitePrefetch: true */` or `/* vitePreload: true */`, but there are scenarios where we need resource preloading.
> [!TIP]
> This only works within `import()` statements.
## Installation
```bash
# yarn
yarn add vite-plugin-magic-preloader -D
# npm
npm install vite-plugin-magic-preloader -D
# pnpm
pnpm add vite-plugin-magic-preloader -D
```
## Usage
- Configure the plugin in vite.config.ts
```ts
import magicPreloader from 'vite-plugin-magic-preloader';
export default defineConfig({
plugins: [magicPreloader()],
});
```
## Options
| Option | Type | Default | Description |
| ----------- | ------------------------------------------ | ------------------------- | --------------------------- |
| include | `string \| RegExp \| ReadonlyArray \| null` | `/\.(js\|ts\|jsx\|tsx)$/` | Files to process |
| exclude | `string \| RegExp \| ReadonlyArray \| null` | `/node_modules/` | Files to exclude |
| crossorigin | `boolean` | `true` | Is it enabled `crossorigin` |
### include
Specifies the dependencies to process. It supports string, regular expression, and array types. By default, only js, ts, jsx, tsx files that are not in node_modules are processed.
Files that are matched will be parsed as JavaScript code. Please ensure that the content of these files can be correctly parsed into an **Abstract Syntax Tree**.
### exclude
Specifies the dependencies to exclude. It supports string, regular expression, and array types.
## Example
```ts
const router = [
{
path: '/',
component: () => import(/* vitePrefetch: true */ './views/Home.vue'),
},
{
path: '/about',
component: () => import(/* vitePreload: true */ './views/About.vue'),
},
];
```
If you need this plugin to work within Vue SFC, make sure that `vite-plugin-magic-preloader` is loaded after the `@vitejs/plugin-vue` plugin.
```ts
import vue from '@vitejs/plugin-vue';
import magicPreloader from 'vite-plugin-magic-preloader';
export default defineConfig({
plugins: [vue(), magicPreloader()],
});
```