livepeer / livepeer/studio

Importing useApi hooks are responsible for 700KB of initial JS code that need to be downloaded

Open
#1,459 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

team: studio tech debt
Dominant language
TypeScript
Stars
88
Forks
37
PR merge metrics
No merged PRs in 30d

Description

**What's the problem? (required)**
Importing `useApi` hooks are responsible for 700KB of initial JS code that need to be downloaded. It should be made much more lean.
Probably related: importing `components/Dashboard/Table` is responsible for 1MB of initial JS code. It's probably related to, or importing as dependency, `useApi` too.

**What's the current behavior? (required)**
First page load (any page in /, dashboard/* or app/*) is slow because it has to download a lot of JS.

Here details per route:
```
Route (pages) Size First Load JS
┌ ● / 1.66 kB 1.01 MB
├ /_app 0 B 1 MB
├ ● /[slug] (ISR: 1 Seconds) (648 ms) 928 B 1.01 MB
├ ├ /en/privacy-policy
├ ├ /en/terms-of-service
├ └ /en/pricing-faq
├ ○ /404 219 B 1 MB
├ ○ /app/admin 243 B 1.09 MB
├ ○ /app/admin/keys 2.78 kB 1.09 MB
├ ○ /app/admin/objectstore 2.98 kB 1.09 MB
├ ○ /app/admin/streams 2.99 kB 1.09 MB
├ ○ /app/admin/tools 1.93 kB 1.09 MB
├ ○ /app/admin/usage 2.35 kB 1.09 MB
├ ○ /app/admin/webhooks 3.06 kB 1.09 MB
├ ○ /app/stream/[id] 14.2 kB 1.15 MB
├ ○ /app/stream/new-stream 2.32 kB 1.03 MB
├ ● /blog 2.49 kB 1.01 MB
├ ● /blog/[slug] (ISR: 1 Seconds) (23238 ms) 1.99 kB 1.01 MB
├ ├ /en/blog/what-is-video-encoding (1368 ms)
├ ├ /en/blog/livepeer-helps-classicspark-give-musicians-a-pandemic-ready-stream-of-income (1273 ms)
├ ├ /en/blog/video-transcoding-what-why-how-get-started (769 ms)
├ ├ /en/blog/first-livepeer-stream-in-five-minutes (660 ms)
├ ├ /en/blog/build-multistreaming-into-your-apps (634 ms)
├ ├ /en/blog/mint-video-nft-livepeer-studio-polygon (623 ms)
├ ├ /en/blog/at-nab-2022 (621 ms)
├ └ [+39 more paths] (avg 443 ms)
├ ● /blog/category/[slug] (ISR: 1 Seconds) (1162 ms) 2.52 kB 1.01 MB
├ ├ /en/blog/category/case-study (400 ms)
├ ├ /en/blog/category/education (387 ms)
├ └ /en/blog/category/product (375 ms)
├ ○ /contact 2.56 kB 1.01 MB
├ ○ /dashboard 3.95 kB 1.12 MB
├ ○ /dashboard/assets 9.16 kB 1.12 MB
├ ○ /dashboard/assets/[id] 16.5 kB 1.14 MB
├ ○ /dashboard/billing 13.4 kB 1.04 MB
├ └ css/f8f9a93d01245417.css 34.6 kB
├ ○ /dashboard/billing/plans 7.54 kB 1.03 MB
├ ○ /dashboard/developers/api-keys 8.37 kB 1.12 MB
├ ○ /dashboard/developers/signing-keys 7 kB 1.11 MB
├ ○ /dashboard/developers/webhooks 3.72 kB 1.14 MB
├ ○ /dashboard/developers/webhooks/[id] 4.97 kB 1.03 MB
├ ○ /dashboard/sessions 2.89 kB 1.11 MB
├ ○ /dashboard/stream-health 3.64 kB 1.15 MB
├ ○ /dashboard/streams 649 B 1.11 MB
├ ○ /dashboard/streams/[id] 15.7 kB 1.29 MB
├ ○ /forgot-password 2.12 kB 1.01 MB
├ ● /jobs 1.85 kB 1.01 MB
├ ○ /login 2.21 kB 1.01 MB
├ λ /preview/[slug] 969 B 1.01 MB
├ λ /preview/blog/[slug] 2.03 kB 1.01 MB
├ ○ /pricing 1.76 kB 1.01 MB
├ ○ /register 4.83 kB 1.01 MB
├ ○ /reset-password 2.07 kB 1.01 MB
├ ● /team 1.83 kB 1.01 MB
└ ○ /verify 1.73 kB 1.01 MB
+ First Load JS shared by all 1.01 MB
├ chunks/framework-caf23577deed873f.js 45.7 kB
├ chunks/main-113bc39d2fba296b.js 32.9 kB
├ chunks/pages/_app-27b929fc73fee648.js 923 kB
├ chunks/webpack-e577efee670f6d42.js 2.37 kB
└ css/eac9081bf09767f0.css 2.04 kB
```

**Describe a possible solution you've considered (optional)**
Investigate and try to breakdown `useApi` into smaller modules. Another approach (probably parallel a parallel one) would be to use the new Next.js 13 app/ directory to keep more code on the server.

**Additional context (optional)**
This has been discovered working on https://github.com/livepeer/studio/issues/1453

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by inspecting the useApi hooks and components/Dashboard/Table imports, then review the Next.js build output for the shared _app chunk and affected routes. Compare the initial JavaScript sizes before and after the investigation; done means the shared and route bundles are materially leaner without breaking the listed pages.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.