Tree shaking

[lawrencecchen]

Feature request

Tree-shaking is currently not possible with the supabase-js library because SupabaseClient is implemented using classes. Neither Webpack or Rollup supports tree-shaking class methods.

Is your feature request related to a problem? Please describe.

Supabase bundle size is quite small compared to others (firebase, amplify), but it will only increase as more features are added. Projects that do not use all the features that Supabase provides will regardless pay the cost. Firebase has realized this with their new Modular Javascript SDK.

Describe the solution you'd like

Instead of initializing a single Supabase client, here's a modular API proposal:

// initSupabase.js
const supabaseClient = createClient(supabaseUrl, supabaseKey);
// Does not automatically instantiate RealtimeClient, PostgrestClient, etc.
// Features can be opted in as such:
export const db = getPostgrest(supabaseClient);
export const realtime = getRealtime(supabaseClient);
export const auth = getAuth(supabaseClient);
export const storage = getStorage(supabaseClient);

// some-random-component.js
import { db, realtime } from './initSupabase';

const { data, error } = await db
  .from('cities')
  .select()

const mySubscription = realtime
  .from('*')
  .on('*', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

While this won't eliminate every piece of unused code, it's a start to enabling opt-in for specific features.

Caveats

• Will break the current stable API, but can be remedied w/ codemods.
• Not sure if SupabaseAuthClient can be separated as all other modules rely on that

If this is something you guys think is worth pursuing, I'd be happy to start working on a PR!

[maxcodefaster]

For the meantime, is there a supabase package available without realtime.js, as it increase bundle size significantly?

[soedirgo]

@maxcodefaster you can use the client library for each components independently, but you need all for supabase-js.

What's common.js? There's no significant bloat in realtime-js as far as I'm aware.

[maxcodefaster]

nvm. i got an error on angular cli stating that realtime-js relies on common.js and thus increases bundle size. i forked supabase-js and remove realtime-js references, if someone is interested:

https://www.npmjs.com/package/supabase-js-without-realtime-js

[micahjon]

... i forked supabase-js and remove realtime-js references, if someone is interested:

https://www.npmjs.com/package/supabase-js-without-realtime-js

@maxcodefaster , is your fork still up-to-date? supabase-js is currently the largest dependency of my app and I currently only use auth. Thanks!

[sannajammeh]

+1 on this. Also fixes the issue of "realtime" being imported in Next.js' Edge runtime.

[madebyfabian]

I am wondering, is the new supabase v2 RC solving tree shaking?
I am seeing that the dist is actually a tiny bit larger than in v1.

v2 dist

v1 dist

I am seeing the ability to define certain settings for createClient

const options = {
  db: {
    schema: 'public',
  },
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true,
  },
  global: {
    headers: { 'x-my-custom-header': 'my-app-name' },
  },
}
const supabase = createClient(
  'https://xyzcompany.supabase.co',
  'public-anon-key',
  options
)

I am using only the database and storage function of supabase. Wouldn't it be great to allow something like:

const options = {
  db: true,
  auth: false,
  realtime: false,
}
const supabase = createClient(
  'https://xyzcompany.supabase.co',
  'public-anon-key',
  options
)

or like https://github.com/storyblok/storyblok-js#initialization does it

import { databaseFeature, storageFeature } from '@supabase/supabase-js/features'
const options = {
  useOnlyFeatures: [databaseFeature, storageFeature]
}
const supabase = createClient(
  'https://xyzcompany.supabase.co',
  'public-anon-key',
  options
)

[soedirgo]

We weren't considering tree-shaking in v2, but might in v3. That said there seems to still be some low hanging fruits here - realtime-js seems to have doubled in size 🤔

[binyamin]

We weren't considering tree-shaking in v2

@soedirgo May I ask why? Supabase-js is a whopper. I'd much rather download the library on my server instead of making every single user download it in the browser.

[soedirgo]

There are more pressing issues right now, esp. wrt functionality - once the client libs are stable enough we'll look into how to refactor them to support tree-shaking.

[Andrewjeska]

+1, I'm using the supabase client solely for auth for a nextjs app. Would be nice to isolate the bits I'm not using :)

[abhishiv]

@soedirgo am I right to say that the bundle size is huge since of the npm websocket package(16k) which cause the entire size to be 26kb currently.

Since all browsers already support websocket, that should be easy win and fix and provide a browser build right? I would be happy to make a PR if you would consider it!

[soedirgo]

Hmm, the websocket package isn't that big actually (1.1KB), but yeah that'd help trim it down. Though a bigger win would be from omitting cross-fetch (2.8KB) on environments that don't need it.