-
Konrad Mohrfeldt authoredUp 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.
Konrad Mohrfeldt authoredUp 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.
router.js 1.06 KiB
import { createRouter, createWebHistory } from 'vue-router'
const addOrEditPlaylistPage = () => import('@/Pages/AddOrEditPlaylist.vue')
const routes = [
{ 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: addOrEditPlaylistPage,
props: { id: false },
},
{ path: '/playlist/:id', name: 'editPlaylist', component: addOrEditPlaylistPage, props: true },
]
export default createRouter({
history: createWebHistory(),
routes,
})