Client - update build config (since Vite uses Rollup)

Note: remove unneeded lazy loading

fittrackee_client/src/router/index.ts

@@ -25,10 +25,22 @@ import createI18n from '@/i18n'
 import store from '@/store'
 import { AUTH_USER_STORE } from '@/store/constants'
 import AboutView from '@/views/AboutView.vue'
+import AdminView from '@/views/AdminView.vue'
 import Dashboard from '@/views/Dashboard.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
 import PrivacyPolicyView from '@/views/PrivacyPolicyView.vue'
+import StatisticsView from '@/views/StatisticsView.vue'
+import AccountConfirmationResendView from '@/views/user/AccountConfirmationResendView.vue'
+import AccountConfirmationView from '@/views/user/AccountConfirmationView.vue'
+import EmailUpdateView from '@/views/user/EmailUpdateView.vue'
 import LoginOrRegister from '@/views/user/LoginOrRegister.vue'
+import PasswordResetView from '@/views/user/PasswordResetView.vue'
+import ProfileView from '@/views/user/ProfileView.vue'
+import UserView from '@/views/user/UserView.vue'
+import AddWorkout from '@/views/workouts/AddWorkout.vue'
+import EditWorkout from '@/views/workouts/EditWorkout.vue'
+import Workout from '@/views/workouts/Workout.vue'
+import WorkoutsView from '@/views/workouts/WorkoutsView.vue'
 
 const { t } = createI18n.global
 
@@ -70,10 +82,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/account-confirmation',
     name: 'AccountConfirmation',
-    component: () =>
+    component: AccountConfirmationView,
-      import(
-        /* webpackChunkName: 'profile' */ '@/views/user/AccountConfirmationView.vue'
-      ),
     meta: {
       title: 'user.ACCOUNT_CONFIRMATION',
       withoutAuth: true,
@@ -82,10 +91,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/account-confirmation/resend',
     name: 'AccountConfirmationResend',
-    component: () =>
+    component: AccountConfirmationResendView,
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/AccountConfirmationResendView.vue'
-      ),
     props: { action: 'account-confirmation-resend' },
     meta: {
       title: 'buttons.ACCOUNT-CONFIRMATION-RESEND',
@@ -95,10 +101,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/account-confirmation/email-sent',
     name: 'AccountConfirmationEmailSend',
-    component: () =>
+    component: AccountConfirmationResendView,
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/AccountConfirmationResendView.vue'
-      ),
     props: { action: 'email-sent' },
     meta: {
       title: 'buttons.ACCOUNT-CONFIRMATION-RESEND',
@@ -108,10 +111,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/password-reset/sent',
     name: 'PasswordEmailSent',
-    component: () =>
+    component: () => PasswordResetView,
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
-      ),
     props: { action: 'request-sent' },
     meta: {
       title: 'user.PASSWORD_RESET',
@@ -121,10 +121,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/password-reset/request',
     name: 'PasswordResetRequest',
-    component: () =>
+    component: PasswordResetView,
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
-      ),
     props: { action: 'reset-request' },
     meta: {
       title: 'user.PASSWORD_RESET',
@@ -134,10 +131,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/password-reset/password-updated',
     name: 'PasswordUpdated',
-    component: () =>
+    component: PasswordResetView,
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
-      ),
     props: { action: 'password-updated' },
     meta: {
       title: 'user.PASSWORD_RESET',
@@ -147,10 +141,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/password-reset',
     name: 'PasswordReset',
-    component: () =>
+    component: PasswordResetView,
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
-      ),
     props: { action: 'reset' },
     meta: {
       title: 'user.PASSWORD_RESET',
@@ -160,10 +151,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/email-update',
     name: 'EmailUpdate',
-    component: () =>
+    component: EmailUpdateView,
-      import(
-        /* webpackChunkName: 'profile' */ '@/views/user/EmailUpdateView.vue'
-      ),
     meta: {
       title: 'user.EMAIL_UPDATE',
       withoutChecks: true,
@@ -172,8 +160,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/profile',
     name: 'Profile',
-    component: () =>
+    component: ProfileView,
-      import(/* webpackChunkName: 'profile' */ '@/views/user/ProfileView.vue'),
     children: [
       {
         path: '',
@@ -322,8 +309,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/statistics',
     name: 'Statistics',
-    component: () =>
+    component: StatisticsView,
-      import(/* webpackChunkName: 'statistics' */ '@/views/StatisticsView.vue'),
     meta: {
       title: 'statistics.STATISTICS',
     },
@@ -331,8 +317,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/users/:username',
     name: 'User',
-    component: () =>
+    component: UserView,
-      import(/* webpackChunkName: 'profile' */ '@/views/user/UserView.vue'),
     meta: {
       title: 'administration.USER',
     },
@@ -340,10 +325,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/workouts',
     name: 'Workouts',
-    component: () =>
+    component: WorkoutsView,
-      import(
-        /* webpackChunkName: 'workouts' */ '@/views/workouts/WorkoutsView.vue'
-      ),
     meta: {
       title: 'workouts.WORKOUT',
       count: 0,
@@ -352,8 +334,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/workouts/:workoutId',
     name: 'Workout',
-    component: () =>
+    component: Workout,
-      import(/* webpackChunkName: 'workouts' */ '@/views/workouts/Workout.vue'),
     props: { displaySegment: false },
     meta: {
       title: 'workouts.WORKOUT',
@@ -362,10 +343,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/workouts/:workoutId/edit',
     name: 'EditWorkout',
-    component: () =>
+    component: EditWorkout,
-      import(
-        /* webpackChunkName: 'workouts' */ '@/views/workouts/EditWorkout.vue'
-      ),
     meta: {
       title: 'workouts.EDIT_WORKOUT',
     },
@@ -373,8 +351,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/workouts/:workoutId/segment/:segmentId',
     name: 'WorkoutSegment',
-    component: () =>
+    component: Workout,
-      import(/* webpackChunkName: 'workouts' */ '@/views/workouts/Workout.vue'),
     props: { displaySegment: true },
     meta: {
       title: 'workouts.SEGMENT',
@@ -384,10 +361,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/workouts/add',
     name: 'AddWorkout',
-    component: () =>
+    component: AddWorkout,
-      import(
-        /* webpackChunkName: 'workouts' */ '@/views/workouts/AddWorkout.vue'
-      ),
     meta: {
       title: 'workouts.ADD_WORKOUT',
     },
@@ -395,8 +369,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/admin',
     name: 'Administration',
-    component: () =>
+    component: AdminView,
-      import(/* webpackChunkName: 'admin' */ '@/views/AdminView.vue'),
     children: [
       {
         path: '',
@@ -434,8 +407,7 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: 'users/:username',
         name: 'UserFromAdmin',
-        component: () =>
+        component: UserView,
-          import(/* webpackChunkName: 'profile' */ '@/views/user/UserView.vue'),
         props: { fromAdmin: true },
         meta: {
           title: 'admin.USER',

fittrackee_client/src/utils/password.ts

@@ -8,36 +8,22 @@ export const loadLanguagePackage = async (language: string) => {
   // fallback to english
   switch (language) {
     case 'fr':
-      return await import(
+      return await import('@zxcvbn-ts/language-fr')
-        /* webpackChunkName: "password.fr" */ '@zxcvbn-ts/language-fr'
-      )
     case 'de':
-      return await import(
+      return await import('@zxcvbn-ts/language-de')
-        /* webpackChunkName: "password.de" */ '@zxcvbn-ts/language-de'
-      )
     case 'it':
-      return await import(
+      return await import('@zxcvbn-ts/language-it')
-        /* webpackChunkName: "password.it" */ '@zxcvbn-ts/language-it'
-      )
     case 'es':
-      return await import(
+      return await import('@zxcvbn-ts/language-es-es')
-        /* webpackChunkName: "password.es" */ '@zxcvbn-ts/language-es-es'
-      )
     case 'pl':
-      return await import(
+      return await import('@zxcvbn-ts/language-pl')
-        /* webpackChunkName: "password.pl" */ '@zxcvbn-ts/language-pl'
-      )
     default:
-      return await import(
+      return await import('@zxcvbn-ts/language-en')
-        /* webpackChunkName: "password.en" */ '@zxcvbn-ts/language-en'
-      )
   }
 }
 
 export const setZxcvbnOptions = async (language: string) => {
-  const zxcvbnCommonPackage = await import(
+  const zxcvbnCommonPackage = await import('@zxcvbn-ts/language-common')
-    /* webpackChunkName: "password" */ '@zxcvbn-ts/language-common'
-  )
   const zxcvbnLanguagePackage = await loadLanguagePackage(language)
   const options = {
     graphs: zxcvbnCommonPackage.adjacencyGraphs,

fittrackee_client/vite.config.ts

@@ -4,6 +4,8 @@ import path from 'path'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 
+const zxcvbnRe = /@zxcvbn-ts\/language-(\w+-?\w+?)\//
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
@@ -11,15 +13,42 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
       '~@/scss': fileURLToPath(new URL('./src/scss', import.meta.url)),
-      '~@/assets': fileURLToPath(new URL('./src/assets', import.meta.url))
+      '~@/assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
-    }
+    },
   },
   server: {
-    port: 3000
+    port: 3000,
   },
   build: {
     outDir: path.resolve(__dirname, '../fittrackee/dist'),
     emptyOutDir: true,
-    assetsDir: 'static'
+    assetsDir: 'static',
+    rollupOptions: {
+      output: {
+        assetFileNames({ name }) {
+          if (name?.includes('pt-sans-v9-latin'))
+            return 'static/fonts/[name]-[hash][extname]'
+          if (name?.includes('.svg')) return 'static/img/[name]-[hash][extname]'
+          if (name?.includes('.css')) return 'static/css/[name]-[hash][extname]'
+          return 'static/[name]-[hash][extname]'
+        },
+        manualChunks: (id) => {
+          if (id.includes('@zxcvbn-ts/language-')) {
+            const matches = id.match(zxcvbnRe)
+            if (matches && matches.length === 2) {
+              return `password.${matches[1]}`
             }
+          }
+          if (id.includes('node_modules')) {
+            if (
+              id.includes('/chart.js') ||
+              id.includes('/chartjs-plugin-datalabels')
+            )
+              return 'charts'
+            if (id.includes('/leaflet')) return 'maps'
+          }
+        },
+      },
+    },
+  },
 })