Clacladev/bundle size reduction

[clacladev]

What does this pull request do? Explain your changes. (required)
Reduce the bundle size from 1.7Mb to XXXKb.

Specific updates (required)

• Removed the Why component give it's not used
• Updated some dependencies so they share same sub-dependencies versions
• Removed mix-player and replaced it with the livepeer.js one
• Removed highlight.js to highlight programming language in the blog, since it was not used

Note:

• useApi hooks context is responsible for 700kb in initial JS download
• components/Dashboard/Table is responsible for 1Mb of initial JS download (includes useApi)

These were not tackled since it's not immediate how they can be made leaner. But I tracked them as future work here #1459

How did you test each of these updates (required)
Tested the website on Safari and Chrome.

Does this pull request close any open issues?
Fixes #1453

Checklist:

• Please run the website trying all the features so that everything still works.
• Try the refactored player in the blog http://localhost:3000/blog/why-the-lot-radio-livestreams-24-7-with-livepeer-studio

Build sizes
Before:

+ First Load JS shared by all                                                  1.75 MB
  ├ chunks/framework-7d081baa1bf5b271.js                                       45.4 kB
  ├ chunks/main-4487a3be42527ffa.js                                            27.2 kB
  ├ chunks/pages/_app-c4ca04a3d8a01cfe.js                                      1.67 MB
  ├ chunks/webpack-3216043d4706b406.js                                         1.86 kB
  └ css/513f03c6bb04414d.css                                                   2.4 kB

After:

+ 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

Dependencies representation
Client side before

Client side after

Server side before

Server side after

Here the files to have an interactive analysis:
Client side analysis
client.html.txt

Server side analysis
server.html.txt

Download and set .html extension and open in browser.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
livepeer-studio	✅ Ready (Inspect)	Visit Preview	Nov 11, 2022 at 5:45PM (UTC)

[adamsoffer]

🔥