[web] Use of lazy loading routes

web-src/src/router/index.js

@@ -1,45 +1,5 @@
 import * as types from '@/store/mutation_types'
 import { createRouter, createWebHashHistory } from 'vue-router'
-import PageAbout from '@/pages/PageAbout.vue'
-import PageAlbum from '@/pages/PageAlbum.vue'
-import PageAlbumSpotify from '@/pages/PageAlbumSpotify.vue'
-import PageAlbums from '@/pages/PageAlbums.vue'
-import PageArtist from '@/pages/PageArtist.vue'
-import PageArtistSpotify from '@/pages/PageArtistSpotify.vue'
-import PageArtistTracks from '@/pages/PageArtistTracks.vue'
-import PageArtists from '@/pages/PageArtists.vue'
-import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
-import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
-import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue'
-import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
-import PageAudiobooksGenres from '@/pages/PageAudiobooksGenres.vue'
-import PageComposerAlbums from '@/pages/PageComposerAlbums.vue'
-import PageComposerTracks from '@/pages/PageComposerTracks.vue'
-import PageComposers from '@/pages/PageComposers.vue'
-import PageFiles from '@/pages/PageFiles.vue'
-import PageGenreAlbums from '@/pages/PageGenreAlbums.vue'
-import PageGenreTracks from '@/pages/PageGenreTracks.vue'
-import PageGenres from '@/pages/PageGenres.vue'
-import PageMusic from '@/pages/PageMusic.vue'
-import PageMusicSpotify from '@/pages/PageMusicSpotify.vue'
-import PageMusicSpotifyNewReleases from '@/pages/PageMusicSpotifyNewReleases.vue'
-import PageMusicSpotifyFeaturedPlaylists from '@/pages/PageMusicSpotifyFeaturedPlaylists.vue'
-import PageMusicRecentlyAdded from '@/pages/PageMusicRecentlyAdded.vue'
-import PageMusicRecentlyPlayed from '@/pages/PageMusicRecentlyPlayed.vue'
-import PageNowPlaying from '@/pages/PageNowPlaying.vue'
-import PagePlaylistFolder from '@/pages/PagePlaylistFolder.vue'
-import PagePlaylistTracks from '@/pages/PagePlaylistTracks.vue'
-import PagePlaylistTracksSpotify from '@/pages/PagePlaylistTracksSpotify.vue'
-import PagePodcast from '@/pages/PagePodcast.vue'
-import PagePodcasts from '@/pages/PagePodcasts.vue'
-import PageQueue from '@/pages/PageQueue.vue'
-import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
-import PageSettingsArtwork from '@/pages/PageSettingsArtwork.vue'
-import PageSettingsOnlineServices from '@/pages/PageSettingsOnlineServices.vue'
-import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
-import PageRadioStreams from '@/pages/PageRadioStreams.vue'
-import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
-import PageSearchSpotify from '@/pages/PageSearchSpotify.vue'
 import store from '@/store'
 
 const TOP_WITH_TABS = 140
@@ -49,78 +9,78 @@ export const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
-      component: PageAbout,
+      component: () => import('@/pages/PageAbout.vue'),
       name: 'about',
       path: '/about'
     },
     {
-      component: PageAlbum,
+      component: () => import('@/pages/PageAlbum.vue'),
       meta: { show_progress: true },
       name: 'music-album',
       path: '/music/albums/:id'
     },
     {
-      component: PageAlbumSpotify,
+      component: () => import('@/pages/PageAlbumSpotify.vue'),
       meta: { show_progress: true },
       name: 'music-spotify-album',
       path: '/music/spotify/albums/:id'
     },
     {
-      component: PageAlbums,
+      component: () => import('@/pages/PageAlbums.vue'),
       meta: { has_index: true, has_tabs: true, show_progress: true },
       name: 'music-albums',
       path: '/music/albums'
     },
     {
-      component: PageArtist,
+      component: () => import('@/pages/PageArtist.vue'),
-      meta: { show_progress: true, has_index: true },
+      meta: { has_index: true, show_progress: true },
       name: 'music-artist',
       path: '/music/artists/:id'
     },
     {
-      component: PageArtistSpotify,
+      component: () => import('@/pages/PageArtistSpotify.vue'),
       meta: { show_progress: true },
       name: 'music-spotify-artist',
       path: '/music/spotify/artists/:id'
     },
     {
-      component: PageArtists,
+      component: () => import('@/pages/PageArtists.vue'),
       meta: { has_index: true, has_tabs: true, show_progress: true },
       name: 'music-artists',
       path: '/music/artists'
     },
     {
-      component: PageArtistTracks,
+      component: () => import('@/pages/PageArtistTracks.vue'),
       meta: { has_index: true, show_progress: true },
       name: 'music-artist-tracks',
       path: '/music/artists/:id/tracks'
     },
     {
-      component: PageAudiobooksAlbum,
+      component: () => import('@/pages/PageAudiobooksAlbum.vue'),
       meta: { show_progress: true },
       name: 'audiobooks-album',
       path: '/audiobooks/albums/:id'
     },
     {
-      component: PageAudiobooksAlbums,
+      component: () => import('@/pages/PageAudiobooksAlbums.vue'),
       meta: { has_index: true, has_tabs: true, show_progress: true },
       name: 'audiobooks-albums',
       path: '/audiobooks/albums'
     },
     {
-      component: PageAudiobooksArtist,
+      component: () => import('@/pages/PageAudiobooksArtist.vue'),
       meta: { show_progress: true },
       name: 'audiobooks-artist',
       path: '/audiobooks/artists/:id'
     },
     {
-      component: PageAudiobooksArtists,
+      component: () => import('@/pages/PageAudiobooksArtists.vue'),
       meta: { has_index: true, has_tabs: true, show_progress: true },
       name: 'audiobooks-artists',
       path: '/audiobooks/artists'
     },
     {
-      component: PageAudiobooksGenres,
+      component: () => import('@/pages/PageAudiobooksGenres.vue'),
       meta: { has_index: true, has_tabs: true, show_progress: true },
       name: 'audiobooks-genres',
       path: '/audiobooks/genres'
@@ -136,85 +96,85 @@ export const router = createRouter({
       redirect: { name: 'music-history' }
     },
     {
-      component: PageMusic,
+      component: () => import('@/pages/PageMusic.vue'),
       meta: { has_tabs: true, show_progress: true },
       name: 'music-history',
       path: '/music/history'
     },
     {
-      component: PageMusicRecentlyAdded,
+      component: () => import('@/pages/PageMusicRecentlyAdded.vue'),
       meta: { has_tabs: true, show_progress: true },
       name: 'music-recently-added',
       path: '/music/recently-added'
     },
     {
-      component: PageMusicRecentlyPlayed,
+      component: () => import('@/pages/PageMusicRecentlyPlayed.vue'),
       meta: { has_tabs: true, show_progress: true },
       name: 'music-recently-played',
       path: '/music/recently-played'
     },
     {
-      component: PageMusicSpotify,
+      component: () => import('@/pages/PageMusicSpotify.vue'),
       meta: { has_tabs: true, show_progress: true },
       name: 'music-spotify',
       path: '/music/spotify'
     },
     {
-      component: PageMusicSpotifyFeaturedPlaylists,
+      component: () => import('@/pages/PageMusicSpotifyFeaturedPlaylists.vue'),
       meta: { has_tabs: true, show_progress: true },
       name: 'music-spotify-featured-playlists',
       path: '/music/spotify/featured-playlists'
     },
     {
-      component: PageMusicSpotifyNewReleases,
+      component: () => import('@/pages/PageMusicSpotifyNewReleases.vue'),
       meta: { has_tabs: true, show_progress: true },
       name: 'music-spotify-new-releases',
       path: '/music/spotify/new-releases'
     },
     {
-      component: PageComposerAlbums,
+      component: () => import('@/pages/PageComposerAlbums.vue'),
-      meta: { show_progress: true, has_index: true },
+      meta: { has_index: true, show_progress: true },
       name: 'music-composer-albums',
       path: '/music/composers/:name/albums'
     },
     {
-      component: PageComposerTracks,
+      component: () => import('@/pages/PageComposerTracks.vue'),
       meta: { has_index: true, show_progress: true },
       name: 'music-composer-tracks',
       path: '/music/composers/:name/tracks'
     },
     {
-      component: PageComposers,
+      component: () => import('@/pages/PageComposers.vue'),
       meta: { has_index: true, has_tabs: true, show_progress: true },
       name: 'music-composers',
       path: '/music/composers'
     },
     {
-      component: PageFiles,
+      component: () => import('@/pages/PageFiles.vue'),
       meta: { show_progress: true },
       name: 'files',
       path: '/files'
     },
     {
-      component: PageGenreAlbums,
+      component: () => import('@/pages/PageGenreAlbums.vue'),
       meta: { has_index: true, show_progress: true },
       name: 'genre-albums',
       path: '/genres/:name/albums'
     },
     {
-      component: PageGenreTracks,
+      component: () => import('@/pages/PageGenreTracks.vue'),
       meta: { has_index: true, show_progress: true },
       name: 'genre-tracks',
       path: '/genres/:name/tracks'
     },
     {
-      component: PageGenres,
+      component: () => import('@/pages/PageGenres.vue'),
       meta: { has_index: true, has_tabs: true, show_progress: true },
       name: 'music-genres',
       path: '/music/genres'
     },
     {
-      component: PageNowPlaying,
+      component: () => import('@/pages/PageNowPlaying.vue'),
       name: 'now-playing',
       path: '/now-playing'
     },
@@ -224,73 +184,73 @@ export const router = createRouter({
       redirect: { name: 'playlist-folder', params: { id: 0 } }
     },
     {
-      component: PagePlaylistFolder,
+      component: () => import('@/pages/PagePlaylistFolder.vue'),
       meta: { show_progress: true },
       name: 'playlist-folder',
       path: '/playlists/:id'
     },
     {
-      component: PagePlaylistTracks,
+      component: () => import('@/pages/PagePlaylistTracks.vue'),
       meta: { show_progress: true },
       name: 'playlist',
       path: '/playlists/:id/tracks'
     },
     {
-      component: PagePlaylistTracksSpotify,
+      component: () => import('@/pages/PagePlaylistTracksSpotify.vue'),
       meta: { show_progress: true },
       name: 'playlist-spotify',
       path: '/playlists/spotify/:id/tracks'
     },
     {
-      component: PagePodcast,
+      component: () => import('@/pages/PagePodcast.vue'),
       meta: { show_progress: true },
       name: 'podcast',
       path: '/podcasts/:id'
     },
     {
-      component: PagePodcasts,
+      component: () => import('@/pages/PagePodcasts.vue'),
       meta: { show_progress: true },
       name: 'podcasts',
       path: '/podcasts'
     },
     {
-      component: PageRadioStreams,
+      component: () => import('@/pages/PageRadioStreams.vue'),
       meta: { show_progress: true },
       name: 'radio',
       path: '/radio'
     },
     {
-      component: PageQueue,
+      component: () => import('@/pages/PageQueue.vue'),
       name: 'queue',
       path: '/'
     },
     {
-      component: PageSearchLibrary,
+      component: () => import('@/pages/PageSearchLibrary.vue'),
       name: 'search-library',
       path: '/search/library'
     },
     {
-      component: PageSearchSpotify,
+      component: () => import('@/pages/PageSearchSpotify.vue'),
       name: 'search-spotify',
       path: '/search/spotify'
     },
     {
-      component: PageSettingsWebinterface,
+      component: () => import('@/pages/PageSettingsWebinterface.vue'),
       name: 'settings-webinterface',
       path: '/settings/webinterface'
     },
     {
-      component: PageSettingsArtwork,
+      component: () => import('@/pages/PageSettingsArtwork.vue'),
       name: 'settings-artwork',
       path: '/settings/artwork'
     },
     {
-      component: PageSettingsOnlineServices,
+      component: () => import('@/pages/PageSettingsOnlineServices.vue'),
       name: 'settings-online-services',
       path: '/settings/online-services'
     },
     {
-      component: PageSettingsRemotesOutputs,
+      component: () => import('@/pages/PageSettingsRemotesOutputs.vue'),
       name: 'settings-remotes-outputs',
       path: '/settings/remotes-outputs'
     }
@@ -312,7 +272,7 @@ export const router = createRouter({
        * As there is no transition, there is no timeout added
        */
       const top = to.meta.has_tabs ? TOP_WITH_TABS : TOP_WITHOUT_TABS
-      return { el: to.hash, top, behavior: 'smooth' }
+      return { behavior: 'smooth', el: to.hash, top }
     }
 
     if (to.hash) {