Skip to content
Snippets Groups Projects
Commit 2516625c authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt :koala:
Browse files

feat: use pages as bundle split-points

Up until now the application was crammed in a single JavaScript file
once bundled. This forces clients to download 1.1MiB of JavaScript all
at once.

Vite uses dynamic import statements as split-points for bundles. By
using dynamic imports for our routes we can delay the loading of some
data to a later point in time when the user actually needs it. We should
still try to reduce our overall bundle size.
parent bedde7bf
No related branches found
No related tags found
No related merge requests found
import AddOrEditPlaylist from '@/Pages/AddOrEditPlaylist.vue'
import Credits from '@/Pages/Credits.vue'
import EmissionManager from '@/Pages/EmissionManager.vue'
import FileManager from '@/Pages/FileManager.vue'
import Help from '@/Pages/Help.vue'
import Home from '@/Pages/Home.vue'
import Settings from '@/Pages/Settings.vue'
import ShowManager from '@/Pages/ShowManager.vue'
import { createRouter, createWebHistory } from 'vue-router'
const addOrEditPlaylistPage = () => import('@/Pages/AddOrEditPlaylist.vue')
const routes = [
{ path: '/', alias: '/home', name: 'home', component: Home },
{ path: '/shows', name: 'shows', component: ShowManager },
{ path: '/files', name: 'files', component: FileManager },
{ path: '/calendar', name: 'emissions', component: EmissionManager },
{ path: '/help', name: 'help', component: Help },
{ path: '/settings', name: 'settings', component: Settings },
{ path: '/credits', name: 'credits', component: Credits },
{ path: '/', alias: '/home', name: 'home', component: () => import('@/Pages/Home.vue') },
{ path: '/shows', name: 'shows', component: () => import('@/Pages/ShowManager.vue') },
{ path: '/files', name: 'files', component: () => import('@/Pages/FileManager.vue') },
{ path: '/calendar', name: 'emissions', component: () => import('@/Pages/EmissionManager.vue') },
{ path: '/help', name: 'help', component: () => import('@/Pages/Help.vue') },
{ path: '/settings', name: 'settings', component: () => import('@/Pages/Settings.vue') },
{ path: '/credits', name: 'credits', component: () => import('@/Pages/Credits.vue') },
{
path: '/playlist/new',
name: 'addPlaylist',
component: AddOrEditPlaylist,
component: addOrEditPlaylistPage,
props: { id: false },
},
{ path: '/playlist/:id', name: 'editPlaylist', component: AddOrEditPlaylist, props: true },
{ path: '/playlist/:id', name: 'editPlaylist', component: addOrEditPlaylistPage, props: true },
]
export default createRouter({
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment