https://github.com/noriste/gatsby-plugin-preconnect

Gatsby plugin to add a <link rel="preconnect"> for every specified domain
https://github.com/noriste/gatsby-plugin-preconnect

gatsby-plugin preconnect

Last synced: 18 days ago
JSON representation

Gatsby plugin to add a <link rel="preconnect"> for every specified domain

• Host: GitHub
• URL: https://github.com/noriste/gatsby-plugin-preconnect
• Owner: NoriSte
• Created: 2019-05-13T14:54:51.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-06-07T17:55:51.000Z (over 1 year ago)
• Last Synced: 2024-10-25T13:02:11.778Z (20 days ago)
• Topics: gatsby-plugin, preconnect
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/gatsby-plugin-preconnect
• Size: 4.7 MB
• Stars: 10
• Watchers: 1
• Forks: 5
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gatsby-plugin-preconnect

Quickly add a `` tag for every specified domain.

[![Build Status](https://travis-ci.com/NoriSte/gatsby-plugin-preconnect.svg?branch=master)](https://travis-ci.com/NoriSte/gatsby-plugin-preconnect)

[![Build Status](https://img.shields.io/badge/build%20cron-weekly-44cc11.svg)](https://travis-ci.com/NoriSte/gatsby-plugin-preconnect)

[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![Open Source

Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/) ![npm](https://img.shields.io/npm/dw/gatsby-plugin-preconnect?color=CB3836)

## Install

`npm install --save gatsby-plugin-preconnect`

## What this plugin does

It simply adds a `` to the page (see the

[

Resource Prioritization - Preconnect

guide](https://developers.google.com/web/fundamentals/performance/resource-prioritization?utm_source=lighthouse&utm_medium=unknown#preconnect)).

## How to use

```javascript

// 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

```js

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) |

## Contributing

PR or issues are welcome 👋

#### Notes

- if you want to work on the plugin sources, remember that you need to `npm run build` on the root

  then, in every test project, you need to run `npm run plugin:link` to locally use it

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Stefano Magni
💻 📖

    
Dugagjin Lashi
💻 👀

    
Sean King
🤔

    
Andrew Schneider
💻 📖 ⚠️

    
Andreas Donig
🤔

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!