🎨 Update package.json to include rollup-plugin-visualizer and refactor router to use lazy loading for components

Author: Howardzhangdqs

package.json

@@ -18,6 +18,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-mathjax3": "^4.3.2",
     "marked": "^15.0.6",
+    "rollup-plugin-visualizer": "^6.0.3",
     "vite-plugin-singlefile": "^2.1.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"

src/router/index.ts

@@ -1,21 +1,19 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-import EmbedView from '../views/EmbedView.vue'
+import { createRouter, createWebHashHistory } from "vue-router";
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: HomeView
+      path: "/",
+      name: "home",
+      component: () => import("../views/HomeView.vue")
     },
     {
-      path: '/embed',
-      name: 'embed',
-      component: EmbedView
+      path: "/embed",
+      name: "embed",
+      component: () => import("../views/EmbedView.vue")
     }
   ]
-})
+});
 
-export default router
+export default router;

vite.config.ts

@@ -6,6 +6,7 @@ import vueJsx from "@vitejs/plugin-vue-jsx";
 import vueDevTools from "vite-plugin-vue-devtools";
 import { viteSingleFile } from "vite-plugin-singlefile";
 import process from "node:process";
+import { visualizer } from "rollup-plugin-visualizer";
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -14,11 +15,22 @@ export default defineConfig({
     vueJsx(),
     vueDevTools(),
     process.env.VITE_SINGLE_FILE_RENDER === "True" ? viteSingleFile() : null,
+    visualizer({ open: false, filename: "./dist/stats.html" })
   ],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url))
     },
   },
   base: "./",
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          "vendor-markdown": ["markdown-it", "marked", "markdown-it-mathjax3"],
+          "vendor-highlight": ["highlight.js"],
+        }
+      }
+    }
+  }
 });