Optimize packaging logic

.github/workflows/web.yml

@@ -110,6 +110,9 @@ jobs:
           cd ..\mobile
           Copy-Item ..\web\dist assets -Force -Recurse
           flutter build apk --release
+          cd ..\web
+          Remove-Item dist -Force -Recurse -ErrorAction SilentlyContinue
+          yarn build:musiche
           cd ..
           copy windows\bin\Release\net472\Musiche.exe web\dist\Musiche.exe -ErrorAction SilentlyContinue
           copy windows\bin\Publish\net6.0-windows\Musiche.exe web\dist\Musiche.net6.exe -ErrorAction SilentlyContinue

web/package.json

@@ -10,7 +10,9 @@
   "scripts": {
     "start": "vite --host",
     "build": "run-p type-check build-only",
+    "build:nc": "run-p build-only",
     "build:zip": "cross-env BUILD_ZIP=1 run-p type-check build-only",
+    "build:musiche": "cross-env ROUTER_PREFIX=musiche run-p type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit"

web/scripts/fix.ts

@@ -48,57 +48,19 @@ function fixWorkerJS(): string {
     const workerName = `worker-${hash}.js`;
     const workerNamePath = path.resolve(distPath, workerName);
     fs.renameSync(workerPath, workerNamePath);
-    return `window.serviceWorkerJS = "${workerName}";`;
+    let routerPrefix = process.env.ROUTER_PREFIX
+      ? `/${process.env.ROUTER_PREFIX}`
+      : '';
+    return `window.serviceWorkerJS = "${routerPrefix}/${workerName}";`;
   }
   return '';
 }
 
 function transformIndexHtmlHandler(html: string) {
   const workerJS = fixWorkerJS();
-  let indexJS = '';
-  const matchIndexJS =
-    /[\s]*<script.+?src="\.*([\S]+index[\S]+\.js)"[^>]*>[\s]*<\/script>.*[\n]*/;
-  if (matchIndexJS.test(html)) {
-    indexJS = `
-      const indexScript = document.createElement('script');
-      indexScript.type = 'module';
-      indexScript.crossorigin = "anonymous";
-      indexScript.src = routerPrefix + '${matchIndexJS.exec(html)[1]}';
-      document.head.appendChild(indexScript);`;
-    html = html.replace(matchIndexJS, '');
-  }
-  let indexCSS = '';
-  const matchIndexCSS =
-    /[\s]*<link[\s]+rel="stylesheet"[\s]*[\S]*[\s]*href="\.*([\S]+index[\S]+\.css)"[^>]*>.*[\n]*/;
-  if (matchIndexCSS.test(html)) {
-    indexCSS = `
-      const indexStyle = document.createElement('link');
-      indexStyle.rel = 'stylesheet';
-      indexStyle.href = routerPrefix + '${matchIndexCSS.exec(html)[1]}';
-      document.head.appendChild(indexStyle);`;
-    html = html.replace(matchIndexCSS, '');
-  }
   html = html.replace(
     '</head>',
-    `
-    <script id="musiche-script-fix">
-      let routerPrefix = localStorage.getItem('musiche-router-prefix') || '';
-      if (routerPrefix) routerPrefix = '/' + routerPrefix;
-      const iconLink = document.querySelector('link[rel="icon"]');
-      if(iconLink) iconLink.href = routerPrefix + '/logo-circle.png';
-      const manifestLink = document.querySelector('link[rel="manifest"]');
-      if(manifestLink) manifestLink.href = location.origin + routerPrefix + '/manifest.json';
-      ${workerJS}
-      ${indexCSS}${indexJS}
-      window.addEventListener('load', () => {
-        const googleLink = document.createElement('link');
-        googleLink.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap';
-        googleLink.rel = 'stylesheet';
-        googleLink.type = 'text/css';
-        document.head.appendChild(googleLink);
-      })
-      document.getElementById('musiche-script-fix').remove();
-    </script>
+    `  <script>${workerJS}</script>
   </head>`
   );
   return html;

web/src/router/index.ts

@@ -96,9 +96,7 @@ const routers: RouteRecordRaw[] = [
 ];
 routers.push({ path: '/:catchAll(.*)', redirect: '/recommend' });
 const router = createRouter({
-  history: createWebHistory(
-    localStorage.getItem('musiche-router-prefix') || undefined
-  ),
+  history: createWebHistory(`${import.meta.env.BASE_URL}` || undefined),
   routes: routers
 });
 

web/src/sw/register.ts

@@ -18,15 +18,11 @@ async function unregisterOldServiceWorker(workerName: string) {
 export async function registerServiceWorker() {
   if ('serviceWorker' in navigator) {
     try {
-      let routerPrefix = localStorage.getItem('musiche-router-prefix') || '';
-      if (routerPrefix) routerPrefix = '/' + routerPrefix;
       const workerName =
         (window as any).serviceWorkerJS || 'worker.js?' + Date.now();
       await unregisterOldServiceWorker(workerName);
       if (!import.meta.env.DEV) {
-        swRegistration = await navigator.serviceWorker.register(
-          routerPrefix + '/' + workerName
-        );
+        swRegistration = await navigator.serviceWorker.register(workerName);
         console.log(
           'Service Worker registered with scope:',
           swRegistration.scope

web/src/utils/http.ts

@@ -1,7 +1,6 @@
 import { AudioPlayer } from './audio';
 import { ProxyRequestData } from './type';
-const musicRouterPrefix = localStorage.getItem('musiche-router-prefix');
-const history = musicRouterPrefix ? '/' + musicRouterPrefix : '';
+const history = `${import.meta.env.BASE_URL}`;
 
 export const httpAddress = import.meta.env.DEV
   ? '127.0.0.1:54621'

web/src/utils/logo.ts

@@ -1,4 +1,3 @@
-const routerHistory = localStorage.getItem('musiche-router-prefix');
-const imagePrefix = routerHistory ? '/' + routerHistory : '';
+const imagePrefix = `${import.meta.env.BASE_URL}`;
 export const LogoImage = imagePrefix + '/logo.png';
 export const LogoCircleImage = imagePrefix + '/logo-circle.png';

web/vite.config.mts

@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from 'node:url';
+import * as path from 'path';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -27,10 +28,40 @@ const plugins = [
   })
 ];
 process.env.BUILD_ZIP === '1' && plugins.push(ZipPlugin());
+const asyncJsList = ['magic-snowflakes', 'qrcode', 'crypto-js', 'jsmediatags'];
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: './',
+  base: '/' + (process.env.ROUTER_PREFIX || ''),
   plugins,
+  build: {
+    rollupOptions: {
+      output: {
+        assetFileNames(chunkInfo) {
+          console.log('chunkInfo', chunkInfo.type, chunkInfo.name);
+          if (chunkInfo.name?.endsWith('.css')) {
+            return 'assets/[name].[hash].[ext]';
+          }
+          return 'assets/[name].[ext]';
+        },
+        manualChunks(id, meta) {
+          const filePath = path.resolve(id);
+          const isAsync = asyncJsList.findIndex(m => filePath.includes(m)) >= 0;
+          if (
+            !filePath.includes('index.html') &&
+            (filePath.endsWith('.css') || filePath.endsWith('.less'))
+          ) {
+            return 'style';
+          } else if (isAsync) {
+            return 'async';
+          } else if (path.resolve(id).includes('node_modules')) {
+            return 'modules';
+          } else {
+            return 'main';
+          }
+        }
+      }
+    }
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))