{"id":13605886,"url":"https://github.com/Applelo/unplugin-inject-preload","last_synced_at":"2025-04-12T05:35:02.303Z","repository":{"id":191035624,"uuid":"612719610","full_name":"Applelo/unplugin-inject-preload","owner":"Applelo","description":"A plugin for injecting \u003clink rel='preload'\u003e for ViteJS, HTMLWebpackPlugin and HTMLRspackPlugin","archived":false,"fork":false,"pushed_at":"2024-12-15T21:19:18.000Z","size":560,"stargazers_count":34,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-07T06:07:31.229Z","etag":null,"topics":["html-webpack-plugin","inject","preload","rspack","vite-plugin","vitejs","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Applelo.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-03-11T19:20:35.000Z","updated_at":"2025-02-24T07:29:18.000Z","dependencies_parsed_at":"2024-01-07T18:05:04.801Z","dependency_job_id":"d9755eee-4307-4d05-b0f0-239a30d041d1","html_url":"https://github.com/Applelo/unplugin-inject-preload","commit_stats":{"total_commits":89,"total_committers":2,"mean_commits":44.5,"dds":"0.011235955056179803","last_synced_commit":"2458c27460a2b119c0804f7af532c68834b7b011"},"previous_names":["applelo/unplugin-inject-preload"],"tags_count":10,"template":false,"template_full_name":"unplugin/unplugin-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Applelo%2Funplugin-inject-preload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Applelo%2Funplugin-inject-preload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Applelo%2Funplugin-inject-preload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Applelo%2Funplugin-inject-preload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Applelo","download_url":"https://codeload.github.com/Applelo/unplugin-inject-preload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248524650,"owners_count":21118612,"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":["html-webpack-plugin","inject","preload","rspack","vite-plugin","vitejs","webpack"],"created_at":"2024-08-01T19:01:03.923Z","updated_at":"2025-04-12T05:35:01.990Z","avatar_url":"https://github.com/Applelo.png","language":"TypeScript","readme":"# unplugin-inject-preload\n\n[![NPM Version](https://img.shields.io/npm/v/unplugin-inject-preload)](https://www.npmjs.com/package/unplugin-inject-preload) [![jsr](https://img.shields.io/endpoint?url=https%3A%2F%2Fjsr-api.sxzz.moe%2Fbadge%2F%40applelo%2Funplugin-inject-preload)](https://jsr.io/@applelo/unplugin-inject-preload) [![node-current](https://img.shields.io/node/v/unplugin-inject-preload)](https://nodejs.org/) [![Coverage Status](https://coveralls.io/repos/github/Applelo/unplugin-inject-preload/badge.svg?branch=main)](https://coveralls.io/github/Applelo/unplugin-inject-preload?branch=main)\n\nThis plugin adds preload links by getting output assets from the build tools you are using.\n\nSupporting:\n- Vite 4 and 5 **(on build only)**\n- Webpack 5 (with [HtmlWebpackPlugin 5](https://github.com/jantimon/html-webpack-plugin))\n- Rspack 1.0 (with [HtmlWebpackPlugin 5](https://github.com/jantimon/html-webpack-plugin) or [HtmlRspackPlugin](https://www.rspack.dev/config/plugins.html#htmlrspackplugin))\n\n\u003e [!NOTE]\n\u003e This plugin combines [vite-plugin-inject-preload](https://github.com/Applelo/vite-plugin-inject-preload) and [html-webpack-inject-preload](https://github.com/principalstudio/html-webpack-inject-preload) into one package.\n\u003e\n\u003e See the [migration guide](#migration) for `vite-plugin-inject-preload` and `html-webpack-inject-preload` .\n\n## Install\n\n```bash\n#npm\nnpm i -D unplugin-inject-preload\n#yarn\nyarn add -D unplugin-inject-preload\n#pnpm\npnpm i -D unplugin-inject-preload\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport UnpluginInjectPreload from 'unplugin-inject-preload/vite'\n\nexport default defineConfig({\n  plugins: [\n    UnpluginInjectPreload({ /* options */ }),\n  ],\n})\n```\n\nExample: [`playground/vitejs`](./playground/vitejs)\n\n\u003e The Vite plugin [only works on build](https://github.com/Applelo/vite-plugin-inject-preload/issues/15) because of the way Vite behave.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack (with HtmlWebpackPlugin)\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\nconst UnpluginInjectPreload = require('unplugin-inject-preload/webpack')\n\nmodule.exports = {\n  plugins: [\n    HtmlWebpackPlugin({ /*  HtmlWebpackPlugin options */ }),\n    UnpluginInjectPreload({ /* options */ }),\n  ]\n}\n```\n\nExample: [`playground/webpack`](./playground/webpack)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRspack (with HtmlWebpackPlugin)\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rspack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\nconst UnpluginInjectPreload = require('unplugin-inject-preload/rspack')\n\nmodule.exports = {\n  plugins: [\n    HtmlWebpackPlugin({ /*  HtmlWebpackPlugin options */ }),\n    UnpluginInjectPreload({ /* options */ }),\n  ]\n}\n```\n\nExample: [`playground/rspack`](./playground/rspack)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRspack (with HtmlRspackPlugin)\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rspack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\nconst UnpluginInjectPreload = require('unplugin-inject-preload/rspack')\n\nmodule.exports = {\n  plugins: [\n    new rspack.HtmlRspackPlugin({ /* HtmlRspackPlugin options */ }),\n    UnpluginInjectPreload({ /* options */ }),\n  ]\n}\n```\n\nExample: [`playground/rspack`](./playground/rspack)\n\n\u003cbr\u003e\u003c/details\u003e\n\n## 👨‍💻 Usage\n\n\u003e All example are presented for ViteJS but this is the same behavior for Webpack and RsPack\n\nAll the files needs to be process by the bundler to be find by the plugin. For example, if I load this CSS file :\n\n```css\n@font-face {\n  font-family: 'Roboto';\n  src: url('./../fonts/Roboto-Italic.woff2');\n  font-weight: 400;\n  font-style: italic;\n}\n\n@font-face {\n  font-family: 'Roboto';\n  src: url('./../fonts/Roboto-Regular.woff2');\n  font-weight: 400;\n  font-style: normal;\n}\n```\n\nI can make the following configuration for UnpluginInjectPreload :\n\n```js\n// vite.config.js / vite.config.ts\nimport UnpluginInjectPreload from 'unplugin-inject-preload/vite'\n\nexport default {\n  plugins: [\n    UnpluginInjectPreload({\n      files: [\n        {\n          entryMatch: /Roboto-[a-zA-Z]*\\.woff2$/,\n        },\n        {\n          outputMatch: /lazy.[a-z-0-9]*.(css|js)$/,\n        }\n      ]\n    })\n  ]\n}\n```\n\n### Options\n\n* files: An array of files object\n  * entryMatch: A regular expression to target entry files you want to preload\n  * outputMatch: A regular expression to target output build files you want to preload\n  \u003e You need to set at least `entryMatch` or/and `outputMatch`. Be aware that entry file is not always present for webpack and `entryMatch` will do nothing.\n\n  * attributes (optional):\n  If this option is ommited, it will determine the `mime` and the `as` attributes automatically.\n  You can also add/override any attributes you want.\n* injectTo (optional): By default, the preload links are injected with the `'head-prepend'` options. But you can pass `'head'` to inject preload links at bottom of the head tag if you need it.\u003cbr\u003e You can pass the `'custom'` option and put `\u003c!--__unplugin-inject-preload__--\u003e` in your `.html` file where you want to inject the preload links.\n\nWith the full options usage, you can do something like this :\n\n```js\n// vite.config.js / vite.config.ts\nimport UnpluginInjectPreload from 'unplugin-inject-preload/vite'\n\nexport default {\n  plugins: [\n    UnpluginInjectPreload({\n      files: [\n        {\n          entryMatch: /Roboto-[a-zA-Z]*\\.woff2$/,\n          outputMatch: /Roboto-[a-zA-Z]*-[a-z-0-9]*\\.woff2$/,\n          attributes: {\n            'type': 'font/woff2',\n            'as': 'font',\n            'crossorigin': 'anonymous',\n            'data-font': 'Roboto'\n          }\n        },\n        {\n          outputMatch: /lazy.[a-z-0-9]*.(js)$/,\n          attributes: {\n            rel: 'modulepreload',\n            type: undefined,\n          }\n        }\n      ],\n      injectTo: 'head-prepend'\n    })\n  ]\n}\n```\n\n## Migration\n\n### From vite-plugin-inject-preload\n\n`package.json`\n\n```diff\n{\n  \"devDependencies\": {\n-   \"vite-plugin-inject-preload\": \"*\",\n+   \"unplugin-inject-preload\": \"^3.0.0\",\n  }\n}\n```\n\n`vite.config.js`\n\n```diff\n- import VitePluginInjectPreload from 'vite-plugin-inject-preload'\n+ import UnpluginInjectPreload from 'unplugin-inject-preload/vite'\n\nexport default {\n  plugins: [\n-   VitePluginInjectPreload({\n+   UnpluginInjectPreload({\n      files: [\n        {\n-         match: /Roboto-[a-zA-Z]*-[a-z-0-9]*\\.woff2$/,\n+         outputMatch: /Roboto-[a-zA-Z]*-[a-z-0-9]*\\.woff2$/,\n          attributes: {\n            'type': 'font/woff2',\n            'as': 'font',\n            'crossorigin': 'anonymous',\n            'data-font': 'Roboto'\n          }\n        },\n      ],\n      injectTo: 'head-prepend'\n    })\n  ]\n}\n```\n\n### From html-webpack-inject-preload\n\n`package.json`\n\n```diff\n{\n  \"devDependencies\": {\n-   \"@principalstudio/html-webpack-inject-preload\": \"*\",\n+   \"unplugin-inject-preload\": \"^3.0.0\",\n  }\n}\n```\n\n```diff\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n- const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');\n+ const UnpluginInjectPreload = require('unplugin-inject-preload/webpack');\n\nmodule.exports = {\n  entry: 'index.js',\n  output: {\n    path: __dirname + '/dist',\n    filename: 'index_bundle.js'\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n-   new HtmlWebpackInjectPreload({\n+   UnpluginInjectPreload({\n      files: [\n        {\n-         match: /.*\\.woff2$/,\n+         outputMatch: /.*\\.woff2$/,\n          attributes: {\n            as: 'font',\n            type: 'font/woff2', crossorigin: true\n          },\n        },\n      ]\n    })\n  ]\n}\n```\n\n## 👨‍💼 Licence\n\nMIT\n","funding_links":[],"categories":["Plugins","TypeScript"],"sub_categories":["Framework-agnostic Plugins","Unplugin"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FApplelo%2Funplugin-inject-preload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FApplelo%2Funplugin-inject-preload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FApplelo%2Funplugin-inject-preload/lists"}