Check how to reduce size of produced artefacts

[kinow]

The vuejs threshold for raising a warning is around 244 kb. We have over 1 mb now, so we will have to try finding what is going on.

It could be that we need to filter what our theme is importing from Vuetify. Or could be Cytoscape (I remember seeing this warning before the Graph view, so probably not that). Could be the icons or fonts, etc.

[kinow]

Checked the browser coverage tool already, and ~15% of the code loaded is not loaded. Looks like some Vuetify components are never used but still loaded by webpack.

Vue UI can probably cast some light on the issue.

[kinow]

After using A La Carte, the size is better, but still above the threshold.

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index bceb629..1368153 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,10 +1,89 @@
 import Vue from 'vue'
-import Vuetify from 'vuetify'
+import Vuetify, {
+  VAlert,
+  VApp,
+  VBtn,
+  VCard, // TBD: Card* used only by NotFound.vue, could be removed later?
+  VCardText,
+  VCardTitle,
+  VCheckbox,
+  VChip,
+  VContainer,
+  VContent,
+  VFadeTransition,
+  VDataTable,
+  VDivider,
+  VFlex,
+  VFooter,
:...skipping...
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index bceb629..1368153 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,10 +1,89 @@
 import Vue from 'vue'
-import Vuetify from 'vuetify'
+import Vuetify, {
+  VAlert,
+  VApp,
+  VBtn,
+  VCard, // TBD: Card* used only by NotFound.vue, could be removed later?
+  VCardText,
+  VCardTitle,
+  VCheckbox,
+  VChip,
+  VContainer,
+  VContent,
+  VFadeTransition,
+  VDataTable,
+  VDivider,
+  VFlex,
+  VFooter,
+  VForm,
+  VIcon,
+  VLayout,
+  VList,
+  VListTile,
+  VListTileAction,
+  VListTileActionText,
+  VListTileAvatar,
+  VListTileContent,
+  VListTileSubTitle,
+  VListTileTitle,
+  VMenu,
+  VNavigationDrawer,
+  VProgressLinear,
+  VSelect,
+  VSpacer,
+  VSubheader,
+  VTextField,
+  VToolbar,
+  VToolbarTitle
+} from 'vuetify/lib'
+import { Ripple } from 'vuetify/lib/directives'
 import theme from './theme'
 import 'vuetify/dist/vuetify.min.css'
 import '@mdi/font/css/materialdesignicons.css'

-Vue.use(Vuetify, {
-  iconfont: 'mdi',
-  theme
-})
+Vue.use(
+  Vuetify, {
+    components: {
+      VAlert,
+      VApp,
+      VBtn,
+      VCard,
+      VCardText,
+      VCardTitle,
+      VCheckbox,
+      VChip,
+      VContainer,
+      VContent,
+      VFadeTransition,
+      VDataTable,
+      VDivider,
+      VFlex,
+      VFooter,
+      VForm,
+      VIcon,
+      VLayout,
+      VList,
+      VListTile,
+      VListTileAction,
+      VListTileActionText,
+      VListTileAvatar,
+      VListTileContent,
+      VListTileSubTitle,
+      VListTileTitle,
+      VMenu,
+      VNavigationDrawer,
+      VProgressLinear,
+      VSelect,
+      VSpacer,
+      VSubheader,
+      VTextField,
+      VToolbar,
+      VToolbarTitle
+    },
+    directives: {
+      Ripple
+    },
+    iconfont: 'mdi',
+    theme
+  }
+)

[kinow]

Removing remaining components and libraries not used (e.g. flags), here's the resulting size:

So right now 426.1 kb. After Vuetify A La Carte we have 385.9 kb. And after removing the unused stuff, we get 372.8 kb.

102.8 kb are from Cytoscape only. Which means later would be good to check if there is a way to tell webpack to load only what we are using from Cytoscape (assuming we are not using everything).

VeeValidate occupies 31.8 kb (Vue itself is only 23.1 kb). As VeeValidate is going to be used in only few places (forms where the user submits information, like submit a workflow, change workflow settings, etc), we can re-evaluate vuelidate (#13 it was not maintained when I looked last time, but I know someone took over the development... not sure if it has picked up and is now well maintained again, but it's only 3.69 kb gzipped).

The whole GraphQL stack is quite heavy too, almost twice the size of Vue, occupying 45.9 kb (divided among the four libraries we are using, graphql, vue-apollo, apollo-boost, apollo-utilities). Axios is only 7.4 kb, but it is doing much less comparing to a GraphQL client.

[kinow]

Work branch: https://github.com/kinow/cylc-ui/tree/app-size-1

[kinow]

The project without vue-flag-icons, chartist, and the Cytoscape dependencies now creates a 199.7 Kb final application, which is below the ~240kb recommended threshold.

So our produced artefact size is OK for this alpha release @hjoliver :tada: this helps delivering the app faster to users upon first request, and may help during application runtime (depending on how we use the downloaded files, and whether there are any more files loaded dynamically).

[kinow]

Screenshot of the same output of vue ui after running build:report:

[hjoliver]

That's good. I don't know how we'll ever stay below 240kb once we get the graph view back in though...

[kinow]

That's only the size of the necessary data to load the app... not necessarily the complete size of the app. One technique to reduce the total loading time, is to load only the necessary for either the landing page, or for the most common features.

e.g. we can probably load everything related to user profile & settings dynamically, as I suspect most users will open the app to actually manage workflows.

So for the graph part... well, hopefully it won't increase too much... as long as it doesn't double the size of the artefacts, I think we should be all good.