Use lazy loading to decrease bundle size

src/components/VideoPlayer.vue

@@ -8,6 +8,7 @@
 import videojs from 'video.js'
 import qualityLevels from 'videojs-contrib-quality-levels'
 import { createQualitySelector } from '@/assets/qualitySelector'
+import 'video.js/dist/video-js.css'
 
 videojs.registerPlugin('qualityLevels', qualityLevels)
 

src/main.ts

@@ -1,11 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-
 import './assets/index.css'
 
-import 'video.js/dist/video-js.css'
-
 const app = createApp(App)
 
 import { OhVueIcon, addIcons } from 'oh-vue-icons'

src/router/index.ts

@@ -1,9 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import UserView from '../views/UserView.vue'
-import PageNotFound from '../views/PageNotFound.vue'
-import PrivacyPageView from '../views/PrivacyPageView.vue'
-import HomepageView from '../views/HomepageView.vue'
-import CategoryView from '../views/CategoryView.vue'
+const UserView = () => import('../views/UserView.vue')
+const PageNotFound = () => import('../views/PageNotFound.vue')
+const PrivacyPageView = () => import('../views/PrivacyPageView.vue')
+const HomepageView = () => import('../views/HomepageView.vue')
+const CategoryView = () => import('../views/CategoryView.vue')
+
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),