A PWA for board games fans. It allows you to store your games, create teams, and collect statistics. It's built with MEVN stack, using Vue.js 2 and Vuetify.
Actual: When a user lands on the rounds page and he has some rounds there, the TheBarsChart.vue and TheTendenciesChart.vue components are loaded immediately, although user hasn't touched the tabs.
Expected: Only when user changes the tab the corresponding component should be loaded via dynamic imports.
Tech notes:
You can check the desired behaviour if you'll place a v-if directive on the actions slot. Then once it's truthy the component will be fetched via dynamic imports.
You can also make use of webpack magic comments to identify a chunk.
GamesEditDialog: () => import(/* webpackChunkName: 'GamesEditDialog' */ '@/components/GamesEditDialog.vue')
Actual: When a user lands on the rounds page and he has some rounds there, the
TheBarsChart.vueandTheTendenciesChart.vuecomponents are loaded immediately, although user hasn't touched the tabs.Expected: Only when user changes the tab the corresponding component should be loaded via dynamic imports.
Tech notes: You can check the desired behaviour if you'll place a v-if directive on the actions slot. Then once it's truthy the component will be fetched via dynamic imports. You can also make use of webpack magic comments to identify a chunk.
GamesEditDialog: () => import(/* webpackChunkName: 'GamesEditDialog' */ '@/components/GamesEditDialog.vue')