perf: Improve the global loading display

2024-06-02 23:50:58 +08:00
parent e650a0b863
commit 77d40dc763
14 changed files with 111 additions and 57 deletions
--- a/internal/vite-config/src/plugins/extra-app-config.ts
+++ b/internal/vite-config/src/plugins/extra-app-config.ts
@@ -35,7 +35,7 @@ async function viteExtraAppConfigPlugin({

  return {
    async configResolved(config) {
-      publicPath = config.base;
+      publicPath = ensureTrailingSlash(config.base);
      source = await getConfigSource();
    },
    async generateBundle() {
@@ -59,21 +59,13 @@ async function viteExtraAppConfigPlugin({
    },
    name: 'vite:extra-app-config',
    async transformIndexHtml(html) {
-      publicPath = publicPath.endsWith('/') ? publicPath : `${publicPath}/`;
      const hash = `v=${version}-${generatorContentHash(source, 8)}`;

      const appConfigSrc = `${publicPath}${GLOBAL_CONFIG_FILE_NAME}?${hash}`;

      return {
        html,
-        tags: [
-          {
-            attrs: {
-              src: appConfigSrc,
-            },
-            tag: 'script',
-          },
-        ],
+        tags: [{ attrs: { src: appConfigSrc }, tag: 'script' }],
      };
    },
  };
@@ -94,4 +86,8 @@ async function getConfigSource() {
  return source;
 }

+function ensureTrailingSlash(path: string) {
+  return path.endsWith('/') ? path : `${path}/`;
+}
+
 export { viteExtraAppConfigPlugin };
--- a/internal/vite-config/src/plugins/index.ts
+++ b/internal/vite-config/src/plugins/index.ts
@@ -20,7 +20,7 @@ import { viteImportMapPlugin } from './importmap';
 import { viteInjectAppLoadingPlugin } from './inject-app-loading';

 import type {
-  AppcationPluginOptions,
+  ApplicationPluginOptions,
  CommonPluginOptions,
  ConditionPlugin,
  LibraryPluginOptions,
@@ -82,7 +82,7 @@ async function getCommonConditionPlugins(
 * 根据条件获取应用类型的vite插件
 */
 async function getApplicationConditionPlugins(
-  options: AppcationPluginOptions,
+  options: ApplicationPluginOptions,
 ): Promise<PluginOption[]> {
  // 单独取，否则commonOptions拿不到
  const isBuild = options.isBuild;
--- a/internal/vite-config/src/plugins/inject-app-loading/index.ts
+++ b/internal/vite-config/src/plugins/inject-app-loading/index.ts
@@ -14,14 +14,14 @@ async function viteInjectAppLoadingPlugin(
 ): Promise<PluginOption | undefined> {
  const loadingHtml = await getLoadingRawByHtmlTemplate();
  const envRaw = isBuild ? 'prod' : 'dev';
-  const cacheName = `'__${env.VITE_APP_NAMESPACE}-${envRaw}-theme__'`;
+  const cacheName = `'${env.VITE_APP_NAMESPACE}-${envRaw}-preferences-theme'`;

  // 获取缓存的主题
  // 保证黑暗主题下，刷新页面时，loading也是黑暗主题
  const injectScript = `
-  <script>
+  <script data-app-loading="inject-js">
  var theme = localStorage.getItem(${cacheName});
-  document.documentElement.classList.toggle('dark', theme === 'dark');
+  document.documentElement.classList.toggle('dark', /dark/.test(theme));
 </script>
 `;

@@ -34,11 +34,8 @@ async function viteInjectAppLoadingPlugin(
    name: 'vite:inject-app-loading',
    transformIndexHtml: {
      handler(html) {
-        const re = /<div\s*id\s*=\s*"app"\s*>(\s*)<\/div>/;
-        html = html.replace(
-          re,
-          `<div id="app">${injectScript}${loadingHtml}</div>`,
-        );
+        const re = /<body\s*>/;
+        html = html.replace(re, `<body>${injectScript}${loadingHtml}`);
        return html;
      },
      order: 'pre',
--- a/internal/vite-config/src/plugins/inject-app-loading/loading-antd.html
+++ b/internal/vite-config/src/plugins/inject-app-loading/loading-antd.html
@@ -1,4 +1,4 @@
-<style>
+<style data-app-loading="inject-css">
  html {
    /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
    line-height: 1.15;
@@ -13,6 +13,10 @@
  }

  .loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
@@ -22,6 +26,12 @@
    background-color: #f4f7f9;
  }

+  .loading.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: all 1s ease-out;
+  }
+
  .loading .dots {
    display: flex;
    align-items: center;
@@ -96,7 +106,7 @@
    }
  }
 </style>
-<div class="loading">
+<div class="loading" id="__app-loading__">
  <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
  <div class="title"><%= VITE_GLOB_APP_TITLE %></div>
 </div>
--- a/internal/vite-config/src/plugins/inject-app-loading/loading.html
+++ b/internal/vite-config/src/plugins/inject-app-loading/loading.html
@@ -1,4 +1,4 @@
-<style>
+<style data-app-loading="inject-css">
  html {
    /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
    line-height: 1.15;
@@ -8,6 +8,7 @@
    position: fixed;
    top: 0;
    left: 0;
+    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
@@ -15,6 +16,14 @@
    width: 100%;
    height: 100%;
    background-color: #f4f7f9;
+
+    /* transition: all 0.8s ease-out; */
+  }
+
+  .loading.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: all 1s ease-out;
  }

  .dark .loading {
@@ -96,7 +105,7 @@
    }
  }
 </style>
-<div class="loading">
+<div class="loading" id="__app-loading__">
  <div class="loader"></div>
  <div class="title"><%= VITE_GLOB_APP_TITLE %></div>
 </div>