{"id":24909884,"url":"https://github.com/ruimve/resource-hint-webpack-plugin","last_synced_at":"2025-04-06T04:12:14.056Z","repository":{"id":65380370,"uuid":"589509719","full_name":"Ruimve/resource-hint-webpack-plugin","owner":"Ruimve","description":"✨ 快速配置 Resource Hints 的 Webpack 插件，实现资源预加载，利用空闲时间对可能访问的服务器进行 DNS 解析和提前建立 👋 连接。","archived":false,"fork":false,"pushed_at":"2023-03-12T03:23:10.000Z","size":376,"stargazers_count":314,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T04:12:09.201Z","etag":null,"topics":["plugin","webpack","webpack-plugin"],"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/Ruimve.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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-01-16T09:40:13.000Z","updated_at":"2025-01-03T21:49:36.000Z","dependencies_parsed_at":"2025-01-26T02:32:27.502Z","dependency_job_id":"5e960180-f2b5-45de-b467-30260d87f849","html_url":"https://github.com/Ruimve/resource-hint-webpack-plugin","commit_stats":null,"previous_names":["robot12580/script-load-webpack-plugin"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruimve%2Fresource-hint-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruimve%2Fresource-hint-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruimve%2Fresource-hint-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ruimve%2Fresource-hint-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ruimve","download_url":"https://codeload.github.com/Ruimve/resource-hint-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430873,"owners_count":20937874,"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":["plugin","webpack","webpack-plugin"],"created_at":"2025-02-02T03:15:37.922Z","updated_at":"2025-04-06T04:12:13.745Z","avatar_url":"https://github.com/Ruimve.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eresource-hint-webpack-plugin\u003c/h1\u003e\n\n  \u003ca href=\"https://github.com/Ruimve\"\u003e\n    \u003cimg\n      width=\"80\"\n      alt=\"Ruimve\"\n      src=\"https://github.com/Ruimve/materials/blob/main/images/prefetch.png?raw=true\"\n    /\u003e\n  \u003c/a\u003e\n\n  \u003cp\u003e快速配置 Resource Hints 的 Webpack 插件\u003c/p\u003e\n\u003c/div\u003e\n\u003chr /\u003e\n\n[![Build Status][build-badge]][build]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmtrends]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-badge]][prs]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n\n## 简介\n\n`resource-hint-webpack-plugin` 集成了 [Resource Hints][resource-hints] 的能力，能够在打包时自动添加 `link` 标签到 `html` 中。\n\n基于 [@vuejs/preload-webpack-plugin][v-pwp]，强化了配置功能 `options`，并且新增支持 `dns-prefetch / prerender / preconnect` 的能力。\n\n```html\n\u003clink href=\"src_async_js.f23b5bce.js\" rel=\"preload\" as=\"script\"\u003e\n\u003clink href=\"https://example.com/fonts/font.woff\" rel=\"preload\" as=\"font\" crossorigin\u003e\n\u003clink href=\"src_async_js.f23b5bce.js\" rel=\"prefetch\"\u003e\n\u003clink href=\"//fonts.googleapis.com\" rel=\"dns-prefetch\"\u003e\n\u003clink href=\"https://www.keycdn.com\" rel=\"prerender\" \u003e\n\u003clink href=\"https://cdn.domain.com\" rel=\"preconnect\" crossorigin\u003e\n```\n\n## 内容列表\n\n- [预检查](#预检查)\n- [安装](#安装)\n- [配置项](#配置项)\n- [Hints](#hints)\n  - [preload](#preload)\n  - [prefetch](#prefetch)\n  - [dns-prefetch](#dns-prefetch) (新)\n  - [prerender](#prerender) (新)\n  - [preconnect](#preconnect) (新)\n- [进阶用法](#进阶用法)\n  - [指定 chunk 和 entry](#指定-chunk-和-entry)\n  - [指定 htmls](#指定-htmls)\n  - [批量添加](#批量添加)\n\n## 预检查\n\n确保 webpack 的版本在 5 以上，并且正在使用 [html-webpack-plugin][hwp]。\n\n```ts\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { ResourceHintWebpackPlugin } = require('resource-hint-webpack-plugin');\n\nmodule.exports = {\n  /* ... */\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './public/index.html',\n      filename: 'index.html',\n      chunks: ['index'],\n      inject: 'body'\n    }),\n    new ResourceHintWebpackPlugin([{\n      rel: 'preload',\n      include: {\n        type: 'asyncChunks',\n      }\n    }])\n  ]\n  /* ... */\n}\n```\n\n## 安装\n\n通过 [npm][npm] 安装，并将其添加到开发时依赖中 `devDependencies`:\n```\nnpm install resource-hint-webpack-plugin --save-dev\n```\n或者\n\n通过 [yarn][yarn] 安装:\n```\nyarn add resource-hint-webpack-plugin --dev\n```\n\n## 配置项\n\n配置项改造成了一个数组，支持传入多个 `options`，下面是单个的配置项:\n\n|字段名|类型|默认值|描述|\n|:---:|:-:|:---:|:--|\n|**`rel`**|`{String}`|`-`|脚本的预加载模式|\n|**`include`**|`{{IncludeOption}}`|`-`|指定需要预加载的脚本|\n\n## Hints\n\n### preload\n\n`preload` 允许预加载在 CSS 和 JavaScript 中定义的资源，并允许决定何时应用每个资源，需要配合 [webpack 懒加载][webpack-lazy]。\n\n```ts\nnew ResourceHintWebpackPlugin([{\n  rel: 'preload',\n  include: {\n    type: 'asyncChunks',\n  }\n}])\n```\n\n### prefetch\n\n`prefetch` 是一个低优先级的资源提示，允许浏览器在后台（空闲时）获取将来可能用得到的资源，并且将他们存储在浏览器的缓存中。\n\n```ts\nnew ResourceHintWebpackPlugin([{\n  rel: 'prefetch',\n  include: {\n    type: 'asyncChunks'\n  }\n}])\n```\n\n## dns-prefetch\n\n`dns-prefetch` 允许浏览器在用户浏览页面时在后台运行 `DNS` 的解析。\n\n```ts\nnew ResourceHintWebpackPlugin([{\n  rel: 'dns-prefetch',\n  include: {\n    hosts: ['//fonts.googleapis.com']\n  }\n}])\n```\n\n## prerender\n\n`prerender` 优化了可能导航到的下一页上的资源的加载，在后台渲染了整个页面和整个页面所有的资源。\n\n\u003e 要小心的使用 prerender，因为它将会加载很多资源并且可能造成带宽的浪费，尤其是在移动设备上，并且可能会造成一些[副作用][side-effect]。\n\n```ts\nnew ResourceHintWebpackPlugin([{\n  rel: 'prerender',\n  include: {\n    hosts: ['https://www.keycdn.com']\n  }\n}])\n```\n\n## preconnect\n\n`preconnect` 允许浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 `DNS` 解析，`TLS` 协商，`TCP` 握手，这消除了往返延迟并为用户节省了时间。\n\n```ts\nnew ResourceHintWebpackPlugin([{\n  rel: 'preconnect',\n  include: {\n    hosts: ['https://cdn.domain.com']\n  }\n}])\n```\n\n## 进阶用法\n\n### 指定 chunk 和 entry\n\n在使用 `prefetch` 和 `preload` 时，可以指定 `chunks` 或者 `entries` 的值来确定需要生成 `link` 的页面。\n\n```ts\nmodule.exports = {\n  output: {\n    filename: '[name].[contenthash:8].js',\n    path: path.resolve(__dirname, 'dist')\n  }\n  plugins: [\n    //...\n    new ResourceHintWebpackPlugin([{\n      rel: 'preload', // 或者 prefetch\n      include: {\n        chunks: ['index']\n      }\n    }])\n  ]\n}\n```\n\n```ts\nmodule.exports = {\n  entry: {\n    index: './src/index.js',\n    index2: './src/index2.js'\n  },\n  plugins: [\n    //...\n    new ResourceHintWebpackPlugin([{\n      rel: 'preload', // 或者 prefetch\n      include: {\n        entries: ['index2']\n      }\n    }])\n  ]\n}\n```\n\n### 指定 htmls\n\n所有的 `hints` 支持指定 `htmls`。\n\n```ts\nnew ResourceHintWebpackPlugin([{\n  rel: 'dns-prefetch', // prerender, preconnect, preload, prefetch\n  include: {\n    htmls: ['index.html']\n  }\n}])\n```\n\n### 批量添加\n\n本插件增强了 `options` 的能力，能够同时插入不同的 `hints`。\n\n```ts\nnew ResourceHintWebpackPlugin(\n  [\n    {\n      rel: 'preload',\n      include: {\n        type: 'asyncChunks'\n      }\n    },\n    {\n      rel: 'dns-prefetch',\n      include: {\n        hosts: ['//fonts.googleapis.com']\n      }\n    },\n    {\n      rel: 'prerender',\n      include: {\n        hosts: ['https://www.keycdn.com']\n      }\n    },\n    {\n      rel: 'preconnect',\n      include: {\n        hosts: ['https://cdn.domain.com']\n      }\n    }\n  ]\n)\n```\n\n\n\n[npm]: https://www.npmjs.com/\n[yarn]: https://classic.yarnpkg.com\n[node]: https://nodejs.org\n[build-badge]:https://img.shields.io/github/workflow/status/resource-hint-webpack-plugin/validate?logo=github\u0026style=flat-square\n[build]: https://github.com/Ruimve/resource-hint-webpack-plugin/actions/workflows/ci.yml/badge.svg\n[version-badge]: https://img.shields.io/npm/v/resource-hint-webpack-plugin.svg?style=flat-square\n[package]: https://www.npmjs.com/package/resource-hint-webpack-plugin\n[downloads-badge]: https://img.shields.io/npm/dm/resource-hint-webpack-plugin.svg?style=flat-square\n[npmtrends]: http://www.npmtrends.com/resource-hint-webpack-plugin\n[license-badge]: https://img.shields.io/npm/l/resource-hint-webpack-plugin.svg?style=flat-square\n[license]: https://github.com/Ruimve/resource-hint-webpack-plugin/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[github-watch-badge]: https://img.shields.io/github/watchers/Ruimve/resource-hint-webpack-plugin.svg?style=social\n[github-watch]: https://github.com/Ruimve/resource-hint-webpack-plugin/watchers\n[github-star-badge]: https://img.shields.io/github/stars/Ruimve/resource-hint-webpack-plugin.svg?style=social\n[github-star]: https://github.com/Ruimve/resource-hint-webpack-plugin/stargazers\n\n[resource-hints]:https://www.keycdn.com/blog/resource-hints\n[v-pwp]:https://github.com/vuejs/preload-webpack-plugin\n[hwp]:https://github.com/ampedandwired/html-webpack-plugin\n[webpack-lazy]:https://www.webpackjs.com/guides/lazy-loading/\n[side-effect]:https://en.wikipedia.org/wiki/Link_prefetching#Issues_and_criticisms","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruimve%2Fresource-hint-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruimve%2Fresource-hint-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruimve%2Fresource-hint-webpack-plugin/lists"}