Skip to content

Commit e240a2d

Browse files
Windsland52Windsland52
committed
perf(startup): keep VSCode analytics reporting async while preserving faster first paint
- restore Umami script loading in VSCode webview and keep it async - keep CSP script-src/connect-src allowance for cloud.umami.is in webview - retain webview startup placeholder styles to reduce black/empty flash - preserve non-blocking startup path while allowing reportAnalyticsContext to run in VSCode
1 parent 519d1f8 commit e240a2d

4 files changed

Lines changed: 58 additions & 13 deletions

File tree

‎index.html‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,40 @@
1010
<!-- 主题颜色（控制浏览器地址栏/状态栏颜色）-->
1111
<meta name="theme-color" content="#18181c" id="theme-color-meta">
1212
<title>MAA 日志分析器</title>
13-
<script defer src="https://cloud.umami.is/script.js" data-website-id="14964f46-1293-4fc8-82c3-09446ba85c11"></script>
13+
<script async src="https://cloud.umami.is/script.js" data-website-id="14964f46-1293-4fc8-82c3-09446ba85c11"></script>
1414
<style>
1515
* {
1616
margin: 0;
1717
padding: 0;
1818
box-sizing: border-box;
1919
}
20+
html,
21+
body {
22+
width: 100%;
23+
height: 100%;
24+
}
2025
/* 初始主题由 VS Code 变量或应用主题控制 */
2126
body {
2227
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
23-
background: var(--vscode-panel-background);
24-
color: var(--vscode-foreground);
28+
background: var(--vscode-panel-background, #18181c);
29+
color: var(--vscode-foreground, rgba(255, 255, 255, 0.82));
2530
}
2631
#app {
2732
height: 100vh;
2833
overflow: hidden;
2934
}
30-
/* 平滑主题切换 */
31-
* {
32-
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
35+
/* 启动占位，避免白/黑屏 */
36+
#app:empty {
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
background: var(--vscode-panel-background, #18181c);
41+
color: var(--vscode-foreground, rgba(255, 255, 255, 0.62));
42+
font-size: 12px;
43+
letter-spacing: 0.4px;
44+
}
45+
#app:empty::before {
46+
content: "正在加载 MAA 日志分析器...";
3347
}
3448
</style>
3549
</head>

‎src-vscode/src/extension.ts‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -752,10 +752,38 @@ function getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri): s
752752
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src ${webview.cspSource} https://cloud.umami.is 'nonce-${nonce}'; img-src ${webview.cspSource} data:; font-src ${webview.cspSource}; connect-src https://cloud.umami.is;">
753753
<title>MAA 日志分析器</title>
754754
<link rel="stylesheet" href="${webviewUri}/assets/index.css">
755+
<style>
756+
html, body {
757+
width: 100%;
758+
height: 100%;
759+
}
760+
body {
761+
margin: 0;
762+
background: var(--vscode-panel-background, #1e1e1e);
763+
color: var(--vscode-editor-foreground, rgba(255, 255, 255, 0.82));
764+
overflow: hidden;
765+
}
766+
#app {
767+
height: 100vh;
768+
overflow: hidden;
769+
}
770+
#app:empty {
771+
display: flex;
772+
align-items: center;
773+
justify-content: center;
774+
background: var(--vscode-panel-background, #1e1e1e);
775+
color: var(--vscode-descriptionForeground, rgba(255, 255, 255, 0.62));
776+
font-size: 12px;
777+
letter-spacing: 0.4px;
778+
}
779+
#app:empty::before {
780+
content: "正在加载 MAA 日志分析器...";
781+
}
782+
</style>
755783
</head>
756784
<body>
757785
<div id="app"></div>
758-
<script nonce="${nonce}" defer src="https://cloud.umami.is/script.js" data-website-id="14964f46-1293-4fc8-82c3-09446ba85c11"></script>
786+
<script nonce="${nonce}" async src="https://cloud.umami.is/script.js" data-website-id="14964f46-1293-4fc8-82c3-09446ba85c11"></script>
759787
<script nonce="${nonce}">
760788
// 注入 VS Code API
761789
const vscode = acquireVsCodeApi();

‎src/views/app/components/AppMainContent.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
<script setup lang="ts">
2+
import { defineAsyncComponent } from 'vue'
23
import type { LogParser } from '../../../utils/logParser'
34
import type { NodeInfo, TaskInfo } from '../../../types'
4-
import SearchModePane from './SearchModePane.vue'
5-
import StatisticsModePane from './StatisticsModePane.vue'
6-
import FlowchartModePane from './FlowchartModePane.vue'
7-
import AiModePane from './AiModePane.vue'
85
import MainContentAnalysisSection from './MainContentAnalysisSection.vue'
9-
import MainContentSplitSection from './MainContentSplitSection.vue'
106
import type {
117
DetailViewForwardProps,
128
ProcessViewEventHandlers,
@@ -16,6 +12,12 @@ import type {
1612
UploadFileHandler,
1713
} from './types'
1814
15+
const SearchModePane = defineAsyncComponent(() => import('./SearchModePane.vue'))
16+
const StatisticsModePane = defineAsyncComponent(() => import('./StatisticsModePane.vue'))
17+
const FlowchartModePane = defineAsyncComponent(() => import('./FlowchartModePane.vue'))
18+
const AiModePane = defineAsyncComponent(() => import('./AiModePane.vue'))
19+
const MainContentSplitSection = defineAsyncComponent(() => import('./MainContentSplitSection.vue'))
20+
1921
defineProps<{
2022
viewMode: string
2123
isMobile: boolean

‎vite.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export default defineConfig({
3838
build: {
3939
outDir: 'dist',
4040
assetsDir: 'assets',
41+
modulePreload: false,
4142
sourcemap: false,
4243
rollupOptions: {
4344
output: {
@@ -65,4 +66,4 @@ export default defineConfig({
6566
},
6667
chunkSizeWarningLimit: 1000,
6768
},
68-
})
69+
})

0 commit comments

Comments
 (0)