Client - add lazy loading in router

fittrackee_client/src/App.vue

@@ -23,21 +23,6 @@
 </template>
 
 <script lang="ts">
-  import {
-    Chart,
-    BarElement,
-    LineElement,
-    PointElement,
-    Legend,
-    Title,
-    Tooltip,
-    Filler,
-    BarController,
-    CategoryScale,
-    LineController,
-    LinearScale,
-  } from 'chart.js'
-  import ChartDataLabels from 'chartjs-plugin-datalabels'
   import {
     ComputedRef,
     computed,
@@ -54,21 +39,6 @@
   import { IAppConfig } from '@/types/application'
   import { useStore } from '@/use/useStore'
 
-  Chart.register(
-    BarElement,
-    LineElement,
-    PointElement,
-    Legend,
-    Title,
-    Tooltip,
-    Filler,
-    BarController,
-    CategoryScale,
-    LineController,
-    LinearScale,
-    ChartDataLabels
-  )
-
   export default defineComponent({
     name: 'App',
     components: {

fittrackee_client/src/main.ts

@@ -1,3 +1,18 @@
+import {
+  Chart,
+  BarElement,
+  LineElement,
+  PointElement,
+  Legend,
+  Title,
+  Tooltip,
+  Filler,
+  BarController,
+  CategoryScale,
+  LineController,
+  LinearScale,
+} from 'chart.js'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
 import { createApp } from 'vue'
 
 import './registerServiceWorker'
@@ -10,6 +25,21 @@ import { customComponents } from '@/custom-components'
 import { clickOutsideDirective } from '@/directives'
 import { sportColors } from '@/utils/sports'
 
+Chart.register(
+  BarElement,
+  LineElement,
+  PointElement,
+  Legend,
+  Title,
+  Tooltip,
+  Filler,
+  BarController,
+  CategoryScale,
+  LineController,
+  LinearScale,
+  ChartDataLabels
+)
+
 const app = createApp(App)
   .provide('sportColors', sportColors)
   .use(i18n)

fittrackee_client/src/router/index.ts

@@ -9,16 +9,6 @@ import UserPictureEdition from '@/components/User/ProfileEdition/UserPictureEdit
 import UserPreferencesEdition from '@/components/User/ProfileEdition/UserPreferencesEdition.vue'
 import store from '@/store'
 import { USER_STORE } from '@/store/constants'
-import Dashboard from '@/views/DashBoard.vue'
-import LoginOrRegister from '@/views/LoginOrRegister.vue'
-import NotFoundView from '@/views/NotFoundView.vue'
-import PasswordResetView from '@/views/PasswordResetView.vue'
-import ProfileView from '@/views/ProfileView.vue'
-import StatisticsView from '@/views/StatisticsView.vue'
-import AddWorkout from '@/views/workouts/AddWorkout.vue'
-import EditWorkout from '@/views/workouts/EditWorkout.vue'
-import Workout from '@/views/workouts/Workout.vue'
-import Workouts from '@/views/workouts/WorkoutsView.vue'
 
 const getTabFromPath = (path: string): string => {
   const regex = /(\/profile)(\/edit)*(\/*)/
@@ -30,48 +20,56 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Dashboard',
-    component: Dashboard,
+    component: () =>
+      import(/* webpackChunkName: 'main' */ '@/views/DashBoard.vue'),
   },
   {
     path: '/login',
     name: 'Login',
-    component: LoginOrRegister,
+    component: () =>
+      import(/* webpackChunkName: 'main' */ '@/views/LoginOrRegister.vue'),
     props: { action: 'login' },
   },
   {
     path: '/register',
     name: 'Register',
-    component: LoginOrRegister,
+    component: () =>
+      import(/* webpackChunkName: 'main' */ '@/views/LoginOrRegister.vue'),
     props: { action: 'register' },
   },
   {
     path: '/password-reset/sent',
     name: 'PasswordEmailSent',
-    component: PasswordResetView,
+    component: () =>
+      import(/* webpackChunkName: 'reset' */ '@/views/PasswordResetView.vue'),
     props: { action: 'request-sent' },
   },
   {
     path: '/password-reset/request',
     name: 'PasswordResetRequest',
-    component: PasswordResetView,
+    component: () =>
+      import(/* webpackChunkName: 'reset' */ '@/views/PasswordResetView.vue'),
     props: { action: 'reset-request' },
   },
   {
     path: '/password-reset/password-updated',
     name: 'PasswordUpdated',
-    component: PasswordResetView,
+    component: () =>
+      import(/* webpackChunkName: 'reset' */ '@/views/PasswordResetView.vue'),
     props: { action: 'password-updated' },
   },
   {
     path: '/password-reset',
     name: 'PasswordReset',
-    component: PasswordResetView,
+    component: () =>
+      import(/* webpackChunkName: 'reset' */ '@/views/PasswordResetView.vue'),
     props: { action: 'reset' },
   },
   {
     path: '/profile',
     name: 'Profile',
-    component: ProfileView,
+    component: () =>
+      import(/* webpackChunkName: 'profile' */ '@/views/ProfileView.vue'),
     children: [
       {
         path: '',
@@ -123,36 +121,53 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/statistics',
     name: 'Statistics',
-    component: StatisticsView,
+    component: () =>
+      import(/* webpackChunkName: 'main' */ '@/views/StatisticsView.vue'),
   },
   {
     path: '/workouts',
     name: 'Workouts',
-    component: Workouts,
+    component: () =>
+      import(
+        /* webpackChunkName: 'workouts' */ '@/views/workouts/WorkoutsView.vue'
+      ),
   },
   {
     path: '/workouts/:workoutId',
     name: 'Workout',
-    component: Workout,
+    component: () =>
+      import(/* webpackChunkName: 'workouts' */ '@/views/workouts/Workout.vue'),
     props: { displaySegment: false },
   },
   {
     path: '/workouts/:workoutId/edit',
     name: 'EditWorkout',
-    component: EditWorkout,
+    component: () =>
+      import(
+        /* webpackChunkName: 'workouts' */ '@/views/workouts/EditWorkout.vue'
+      ),
   },
   {
     path: '/workouts/:workoutId/segment/:segmentId',
     name: 'WorkoutSegment',
-    component: Workout,
+    component: () =>
+      import(/* webpackChunkName: 'workouts' */ '@/views/workouts/Workout.vue'),
     props: { displaySegment: true },
   },
   {
     path: '/workouts/add',
     name: 'AddWorkout',
-    component: AddWorkout,
+    component: () =>
+      import(
+        /* webpackChunkName: 'workouts' */ '@/views/workouts/AddWorkout.vue'
+      ),
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'not-found',
+    component: () =>
+      import(/* webpackChunkName: 'main' */ '@/views/NotFoundView.vue'),
   },
-  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFoundView },
 ]
 
 const router = createRouter({