https://github.com/cyansalt/vite-plugin-prefetch-chunk
Vite plugin for adding prefetch resource hints in HTML
https://github.com/cyansalt/vite-plugin-prefetch-chunk
Last synced: 5 months ago
JSON representation
Vite plugin for adding prefetch resource hints in HTML
- Host: GitHub
- URL: https://github.com/cyansalt/vite-plugin-prefetch-chunk
- Owner: CyanSalt
- License: isc
- Created: 2023-10-20T07:27:04.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-22T06:02:51.000Z (about 2 years ago)
- Last Synced: 2025-02-28T22:16:29.342Z (over 1 year ago)
- Language: TypeScript
- Size: 477 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-prefetch-chunk
[](https://www.npmjs.com/package/vite-plugin-prefetch-chunk)
Vite plugin for adding prefetch resource hints in HTML.
`` is a type of resource hint that tells the browser to prefetch content that the user may visit in the near future in the browser's idle time, after the page finishes loading.
In most cases, prefetching all asynchronous chunks is not a wise choice, especially when using code splitting with router: this will cause the client to always download resources of all routes, even if those pages will never be visited.
Prefetch links will consume bandwidth, which is often unacceptable if you have a large app with many async chunks and your users are primarily mobile and thus bandwidth-aware. Therefore, this plugin is designed to be used in a way that requires manual declaration on the asynchronous module that you want to be prefetched.
Prefetch links are always generated at the end of head. You can refer to [`vite-plugin-html-sort-tags`](https://github.com/CyanSalt/vite-plugin-html-sort-tags) if you want to optimize the sorting.
Also see [`vite-plugin-auto-preload`](https://github.com/CyanSalt/vite-plugin-auto-preload) if you want to generate preload or module preload links.
## Installation
```shell
npm install --save-dev vite-plugin-prefetch-chunk
```
## Usage
```js
// vite.config.js
import prefetchChunk from 'vite-plugin-prefetch-chunk'
export default {
plugins: [
prefetchChunk(),
],
}
```
There are two ways to prefetch an async module:
### Virtual Module (recommended)
You can add an additional import statement in the module **that you want to be prefetched**:
```ts
// my-module.ts
import 'virtual:prefetch'
```
After doing this, the plugin will generate resource hints for the bundle containing this module **when it is imported asynchronously**. Virtual modules within synchronized blocks will be ignored.
This solution obviously does not apply to assets. For files without import/export, another way could be used.
### Resource Query
You can also add the resource query `?prefetch` when importing a module asynchronously, just like [`?raw` or `?worker`](https://vitejs.dev/guide/assets.html#importing-asset-as-string):
```ts
import(`./my-module?prefetch`)
```
This is somewhat similar to [`/* webpackPrefetch: true */`](https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules). When the query is specified, the plugin will generate resource hints for the bundle containing this module.
It is worth noting that TypeScript cannot resolve resource queries correctly, so **it is recommended to use this way for assets only**. And, in order to support TypeScript, you may also need to add type declarations to your global `.d.ts` similar to the following:
```ts
import 'vite/client';
declare module '*?prefetch' {
// export type declaration
// ...
}
```
## Options
### `prefetchLegacyChunks`
- **Type:** `boolean`
Whether to add prefetch links for legacy chunks.
By default, legacy chunks generated by [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) or [`vite-plugin-legacy-swc`](https://github.com/CyanSalt/vite-plugin-legacy-swc) will not be prefetched. This is to ensure that modern browsers download additional files as less as possible.
If you specify `renderModernChunks: true` for `@vitejs/plugin-legacy` or `vite-plugin-legacy-swc`, it is recommended to enable this option to enable prefetch capabilities.