Making the Supabase Dashboard Supa-fast

Summary

Adding features to the Supabase single-page application dashboard risked performance regressions due to increasing JavaScript bundle sizes. To establish a baseline, the engineering team introduced next-bundle-analyzer and tracked Real User Monitoring alongside Core Web Vitals using Sentry. Optimization efforts focused on pruning dependencies, which included swapping Moment.js for day-js, replacing Joi with ajv, reverting crypto-js to version 3.3.0, and moving the 388 KB zxcvbn password module to a backend API. The team also implemented Next.js dynamic imports for heavy components like spreadsheet parsing, removed legacy server-side props to unlock Automatic Static Optimization, and configured long cache headers on assets. These architectural adjustments brought Core Web Vitals within recommended thresholds and lowered client-side page transition payloads below 200 KB of JavaScript.

Takeaways

1. 1

   Replacing heavy frontend libraries with lightweight or native alternatives, such as switching from Moment.js to day-js or using native fetch instead of axios, substantially reduces bundle footprint.

2. 2

   Moving computation-heavy modules like zxcvbn to backend APIs and lazy-loading large dependencies like xlsx prevents massive scripts from loading on initial visits.

3. 3

   Enabling Next.js Automatic Static Optimization by removing getServerSideProps and getInitialProps allows pages to be pre-rendered to HTML and cached on CDNs.