{"id":19071914,"url":"https://github.com/cyansalt/vite-plugin-prefetch-chunk","last_synced_at":"2026-02-28T05:22:04.553Z","repository":{"id":202589585,"uuid":"707567894","full_name":"CyanSalt/vite-plugin-prefetch-chunk","owner":"CyanSalt","description":"Vite plugin for adding prefetch resource hints in HTML","archived":false,"fork":false,"pushed_at":"2024-05-22T06:02:51.000Z","size":488,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T22:16:29.342Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CyanSalt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-20T07:27:04.000Z","updated_at":"2025-02-24T21:21:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"186ac382-8b18-4703-ab95-1f0765073ead","html_url":"https://github.com/CyanSalt/vite-plugin-prefetch-chunk","commit_stats":null,"previous_names":["cyansalt/vite-plugin-prefetch-chunk"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyanSalt%2Fvite-plugin-prefetch-chunk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyanSalt%2Fvite-plugin-prefetch-chunk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyanSalt%2Fvite-plugin-prefetch-chunk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyanSalt%2Fvite-plugin-prefetch-chunk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CyanSalt","download_url":"https://codeload.github.com/CyanSalt/vite-plugin-prefetch-chunk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245036122,"owners_count":20550661,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T01:32:34.200Z","updated_at":"2026-02-28T05:21:59.531Z","avatar_url":"https://github.com/CyanSalt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-prefetch-chunk\n\n[![npm](https://img.shields.io/npm/v/vite-plugin-prefetch-chunk.svg)](https://www.npmjs.com/package/vite-plugin-prefetch-chunk)\n\nVite plugin for adding prefetch resource hints in HTML.\n\n`\u003clink rel=\"prefetch\"\u003e` 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.\n\nIn 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.\n\nPrefetch 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.\n\nPrefetch 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.\n\nAlso see [`vite-plugin-auto-preload`](https://github.com/CyanSalt/vite-plugin-auto-preload) if you want to generate preload or module preload links.\n\n## Installation\n\n```shell\nnpm install --save-dev vite-plugin-prefetch-chunk\n```\n\n## Usage\n\n```js\n// vite.config.js\nimport prefetchChunk from 'vite-plugin-prefetch-chunk'\n\nexport default {\n  plugins: [\n    prefetchChunk(),\n  ],\n}\n```\n\nThere are two ways to prefetch an async module:\n\n### Virtual Module (recommended)\n\nYou can add an additional import statement in the module **that you want to be prefetched**:\n\n```ts\n// my-module.ts\nimport 'virtual:prefetch'\n```\n\nAfter 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.\n\nThis solution obviously does not apply to assets. For files without import/export, another way could be used.\n\n### Resource Query\n\nYou 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):\n\n```ts\nimport(`./my-module?prefetch`)\n```\n\nThis 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.\n\nIt 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:\n\n```ts\nimport 'vite/client';\n\ndeclare module '*?prefetch' {\n   // export type declaration\n   // ...\n}\n```\n\n## Options\n\n### `prefetchLegacyChunks`\n\n- **Type:** `boolean`\n\n   Whether to add prefetch links for legacy chunks.\n\n   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.\n\n   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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyansalt%2Fvite-plugin-prefetch-chunk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyansalt%2Fvite-plugin-prefetch-chunk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyansalt%2Fvite-plugin-prefetch-chunk/lists"}