Reduce bundle size
ConsentLayer is built so that your bundle contains only the parts you import.
The package is ES modules only and declares "sideEffects": false, so any
bundler that tree-shakes, such as Vite, Rollup, esbuild, webpack or
Turbopack, drops the exports you don’t use. The package’s CI measures the
entry points on every change; see Bundle size for the current
figures.
Import only what you use
Section titled “Import only what you use”Each provider, consent adapter and server destination is its own entry point,
and the root entry exports none of them. Importing ga4() never bundles
meta() or posthog():
import { createAnalytics } from 'consentlayer'import { ga4 } from 'consentlayer/providers/ga4'A provider turned off by an undefined ID, such as
meta({ pixelId: process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID }) without the
variable, still ships its code. To keep a provider out of the bundle, don’t
import it.
From the root entry, only the exports you use are bundled; the
bundle size table lists createAnalytics() on its own. The
consent engine, the event queue and debug logging are part of
createAnalytics() whether or not you turn them on. Auto-tracking is a
separate entry, consentlayer/auto-tracking, bundled only when you import
autoTracking().
Load vendor SDKs on demand
Section titled “Load vendor SDKs on demand”posthog() and sentry() load posthog-js and @sentry/browser with a
dynamic import(), which your bundler splits into separate chunks, fetched
only when the provider loads. PostHog session recording, Sentry Session
Replay and Sentry tracing are further chunks, fetched only when you turn them
on.
defer postpones loading these SDKs until the browser is idle, the first
interaction or a delay, so they don’t compete with your page’s first load:
posthog({ apiKey: process.env.NEXT_PUBLIC_POSTHOG_KEY, defer: 'idle' })See Loading SDKs later.
The other providers ship no SDK. Most inject their vendor’s script tag in the
browser, from the vendor’s servers, once consent allows it. vercel() injects
no script: it calls the track function you pass from @vercel/analytics.
Prefer npm over the script tag
Section titled “Prefer npm over the script tag”The script tag bundles every provider and adapter into one file, because it can’t know which ones a page uses; its size is in the bundle size table. Installed from npm, you ship only the core and the providers you import.
Measure your own bundle
Section titled “Measure your own bundle”To see what ConsentLayer adds to your application, use your bundler’s
analyzer, such as
@next/bundle-analyzer
or rollup-plugin-visualizer
for Vite, and look for consentlayer in the output.