refactor: 使用 vite-plugin-vue-app-loading 插件代替框架首屏loading

package.json

@@ -102,6 +102,7 @@
     "vite-plugin-fake-server": "^2.1.1",
     "vite-plugin-pages": "^0.32.3",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-app-loading": "^0.2.1",
     "vite-plugin-vue-devtools": "^7.3.9",
     "vite-plugin-vue-meta-layouts": "^0.4.3",
     "vue-tsc": "^2.1.4"

pnpm-lock.yaml

@@ -240,6 +240,9 @@ importers:
       vite-plugin-svg-icons:
         specifier: ^2.0.1
         version: 2.0.1(vite@5.4.2(@types/node@22.5.1)(sass@1.77.8)(terser@5.31.6))
+      vite-plugin-vue-app-loading:
+        specifier: ^0.2.1
+        version: 0.2.1
       vite-plugin-vue-devtools:
         specifier: ^7.3.9
         version: 7.3.9(rollup@4.21.2)(vite@5.4.2(@types/node@22.5.1)(sass@1.77.8)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4))
@@ -5834,6 +5837,9 @@ packages:
     peerDependencies:
       vite: '>=2.0.0'
 
+  vite-plugin-vue-app-loading@0.2.1:
+    resolution: {integrity: sha512-/DE4bYFvs8akpm1CDFzGv43YVAunX1fEe718DAambRrUqBCMw+KJjfjfDzX13/lHA+zZEKrJ4053VgK57R9aVw==}
+
   vite-plugin-vue-devtools@7.3.9:
     resolution: {integrity: sha512-ybDV2kepW0NpusvtfbRKHs0pvyrReNcFtL572gyZ6Alox6u5uebYefd2eAG/7mJSU3NPI5UxUH1e/Mof5exdlw==}
     engines: {node: '>=v14.21.3'}
@@ -12177,6 +12183,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vite-plugin-vue-app-loading@0.2.1: {}
+
   vite-plugin-vue-devtools@7.3.9(rollup@4.21.2)(vite@5.4.2(@types/node@22.5.1)(sass@1.77.8)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4)):
     dependencies:
       '@vue/devtools-core': 7.3.9(vite@5.4.2(@types/node@22.5.1)(sass@1.77.8)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4))

src/types/shims.d.ts

@@ -3,13 +3,6 @@ declare interface Window {
   mozDevicePixelRatio: any
 }
 
-declare module 'virtual:app-loading' {
-  const loadingFadeOut: () => void
-  export {
-    loadingFadeOut,
-  }
-}
-
 declare const __SYSTEM_INFO__: {
   pkg: {
     version: Recordable<string>

tsconfig.json

@@ -24,6 +24,7 @@
       "vite/client",
       "vite-plugin-pages/client",
       "vite-plugin-vue-meta-layouts/client",
+      "vite-plugin-vue-app-loading/client",
       "element-plus/global"
     ],
     "allowImportingTsExtensions": true,

vite/plugins.ts

@@ -16,6 +16,7 @@ import Layouts from 'vite-plugin-vue-meta-layouts'
 import Pages from 'vite-plugin-pages'
 import { compression } from 'vite-plugin-compression2'
 import archiver from 'archiver'
+import AppLoading from 'vite-plugin-vue-app-loading'
 import TurboConsole from 'unplugin-turbo-console/vite'
 import banner from 'vite-plugin-banner'
 import boxen from 'boxen'
@@ -124,44 +125,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
       }
     })(),
 
-    (function () {
-      const virtualModuleId = 'virtual:app-loading'
-      const resolvedVirtualModuleId = `\0${virtualModuleId}`
-      return {
-        name: 'vite-plugin-loading',
-        resolveId(id) {
-          if (id === virtualModuleId) {
-            return resolvedVirtualModuleId
-          }
-        },
-        load(id) {
-          if (id === resolvedVirtualModuleId) {
-            return {
-              code: `
-                export function loadingFadeOut() {
-                  const loadingEl = document.querySelector('[data-app-loading]')
-                  if (loadingEl) {
-                    loadingEl.style['pointer-events'] = 'none'
-                    loadingEl.style.visibility = 'hidden'
-                    loadingEl.style.opacity = 0
-                    loadingEl.style.transition = 'all 0.5s ease-out'
-                    loadingEl.addEventListener('transitionend', () => loadingEl.remove(), { once: true })
-                  }
-                }
-              `,
-              map: null,
-            }
-          }
-        },
-        enforce: 'pre',
-        transformIndexHtml: {
-          handler: async html => html.replace(/<\/body>/, `${
-            `<div data-app-loading>${await fs.readFileSync(path.resolve(process.cwd(), 'loading.html'), 'utf8')}</div>`
-          }</body>`),
-          order: 'pre',
-        },
-      }
-    })(),
+    AppLoading('loading.html'),
 
     // https://github.com/unplugin/unplugin-turbo-console
     TurboConsole(),