Gatsby plugin to add a <link rel="preconnect"> for every specified domain
Quickly add a <link rel="preconnect" crossorigin>
tag for every specified domain.
npm install --save gatsby-plugin-preconnect
It simply adds a <link rel="preconnect" href="https://example.com" crossorigin>
to the page (see the
Resource Prioritization - Preconnect
guide).
// In your gatsby-config.js
plugins: [
{
resolve: 'gatsby-plugin-preconnect',
options: {
domains: ['https://foo.com', 'https://bar.com'],
},
},
]
crossOrigin
is set to true
by default but it can be customized, below all the available options
plugins: [
{
resolve: 'gatsby-plugin-preconnect',
options: {
domains: [
'https://foo.com',
'https://bar.com',
{ domain: 'https://enablecors.com', crossOrigin: true },
{ domain: 'https://disablecors.com', crossOrigin: false },
{ domain: 'https://corswithanonymous.com', crossOrigin: 'anonymous' },
{ domain: 'https://corswithcreds.com', crossOrigin: 'use-credentials' },
],
},
},
]
All the available values for crossOrigin
are listed below, every other value makes the plugin throw an error
Value | Equivalent value |
---|---|
undefined |
"anonymous" |
true |
"anonymous" |
"anonymous" |
"anonymous" |
"use-credentials" |
"use-credentials" |
false |
(attribute not added) |
PR or issues are welcome 👋
npm run build
on the rootnpm run plugin:link
to locally use itThanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!