Client - update build config (since Vite uses Rollup)

Note: remove unneeded lazy loading
2023-11-15 12:16:59 +01:00
parent 8228db5b24
commit c62151b617
3 changed files with 71 additions and 84 deletions
--- a/fittrackee_client/src/router/index.ts
+++ b/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: () =>
-      import(
-        /* webpackChunkName: 'profile' */ '@/views/user/AccountConfirmationView.vue'
-      ),
+    component: AccountConfirmationView,
    meta: {
      title: 'user.ACCOUNT_CONFIRMATION',
      withoutAuth: true,
@@ -82,10 +91,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/account-confirmation/resend',
    name: 'AccountConfirmationResend',
-    component: () =>
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/AccountConfirmationResendView.vue'
-      ),
+    component: AccountConfirmationResendView,
    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: () =>
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/AccountConfirmationResendView.vue'
-      ),
+    component: AccountConfirmationResendView,
    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: () =>
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
-      ),
+    component: () => PasswordResetView,
    props: { action: 'request-sent' },
    meta: {
      title: 'user.PASSWORD_RESET',
@@ -121,10 +121,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/password-reset/request',
    name: 'PasswordResetRequest',
-    component: () =>
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
-      ),
+    component: PasswordResetView,
    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: () =>
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
-      ),
+    component: PasswordResetView,
    props: { action: 'password-updated' },
    meta: {
      title: 'user.PASSWORD_RESET',
@@ -147,10 +141,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/password-reset',
    name: 'PasswordReset',
-    component: () =>
-      import(
-        /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue'
-      ),
+    component: PasswordResetView,
    props: { action: 'reset' },
    meta: {
      title: 'user.PASSWORD_RESET',
@@ -160,10 +151,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/email-update',
    name: 'EmailUpdate',
-    component: () =>
-      import(
-        /* webpackChunkName: 'profile' */ '@/views/user/EmailUpdateView.vue'
-      ),
+    component: EmailUpdateView,
    meta: {
      title: 'user.EMAIL_UPDATE',
      withoutChecks: true,
@@ -172,8 +160,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/profile',
    name: 'Profile',
-    component: () =>
-      import(/* webpackChunkName: 'profile' */ '@/views/user/ProfileView.vue'),
+    component: ProfileView,
    children: [
      {
        path: '',
@@ -322,8 +309,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/statistics',
    name: 'Statistics',
-    component: () =>
-      import(/* webpackChunkName: 'statistics' */ '@/views/StatisticsView.vue'),
+    component: StatisticsView,
    meta: {
      title: 'statistics.STATISTICS',
    },
@@ -331,8 +317,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/users/:username',
    name: 'User',
-    component: () =>
-      import(/* webpackChunkName: 'profile' */ '@/views/user/UserView.vue'),
+    component: UserView,
    meta: {
      title: 'administration.USER',
    },
@@ -340,10 +325,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/workouts',
    name: 'Workouts',
-    component: () =>
-      import(
-        /* webpackChunkName: 'workouts' */ '@/views/workouts/WorkoutsView.vue'
-      ),
+    component: WorkoutsView,
    meta: {
      title: 'workouts.WORKOUT',
      count: 0,
@@ -352,8 +334,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/workouts/:workoutId',
    name: 'Workout',
-    component: () =>
-      import(/* webpackChunkName: 'workouts' */ '@/views/workouts/Workout.vue'),
+    component: Workout,
    props: { displaySegment: false },
    meta: {
      title: 'workouts.WORKOUT',
@@ -362,10 +343,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/workouts/:workoutId/edit',
    name: 'EditWorkout',
-    component: () =>
-      import(
-        /* webpackChunkName: 'workouts' */ '@/views/workouts/EditWorkout.vue'
-      ),
+    component: EditWorkout,
    meta: {
      title: 'workouts.EDIT_WORKOUT',
    },
@@ -373,8 +351,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/workouts/:workoutId/segment/:segmentId',
    name: 'WorkoutSegment',
-    component: () =>
-      import(/* webpackChunkName: 'workouts' */ '@/views/workouts/Workout.vue'),
+    component: Workout,
    props: { displaySegment: true },
    meta: {
      title: 'workouts.SEGMENT',
@@ -384,10 +361,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/workouts/add',
    name: 'AddWorkout',
-    component: () =>
-      import(
-        /* webpackChunkName: 'workouts' */ '@/views/workouts/AddWorkout.vue'
-      ),
+    component: AddWorkout,
    meta: {
      title: 'workouts.ADD_WORKOUT',
    },
@@ -395,8 +369,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/admin',
    name: 'Administration',
-    component: () =>
-      import(/* webpackChunkName: 'admin' */ '@/views/AdminView.vue'),
+    component: AdminView,
    children: [
      {
        path: '',
@@ -434,8 +407,7 @@ const routes: Array<RouteRecordRaw> = [
      {
        path: 'users/:username',
        name: 'UserFromAdmin',
-        component: () =>
-          import(/* webpackChunkName: 'profile' */ '@/views/user/UserView.vue'),
+        component: UserView,
        props: { fromAdmin: true },
        meta: {
          title: 'admin.USER',
--- a/fittrackee_client/src/utils/password.ts
+++ b/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(
-        /* webpackChunkName: "password.fr" */ '@zxcvbn-ts/language-fr'
-      )
+      return await import('@zxcvbn-ts/language-fr')
    case 'de':
-      return await import(
-        /* webpackChunkName: "password.de" */ '@zxcvbn-ts/language-de'
-      )
+      return await import('@zxcvbn-ts/language-de')
    case 'it':
-      return await import(
-        /* webpackChunkName: "password.it" */ '@zxcvbn-ts/language-it'
-      )
+      return await import('@zxcvbn-ts/language-it')
    case 'es':
-      return await import(
-        /* webpackChunkName: "password.es" */ '@zxcvbn-ts/language-es-es'
-      )
+      return await import('@zxcvbn-ts/language-es-es')
    case 'pl':
-      return await import(
-        /* webpackChunkName: "password.pl" */ '@zxcvbn-ts/language-pl'
-      )
+      return await import('@zxcvbn-ts/language-pl')
    default:
-      return await import(
-        /* webpackChunkName: "password.en" */ '@zxcvbn-ts/language-en'
-      )
+      return await import('@zxcvbn-ts/language-en')
  }
 }

 export const setZxcvbnOptions = async (language: string) => {
-  const zxcvbnCommonPackage = await import(
-    /* webpackChunkName: "password" */ '@zxcvbn-ts/language-common'
-  )
+  const zxcvbnCommonPackage = await import('@zxcvbn-ts/language-common')
  const zxcvbnLanguagePackage = await loadLanguagePackage(language)
  const options = {
    graphs: zxcvbnCommonPackage.adjacencyGraphs,
--- a/fittrackee_client/vite.config.ts
+++ b/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'
+          }
+        },
+      },
+    },
+  },
 })