Massive bundle size

[walmartwarlord]

Hi, any way we can reduce the bundle size while still having UI components? I understand that @clerk/clerk-js includes react as a dependency, hence the size, but do you plan on releasing a headless version?

This is the size that gets added when you add clerk-sveltekit (1mb+):

Thank you!

[markjaquith]

I could load Clerk's JS API separately, as shown here, but it will still all need to be served to the browser in order to render the main Clerk-provided components.

The Vue integration does the same thing as I'm doing here, wrapping the @clerk/clerk-js components (which uses React under the hood).

Are you thinking about a use case in which you would be using Clerk's hosted login pages, and not rendering any components on your site at all? But still wanting to have routes be protected serverside?

[markjaquith]

There's some relevant discussion here: https://github.com/clerk/javascript/issues/1578

[markjaquith]

@walmartwarlord I think I got it sorted. With the above PR, in src/hooks.client.ts, you will replace this:

import { initializeClerkClient } from 'clerk-sveltekit/client'

With this:

import { initializeClerkClient } from 'clerk-sveltekit/headless'

And you'll get a headless version. You won't be able to use SignIn, SignUp, or UserProfile, or UserProfileButton... but you should be able to use the other components, and then link to the hosted Clerk authentication pages.

And the build is MUCH slimmer — no React. Let me know what you think.