Importing useApi hooks are responsible for 700KB of initial JS code that need to be downloaded
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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