Reducing Bundle Size

Why

By default, all supported networks are bundled with your app, even if you only ever render a couple of them. Each network's data (icon, share URL template, color) is small on its own, but most sites only need a handful, so it is usually not necessary to load all 20+ of them.

Usage

If you know in advance which networks your site needs, you can set the optional networks key in the module configuration, to define a whitelist of network names.

Networks not listed here will be excluded from the build entirely, rather than just being unused code in the final bundle:

export default defineNuxtConfig({
  socialShare: {
    baseUrl: 'https://www.yoursite.com',
    networks: ['facebook', 'x', 'linkedin', 'email'], // only these get bundled
  },
})

See Supported Networks for the full list of valid names, including aliases (e.g. twitter for x).

What happens with excluded networks

If a <SocialShare> component (or a useSocialShare() call) references a network that isn't in your networks list, it fails gracefully: no share button is rendered, and a warning is logged to the console explaining that the network was excluded by your configuration (as opposed to being genuinely unsupported), so you know to add it to the list rather than assuming you made a typo.

Nuxt Layers