Added preload post build script

.github/workflows/deploy.yml

@@ -1,44 +1,44 @@
-name: Deploy to GitHub Pages
+# name: Deploy to GitHub Pages
 
-on:
+# on:
-  push:
+#   push:
-    branches: [main]
+#     branches: [main]
-  pull_request:
+#   pull_request:
-    branches: [main]
+#     branches: [main]
 
-jobs:
+# jobs:
-  build-and-deploy:
+#   build-and-deploy:
-    runs-on: ubuntu-latest
+#     runs-on: ubuntu-latest
 
-    steps:
+#     steps:
-      - name: Checkout code
+#       - name: Checkout code
-        uses: actions/checkout@v4
+#         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+#       - uses: pnpm/action-setup@v4
-        name: Install pnpm
+#         name: Install pnpm
-        with:
+#         with:
-          version: 10
+#           version: 10
-          run_install: false
+#           run_install: false
 
-      - name: Install Node.js
+#       - name: Install Node.js
-        uses: actions/setup-node@v4
+#         uses: actions/setup-node@v4
-        with:
+#         with:
-          node-version: 20
+#           node-version: 20
-          cache: 'pnpm'
+#           cache: 'pnpm'
 
-      - name: Install dependencies
+#       - name: Install dependencies
-        run: pnpm install
+#         run: pnpm install
 
-      - name: Build project
+#       - name: Build project
-        run: DEPLOY_ENV=GH_PAGES pnpm build
+#         run: DEPLOY_ENV=GH_PAGES pnpm build
 
-      - name: Copy index.html to 404.html
+#       - name: Copy index.html to 404.html
-        run: cp dist/index.html dist/404.html
+#         run: cp dist/index.html dist/404.html
 
-      - name: Deploy to GitHub Pages
+#       - name: Deploy to GitHub Pages
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+#         if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-        uses: peaceiris/actions-gh-pages@v4
+#         uses: peaceiris/actions-gh-pages@v4
-        with:
+#         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+#           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+#           publish_dir: ./dist
-          publish_branch: gh-pages
+#           publish_branch: gh-pages

package.json

@@ -8,12 +8,13 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "run-p type-check \"build-only {@}\" -- && npm run inject-preloads",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "inject-preloads": "node scripts/inject-preloads.js"
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.9.0",
@@ -45,4 +46,4 @@
     "vite-plugin-vue-devtools": "^8.0.3",
     "vue-tsc": "^3.1.2"
   }
-}
+}

scripts/inject-preloads.js

@@ -0,0 +1,42 @@
+import fs from 'fs'
+import path from 'path'
+
+const distDir = path.resolve('dist')
+const manifestPath = path.join(distDir, '.vite/manifest.json')
+const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))
+
+const indexPath = path.join(distDir, 'index.html')
+let html = fs.readFileSync(indexPath, 'utf-8')
+
+const filesToPreload = new Set()
+
+function collectFiles(entryKey) {
+  const chunk = manifest[entryKey]
+  if (!chunk) return
+  filesToPreload.add(chunk.file)
+  for (const imp of chunk.imports || []) {
+    if (imp === 'index.html') continue // skip entrypoint
+    const dep = manifest[imp]
+    if (dep) {
+      filesToPreload.add(dep.file)
+      collectFiles(imp) // recurse for transitive deps
+    }
+  }
+}
+
+// automatically find all .vue entries that are dynamic (lazy‑loaded)
+for (const key of Object.keys(manifest)) {
+  if (key.endsWith('.vue') && manifest[key].isDynamicEntry) {
+    collectFiles(key)
+  }
+}
+
+for (const f of filesToPreload) {
+  const tag = `<link rel="modulepreload" href="/${f}">`
+  if (!html.includes(tag)) {
+    html = html.replace('</head>', `  ${tag}\n</head>`)
+  }
+}
+
+fs.writeFileSync(indexPath, html)
+console.log('Preload tags injected')

src/main.ts

@@ -15,3 +15,4 @@ app.use(autoAnimatePlugin)
 app.use(MotionPlugin)
 
 app.mount('#app')
+

vite.config.ts

@@ -20,4 +20,7 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  build: {
+    manifest: true
+  },
 })