Client - update build config (since Vite uses Rollup)

Note: remove unneeded lazy loading
This commit is contained in:
Sam 2023-11-15 12:16:59 +01:00
parent 8228db5b24
commit c62151b617
3 changed files with 71 additions and 84 deletions

View File

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

View File

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

View File

@ -4,6 +4,8 @@ import path from 'path'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
const zxcvbnRe = /@zxcvbn-ts\/language-(\w+-?\w+?)\//
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
@ -11,15 +13,42 @@ export default defineConfig({
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)), '@': fileURLToPath(new URL('./src', import.meta.url)),
'~@/scss': fileURLToPath(new URL('./src/scss', 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: { server: {
port: 3000 port: 3000,
}, },
build: { build: {
outDir: path.resolve(__dirname, '../fittrackee/dist'), outDir: path.resolve(__dirname, '../fittrackee/dist'),
emptyOutDir: true, 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'
}
},
},
},
},
}) })