optimize bundle size

[hasparus]

Problem

+ First Load JS shared by all                                  263 kB // <-- this is too much
  ├ static/pages/_app.js                                       32.8 kB
  ├ chunks/1265e7260f5f2489f4e2cca51ea9befb3ddf89fd.1d4e45.js  116 kB // <-- this is shady
  ├ chunks/5dbfe9af1356a22fe8dde2cd58a3ea598dd0c4b9.9dcca3.js  10.7 kB
  ├ chunks/923ba8eb.b175ec.js                                  17 kB
  ├ chunks/9432a1511ae7d44c0066aa2aa9ccfa64f331bd8a.5d0a76.js  25.6 kB
  ├ chunks/954e2d49221fc00aab96042541b1938f659ce7c3.e7bafe.js  4.17 kB
  ├ chunks/ca5eead5b6b8374c74bc66ebafbda6aaa78b4ce0.4047ab.js  9.1 kB
  ├ chunks/framework.3f47bd.js                                 40.3 kB
  ├ runtime/main.90ac55.js                                     6.35 kB
  ├ runtime/webpack.c21266.js                                  746 B
  └ css/8f16fafa26476c991d22.css                               2.78 kB

Course of action

This look like we're including a server-only module in bundle.

1. Add Webpack Bundle Analyzer script to package.json.
2. Open it and find the culprit.
3. User browser field in package.json or webpack's IgnorePlugin to exclude the module.

See https://arunoda.me/blog/ssr-and-server-only-modules

[hasparus]

graphql-zeus's AllTypesProps takes quite a bit (233kB, though it gzips to 17kB). We could limit our GraphQL API surface to the nodes we're actually using from the frontend and generate a constrained Zeus client for production.

Page                                                           Size     First Load JS
┌ λ /                                                          4.73 kB         289 kB
├ λ /__index-old-three-meetings                                4.17 kB         310 kB
├ λ /__meetings                                                2.19 kB         293 kB
├ λ /__meetings/[id]                                           4.71 kB         295 kB
├ λ /__meetings/create                                         4.49 kB         295 kB
├ λ /__u/[username_slug]                                       2.17 kB         286 kB
├   /_app                                                      28.5 kB         214 kB
├ λ /404                                                       494 B           285 kB
├ λ /api/logged-in
├ λ /api/login
├ λ /api/login-callback
├ λ /api/logout
├ λ /api/me
├ λ /api/meetings/__requestedMeetingFields
├ λ /api/meetings/insert
├ λ /api/meetings/my-meetings
├ λ /api/meetings/recently-published
├ λ /api/u/avatar/[username_slug]
├ λ /api/u/me
├ λ /api/users
├ λ /auth-error                                                201 B           214 kB
├ λ /festival/[slug]/[waitlist]                                7.77 kB         292 kB
└ λ /settings                                                  1.46 kB         292 kB
+ First Load JS shared by all                                  214 kB
  ├ static/pages/_app.js                                       28.5 kB
  ├ chunks/1c0d53a68627bacf920fcfc25167d3484e58a5a8.199717.js  7.27 kB
  ├ chunks/284b68d725e3f1b0782a9a3b3d6e38710b948c26.36538a.js  18.4 kB
  ├ chunks/923ba8eb.3e744e.js                                  17.5 kB
  ├ chunks/a2f716d2701195b2c6964a6c934a184320fc778a.dfe16e.js  18 kB
  ├ chunks/a4b86c532212bf10acfabc70a27b5b84a232b390.f8a492.js  35.1 kB
  ├ chunks/a6fff5e7d87ba516a7d1310ceb7eb099a608df1e.412672.js  12.3 kB
  ├ chunks/bdaa283fb0ccfc766edb01b3f314b54724c50703.712c4e.js  4.17 kB
  ├ chunks/commons.9dcca3.js                                   10.7 kB
  ├ chunks/dbfc9ab5d41febf54ee278437fbe4ee09c4a6a45.9a398e.js  14.3 kB
  ├ chunks/framework.c5b22c.js                                 40.5 kB
  ├ runtime/main.60597d.js                                     6.35 kB
  └ runtime/webpack.5b9796.js                                  1.23 kB

[hasparus]

We could consider getting rid of @unly/universal-language-detector in favor of next-i18next. It seems that universal-langauage-detector imports both server and browser code eagerly https://github.com/UnlyEd/universal-language-detector/blob/master/src/index.ts, and it also imports lodash.get and lodash.includes which I don't consider crucial to our app.