jareddantis / gwa-calc Goto Github PK

Description

On mobile devices, the subject name input field in SetCreatorDialog.vue is too small for practical use.

Details

Each subject <div> is laid out with CSS Grid, and the column for the subject units input field has a fixed width. This, along with the defined grid-gap, leaves little room for the subject name input field to grow.

Possible solutions

• Use smaller grid gap and subject units input field width on small-width screens

Description

Lighthouse mobile device audits performed on the web app with Clear storage enabled consistently yield performance indices below 80.

Details

Two of the top recommendations from the audits is to lower the JavaScript execution time and to minimize work on the main thread.

The app currently utilizes Webpack's dynamic imports and Vuetify's à-la-carte tree-shaking system to help decrease bundle size, but the size is still too big (~600kB vs. the ~250kB recommendation).

Possible solutions

• Vuetify and Vue itself make the biggest chunks according to webpack-bundle-analyzer. While we can't do anything about Vue, we may be able to remove unused Vuetify CSS.
• NPM modules are already split off into separate chunks through the Webpack config, but it makes little difference to Lighthouse as it turns out. We may be able to remove some libraries, but the biggest offenders are unfortunately essential to the app. More investigation may be needed.