feat(web): bundle assets into single html with vite-plugin-singlefile

notdp · notdp · commit ec079e4c17a4 · 2025-12-29T21:47:20.000+08:00
diff --git a/install.ps1 b/install.ps1
@@ -56,15 +56,11 @@ Invoke-WebRequest -Uri "$serveUrl`?ts=$ts" -OutFile $servePath -UseBasicParsing
 # Prepare web dashboard assets to $OROIO_DIR\web
 Write-Info "Preparing web dashboard assets..."
 $webDst = Join-Path $OROIO_DIR "web"
-$assetsDst = Join-Path $webDst "assets"
 if (-not (Test-Path $webDst)) { New-Item -ItemType Directory -Path $webDst -Force | Out-Null }
-if (-not (Test-Path $assetsDst)) { New-Item -ItemType Directory -Path $assetsDst -Force | Out-Null }
 
 $webBase = "https://github.com/notdp/oroio/releases/download/web-dist"
 try {
     Invoke-WebRequest -Uri "$webBase/index.html`?ts=$ts" -OutFile (Join-Path $webDst "index.html") -UseBasicParsing
-    Invoke-WebRequest -Uri "$webBase/index.js`?ts=$ts" -OutFile (Join-Path $assetsDst "index.js") -UseBasicParsing
-    Invoke-WebRequest -Uri "$webBase/index.css`?ts=$ts" -OutFile (Join-Path $assetsDst "index.css") -UseBasicParsing
 }
 catch {
     Write-Warn "Failed to download web assets: $($_.Exception.Message)"
diff --git a/install.sh b/install.sh
@@ -59,18 +59,14 @@ fetch_component() {
 fetch_web_assets() {
   make_tmpdir
   WEB_DIR="$DK_TMPDIR/web"
-  install -d "$WEB_DIR/assets"
+  install -d "$WEB_DIR"
 
   local base="https://github.com/notdp/oroio/releases/download/web-dist"
   local ts
   ts=$(date +%s)
   printf '正在下载 web 资源...\n'
   curl -fsSL -H 'Cache-Control: no-cache' -H 'Pragma: no-cache' "${base}/index.html?ts=${ts}" \
     -o "$WEB_DIR/index.html" || die "下载 index.html 失败"
-  curl -fsSL -H 'Cache-Control: no-cache' -H 'Pragma: no-cache' "${base}/index.js?ts=${ts}" \
-    -o "$WEB_DIR/assets/index.js" || die "下载 index.js 失败"
-  curl -fsSL -H 'Cache-Control: no-cache' -H 'Pragma: no-cache' "${base}/index.css?ts=${ts}" \
-    -o "$WEB_DIR/assets/index.css" || die "下载 index.css 失败"
 }
 
 locate_sources() {
diff --git a/web/index.html b/web/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Crect%20width%3D%221024%22%20height%3D%221024%22%20rx%3D%22200%22%20fill%3D%22%231a1a1a%22%2F%3E%3Cg%20fill%3D%22%23ef4444%22%3E%3Crect%20x%3D%22200%22%20y%3D%22320%22%20width%3D%2264%22%20height%3D%22384%22%2F%3E%3Crect%20x%3D%22264%22%20y%3D%22320%22%20width%3D%22128%22%20height%3D%2264%22%2F%3E%3Crect%20x%3D%22264%22%20y%3D%22640%22%20width%3D%22128%22%20height%3D%2264%22%2F%3E%3Crect%20x%3D%22392%22%20y%3D%22384%22%20width%3D%2264%22%20height%3D%22256%22%2F%3E%3Crect%20x%3D%22520%22%20y%3D%22320%22%20width%3D%2264%22%20height%3D%22384%22%2F%3E%3Crect%20x%3D%22584%22%20y%3D%22448%22%20width%3D%2264%22%20height%3D%22128%22%2F%3E%3Crect%20x%3D%22648%22%20y%3D%22320%22%20width%3D%2264%22%20height%3D%22128%22%2F%3E%3Crect%20x%3D%22648%22%20y%3D%22576%22%20width%3D%2264%22%20height%3D%22128%22%2F%3E%3Crect%20x%3D%22712%22%20y%3D%22320%22%20width%3D%2264%22%20height%3D%2264%22%2F%3E%3Crect%20x%3D%22712%22%20y%3D%22640%22%20width%3D%2264%22%20height%3D%2264%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>oroio</title>
     <script type="module">
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -47,6 +47,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vite-plugin-singlefile": "^2.3.0"
   }
 }
diff --git a/web/public/favicon.png b/web/public/favicon.png
diff --git a/web/public/favicon.svg b/web/public/favicon.svg
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import { viteSingleFile } from 'vite-plugin-singlefile'
 import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
@@ -340,19 +341,27 @@ Command instructions here.
 
 export default defineConfig({
   base: './',
-  plugins: [react(), tailwindcss(), oroioDataPlugin(), factoryApiPlugin()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    viteSingleFile({ removeViteModuleLoader: true }),
+    oroioDataPlugin(),
+    factoryApiPlugin(),
+  ],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
   },
   build: {
     outDir: 'dist',
+    assetsInlineLimit: 100000000,
+    chunkSizeWarningLimit: 100000000,
+    cssCodeSplit: false,
     rollupOptions: {
       output: {
-        entryFileNames: 'assets/index.js',
-        chunkFileNames: 'assets/[name].js',
-        assetFileNames: 'assets/[name].[ext]',
+        inlineDynamicImports: true,
+        manualChunks: undefined,
       },
     },
   },

Original file line number	Diff line number	Diff line change
`@@ -47,6 +47,7 @@`
`47`	`47`	`"tw-animate-css": "^1.4.0",`
`48`	`48`	`"typescript": "~5.9.3",`
`49`	`49`	`"typescript-eslint": "^8.46.4",`
`50`		`- "vite": "^7.2.4"`
	`50`	`+ "vite": "^7.2.4",`
	`51`	`+ "vite-plugin-singlefile": "^2.3.0"`
`51`	`52`	`}`
`52`	`53`	`}`