performance optimizations

[sgfost]

Remaining client-side tasks:

• [ ] lodash tree shaking (only import what we are using)
• [ ] bootstrap-vue icons tree shaking (some issue there, needs to be looked into)
• [ ] code splitting (potentially deliver the game ui in a separate bundle and add a loading screen for when this happens)

Server performance needs to be looked at independently (sentry performance monitoring, game server load testing, etc.)

previous performance related issues:

788

666

---

Treemap of the gzipped bundle:

js/chunk-vendors.js (4.42 MB)
js/app.js (639.7 KB)

• font awesome is the most obvious thing to be dealt with, 1.3 MB compressed for 10 or so icons
• (all of) lodash is included twice (client and shared)
• may be worth looking into only bundling used icons from bootstrap-vue

webpack chunk splitting: https://webpack.js.org/plugins/split-chunks-plugin/

lazy loading routes (for splitting game components from web content): https://v3.router.vuejs.org/guide/advanced/lazy-loading.html#lazy-loading-routes

[sgfost]

Down to ~2.7mb after cleaning up icons and extraneous lodash include. Good enough for now until we monitor performance in prod.

remaining refactors:

• lodash tree shaking (only import what we are using)
• bootstrap-vue icons tree shaking (some issue there, needs to be looked into)
• code splitting