From c62151b61783df39374c060717dc95617837feb9 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 15 Nov 2023 12:16:59 +0100 Subject: [PATCH] Client - update build config (since Vite uses Rollup) Note: remove unneeded lazy loading --- fittrackee_client/src/router/index.ts | 88 +++++++++---------------- fittrackee_client/src/utils/password.ts | 28 ++------ fittrackee_client/vite.config.ts | 39 +++++++++-- 3 files changed, 71 insertions(+), 84 deletions(-) diff --git a/fittrackee_client/src/router/index.ts b/fittrackee_client/src/router/index.ts index eabfac6c..382df094 100644 --- 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 = [ { 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 = [ { 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 = [ { 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 = [ { 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 = [ { 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 = [ { 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 = [ { 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 = [ { 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 = [ { path: '/profile', name: 'Profile', - component: () => - import(/* webpackChunkName: 'profile' */ '@/views/user/ProfileView.vue'), + component: ProfileView, children: [ { path: '', @@ -322,8 +309,7 @@ const routes: Array = [ { path: '/statistics', name: 'Statistics', - component: () => - import(/* webpackChunkName: 'statistics' */ '@/views/StatisticsView.vue'), + component: StatisticsView, meta: { title: 'statistics.STATISTICS', }, @@ -331,8 +317,7 @@ const routes: Array = [ { 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 = [ { 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 = [ { 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 = [ { 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 = [ { 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 = [ { 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 = [ { path: '/admin', name: 'Administration', - component: () => - import(/* webpackChunkName: 'admin' */ '@/views/AdminView.vue'), + component: AdminView, children: [ { path: '', @@ -434,8 +407,7 @@ const routes: Array = [ { path: 'users/:username', name: 'UserFromAdmin', - component: () => - import(/* webpackChunkName: 'profile' */ '@/views/user/UserView.vue'), + component: UserView, props: { fromAdmin: true }, meta: { title: 'admin.USER', diff --git a/fittrackee_client/src/utils/password.ts b/fittrackee_client/src/utils/password.ts index 1abf0fe1..de35bbc6 100644 --- 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, diff --git a/fittrackee_client/vite.config.ts b/fittrackee_client/vite.config.ts index 66702d4c..e30139f4 100644 --- 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' + } + }, + }, + }, + }, })