{"id":15163182,"url":"https://github.com/googlechromelabs/preload-webpack-plugin","last_synced_at":"2025-09-30T17:31:14.299Z","repository":{"id":39998862,"uuid":"80140505","full_name":"GoogleChromeLabs/preload-webpack-plugin","owner":"GoogleChromeLabs","description":"Please use https://github.com/vuejs/preload-webpack-plugin instead.","archived":true,"fork":false,"pushed_at":"2021-01-20T19:08:40.000Z","size":1242,"stargazers_count":2154,"open_issues_count":58,"forks_count":144,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-01-10T06:15:12.437Z","etag":null,"topics":["performance","prefetch","preload","preload-plugin","web","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-26T18:06:06.000Z","updated_at":"2025-01-07T07:22:02.000Z","dependencies_parsed_at":"2022-06-26T07:06:43.347Z","dependency_job_id":null,"html_url":"https://github.com/GoogleChromeLabs/preload-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpreload-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpreload-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpreload-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpreload-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/preload-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234760696,"owners_count":18882576,"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":["performance","prefetch","preload","preload-plugin","web","webpack-plugin"],"created_at":"2024-09-27T02:20:33.571Z","updated_at":"2025-09-30T17:31:13.981Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"JavaScript","readme":"# preload-webpack-plugin\n\n\u003e **DEPRECATED: A fork of this project, https://github.com/vuejs/preload-webpack-plugin can be used instead.**\n\nA webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript\nchunks using `\u003clink rel='preload'\u003e`. This helps with lazy-loading.\n\nNote: This is an extension plugin for [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - a plugin that\nsimplifies the creation of HTML files to serve your webpack bundles.\n\n## Introduction\n\n[Preload](https://w3c.github.io/preload/) is a web standard aimed at improving performance\nand granular loading of resources. It is a declarative fetch that can tell a browser to start fetching a\nsource because a developer knows the resource will be needed soon. [Preload: What is it good for?](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)\nis a recommended read if you haven't used the feature before.\n\nIn simple web apps, it's straight-forward to specify static paths to scripts you\nwould like to preload - especially if their names or locations are unlikely to change. In more complex apps,\nJavaScript can be split into \"chunks\" (that represent routes or components) at with dynamic\nnames. These names can include hashes, numbers and other properties that can change with each build.\n\nFor example, `chunk.31132ae6680e598f8879.js`.\n\nTo make it easier to wire up async chunks for lazy-loading, this plugin offers a drop-in way to wire them up\nusing `\u003clink rel='preload'\u003e`.\n\n## Prerequisites\n\nThis module requires webpack v4 and above. It also requires that you're using\n[`html-webpack-plugin`](https://github.com/ampedandwired/html-webpack-plugin) in your webpack project.\n\n## Installation\n\nFirst, install the package as a dependency in your `package.json`:\n\n```sh\n$ npm install --save-dev preload-webpack-plugin\n```\n\n## Usage\n\nIn your webpack config, `require()` the preload plugin as follows:\n\n```js\nconst PreloadWebpackPlugin = require('preload-webpack-plugin');\n```\n\nand finally, add the plugin to your webpack configuration's `plugins` array after `HtmlWebpackPlugin`:\n\n```js\nplugins: [\n  new HtmlWebpackPlugin(),\n  new PreloadWebpackPlugin()\n]\n```\n\nWhen preloading files, the plugin will use different `as` attribute depends on the type of each\nfile. For each file ends with `.css`, the plugin will preload it with `as=style`, for each file ends\nwith `.woff2`, the plugin will preload it with `as=font`, while for all other files, `as=script`\nwill be used.\n\nIf you do not prefer to determine `as` attribute depends on suffix of filename, you can also\nexplicitly name it using `as`:\n\n```javascript\nplugins: [\n  new HtmlWebpackPlugin(),\n  new PreloadWebpackPlugin({\n    rel: 'preload',\n    as: 'script'\n  })\n]\n```\n\nIn case you need more fine-grained control of the `as` attribute, you could also\nprovide a function here. When using it, entry name will be provided as the\nparameter, and function itself should return a string for `as` attribute:\n\n```javascript\nplugins: [\n  new HtmlWebpackPlugin(),\n  new PreloadWebpackPlugin({\n    rel: 'preload',\n    as(entry) {\n      if (/\\.css$/.test(entry)) return 'style';\n      if (/\\.woff$/.test(entry)) return 'font';\n      if (/\\.png$/.test(entry)) return 'image';\n      return 'script';\n    }\n  })\n]\n```\n\nNotice that if `as=font` is used in preload, the `crossorigin` will also be\nadded. Explains can be found in\n[this article](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf),\nand a list of common `as` values can be\n[found on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded).\n\nBy default, the plugin will assume async script chunks will be preloaded. This is the equivalent of:\n\n```js\nplugins: [\n  new HtmlWebpackPlugin(),\n  new PreloadWebpackPlugin({\n    rel: 'preload',\n    include: 'asyncChunks'\n  })\n]\n```\n\nFor a project generating two async scripts with dynamically generated names, such as\n`chunk.31132ae6680e598f8879.js` and `chunk.d15e7fdfc91b34bb78c4.js`, the following preloads\nwill be injected into the document `\u003chead\u003e`:\n\n```html\n\u003clink rel=\"preload\" as=\"script\" href=\"chunk.31132ae6680e598f8879.js\"\u003e\n\u003clink rel=\"preload\" as=\"script\" href=\"chunk.d15e7fdfc91b34bb78c4.js\"\u003e\n```\n\nYou can also configure the plugin to preload all chunks (vendor, async, and normal chunks) using\n`include: 'allChunks'`, or only preload initial chunks with `include: 'initial'`.\n\nIt is very common in webpack to use loaders such as `file-loader` to generate assets for specific\ntypes, such as fonts or images. If you wish to preload these files as well, even if they don't\nbelong to a chunk, you can use `include: 'allAssets'`.\n\n```js\nplugins: [\n  new HtmlWebpackPlugin(),\n  new PreloadWebpackPlugin({\n    rel: 'preload',\n    include: 'allChunks' // or 'initial', or 'allAssets'\n  })\n]\n```\n\nIn case you work with named chunks, you can explicitly specify which ones to `include` by passing an array:\n\n```js\nplugins: [\n  new HtmlWebpackPlugin(),\n  new PreloadWebpackPlugin({\n    rel: 'preload',\n    include: ['home']\n  })\n]\n```\n\nwill inject just this:\n\n```html\n\u003clink rel=\"preload\" as=\"script\" href=\"home.31132ae6680e598f8879.js\"\u003e\n```\n\n### Filtering chunks\n\nThere may be chunks that you don't want to have preloaded (sourcemaps, for example). Before preloading each chunk, this plugin checks that the file does not match any regex in the `fileBlacklist` option. The default value of this blacklist is `[/\\.map/]`, meaning no sourcemaps will be preloaded. You can easily override this:\n\n```js\nnew PreloadWebpackPlugin({\n  fileBlacklist: [/\\.whatever/]\n})\n```\n\nPassing your own array will override the default, so if you want to continue filtering sourcemaps along with your own custom settings, you'll need to include the regex for sourcemaps:\n\n```js\nnew PreloadWebpackPlugin({\n  fileBlacklist: [/\\.map/, /\\.whatever/]\n})\n```\n\n## Filtering HTML\n\nYou may not want to preload resources in some of your HTML files. You can use `excludeHtmlNames` to\ntell this plugin to ignore one or more files.\n\n```javascript\nplugins: [\n  new HtmlWebpackPlugin({\n    filename: 'index.html',\n    template: 'src/index.html',\n    chunks: ['main']\n  }),\n  new HtmlWebpackPlugin({\n    filename: 'example.html',\n    template: 'src/example.html',\n    chunks: ['exampleEntry']\n  }),\n  // Only apply the plugin to index.html, not example.html.\n  new PreloadWebpackPlugin({\n    excludeHtmlNames: ['example.html'],\n  })\n```\n\n### Resource hints\n\nShould you wish to use Resource Hints (such as `prefetch`) instead of `preload`, this plugin also supports wiring those up.\n\nPrefetch:\n\n```js\nplugins: [\n  new HtmlWebpackPlugin(),\n  new PreloadWebpackPlugin({\n    rel: 'prefetch'\n  })\n]\n```\n\nFor the async chunks mentioned earlier, the plugin would update your HTML to the following:\n\n```html\n\u003clink rel=\"prefetch\" href=\"chunk.31132ae6680e598f8879.js\"\u003e\n\u003clink rel=\"prefetch\" href=\"chunk.d15e7fdfc91b34bb78c4.js\"\u003e\n```\n\n## Including media\n\n`\u003clink\u003e` elements have the ability to accept media attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading.\n\nYou can pass the value for the media attribute in the `media` option:\n\n```javascript\nplugins: [\n  new HtmlWebpackPlugin(),\n  new PreloadWebpackPlugin({\n    rel: 'preload',\n    media: '(min-width: 600px)'\n  })\n]\n```\n\n## Support\n\nIf you've found an error or run into problems, please [file an issue](https://github.com/googlechrome/preload-webpack-plugin/issues).\n\nPatches are encouraged, and may be submitted by forking this project and\nsubmitting a pull request through GitHub.\n\n## Contributing workflow\n\n[`src/index.js`](src/index.js) and [`src/lib/`](src/lib/) contains the primary source for the plugin.\n[`test/`](test/) contains tests.\n\nTest the plugin:\n\n```sh\n$ npm install\n$ npm run test\n```\n\nThe project is written in ES2015, and is transpiled to support node 6 and above.\n\n## Additional notes\n\n- Be careful not to `preload` resources a user is unlikely to need. This can waste their bandwidth.\n- Use `preload` for the current session if you think a user is likely to visit the next page. There is no\n  100% guarantee preloaded items will end up in the HTTP Cache and read locally beyond this session.\n- If optimizing for future sessions, use `prefetch` and `preconnect`. Prefetched resources are maintained\n  in the HTTP Cache for at least 5 minutes (in Chrome) regardless of the resource's cachability.\n\n## Alternative tools\n\n- webpack's native support:\n  As of the [v4.6.0 release](https://github.com/webpack/webpack/releases/tag/v4.6.0)\n  of webpack, there is native support for generating both prefetch and preload `\u003clink\u003e`s via [\"magic\" comments in your `import()` statements](https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c).\n\n- [script-ext-html-webpack-plugin](https://github.com/numical/script-ext-html-webpack-plugin):\n  Enhances `html-webpack-plugin` with options including 'async', 'defer', 'module' and 'preload'.\n  As of [v1.7.0](https://github.com/numical/script-ext-html-webpack-plugin/pull/9#issuecomment-278239875),\n  it supports async chunks.\n\n- [resource-hints-webpack-plugin](https://github.com/jantimon/resource-hints-webpack-plugin):\n  Automatically wires resource hints for your resources. This plugin does does not currently\n  support async chunks.\n\n## License\n\nCopyright 2019 Google, Inc.\n\nLicensed to the Apache Software Foundation (ASF) under one or more contributor\nlicense agreements.  See the NOTICE file distributed with this work for\nadditional information regarding copyright ownership.  The ASF licenses this\nfile to you under the Apache License, Version 2.0 (the \"License\"); you may not\nuse this file except in compliance with the License.  You may obtain a copy of\nthe License at\n\n  http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\nWARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the\nLicense for the specific language governing permissions and limitations under\nthe License.\n\n[npm-url]: https://npmjs.org/package/preload-webpack-plugin\n[npm-img]: https://badge.fury.io/js/preload-webpack-plugin.svg\n[npm-downloads-img]: https://img.shields.io/npm/dm/preload-webpack-plugin.svg?style=flat-square\n[daviddm-img]: https://david-dm.org/googlechromelabs/preload-webpack-plugin.svg\n[daviddm-url]: https://david-dm.org/googlechromelabs/preload-webpack-plugin\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fpreload-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglechromelabs%2Fpreload-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fpreload-webpack-plugin/lists"}