Memory use and performance issues

**Describe the problem**

Metamask extension JS bundles are huge - 5.8 MB of combined weight, even though the files are minified. This size is quite unusual for a web app. Granted, the files are not gzipped or brotlied because they're served from FS, but even with this caveat, the size is hard to justify.

What's more, all JS bundles are requested on load, instead of being requested dynamically when needed.

This results poor load performance, serious memory use, and suggests that the current situation could be improved.

**Screenshots**

Memory use compared to some other wallets:

**Expected behavior**

Metamask is embedded in a browser and has access to the latest JS features. I expect to see a more modern approach, where necessary modules are loaded dynamically and the memory usage is minimized.

**Browser details (please complete the following information):**
- OS: Mac OS
- Browser: Chrome Version 95.0.4638.54 (Official Build) (x86_64)
- MetaMask Version: 10.2.2

---
I'm not in expert in what Metamask has under the hood. I'm interested in knowing whether some of this weight is unavoidable. The UI alone isn't complicated and can be implemented with kilobytes of javascript, not megabytes.

Start by measuring the extension's JavaScript bundle sizes, startup requests, and memory use in the reported Chrome and MetaMask versions. Compare which bundles load immediately and establish before-and-after measurements; done means unnecessary initial loading is reduced and memory and load performance improve.

Written by the indexing model from the issue text.