Decrease the bundle size #1847

Activity

1. langonja

   added

   feature-request

   on Oct 8, 2023
2. fmoessle commented on Oct 8, 2023

   

   fmoessle

   on Oct 8, 2023

   More actions

   I would love to see the separation of authentication logic (clerk.load(), clerk.user...) from the UI parts (clerk.mountSignIn()...). Bundle size seems to be mostly impacted by the UI parts and could only be imported when needed, e.g. a login page.
3. panteliselef commented on Oct 8, 2023

   

   panteliselef

   on Oct 8, 2023

   Last edited by panteliselef

   Contributor

   More actions

   Hello @fmoessle @hornta , could u give the following snippet a try ?
   Instead of doing

   import Clerk from "@clerk/clerk-js";

   import Clerk like this

   import Clerk from "@clerk/clerk-js/headless";

   This should bring the bundle size down significantly.

   👍React with 👍1Reacted by Khalil Meziane
4. panteliselef commented on Oct 8, 2023

   

   panteliselef

   on Oct 8, 2023

   Last edited by panteliselef

   Contributor

   More actions

   On another note @hornta , do you mind sharing why you have chose to import Clerk like that in an React application ?
   What are you trying to access from clerk-js that clerk-react does not re-export or does not give you access through hooks ?
5. langonja commented on Oct 8, 2023

   

   langonja

   on Oct 8, 2023

   Last edited by langonja

   Author

   More actions

   @panteliselef That decreases the size, although it's still the largest dependency which is weird because it's "just authentication" compared to for example the react footprint :-) But I'm OK with it being like this for now.

   For some reason vscode couln't find out that the package exported that and there seems to be no typings for this headless as well, but it works at runtime and it can build it.

   On another note @hornta , do you mind sharing why you have chose to import

   I need to use Clerk outside of the "react world", for example in redux toolkit querys createApi and in react router dom createBrowserRouter.

   
6. langonja commented on Oct 8, 2023

   

   langonja

   on Oct 8, 2023

   Last edited by langonja

   Author

   More actions

   I mean for what Clerk do, it being larger than or equally large as react feels like it has unoptimized code and/or imports things bundlers can't treeshake away. It's mostly communication with Clerk backend.
7. fmoessle commented on Oct 8, 2023

   

   fmoessle

   on Oct 8, 2023

   Last edited by fmoessle

   More actions

   I also experience missing types. As a workaround, you can import the type like this

   import type ClerkType from '@clerk/clerk-js'

   and tell typescript to handle the headless clerk instance to be of the type

   const clerk: ClerkType = new Clerk('...')
8. fmoessle commented on Oct 8, 2023

   

   fmoessle

   on Oct 8, 2023

   More actions

   @panteliselef If using '@clerk/clerk-js/headless' what is the suggested way of loading the UI-Components later on?

   I ended up having two instances of clerk in my app: 1 global instance ('@clerk/clerk-js/headless') and the other only on my login page ('@clerk/clerk-js')

   👀React with 👀1Reacted by Robert Soriano
9. panteliselef commented on Oct 8, 2023

   

   panteliselef

   on Oct 8, 2023

   Contributor

   More actions

   @panteliselef If using '@clerk/clerk-js/headless' what is the suggested way of loading the UI-Components later on?

   I ended up having two instances of clerk in my app: 1 global instance ('@clerk/clerk-js/headless') and the other only on my login page ('@clerk/clerk-js')

   @fmoessle I believe the following would work for you

   import Clerk from "@clerk/clerk-js/headless";
   
   const clerkJSinstance = new Clerk(
     import.meta.env.VITE_APP_CLERK_PUBLISHABLE_KEY,
   );
   
   <ClerkProvider Clerk={clerkJSinstance}>
    {...}
   </ClerkProvider>

   👍React with 👍1Reacted by Khalil Meziane
10. clerk

    locked and limited conversation to collaborators on Oct 30, 2023
11. LekoArts

    converted this issue into a discussion #1962 on Oct 30, 2023