perf(暗色): 提交列表、排名首屏卡掉的一秒多回来了 —— 全站共用一个 useDark

VueUse 的 useDark 每个实例挂载时都插一段 style、getComputedStyle 逼整页重算样式,
亮色下它的「没东西要改就跳过」永远不成立。提交列表每行的结果胶囊(useTone)都调它,
一页 30 行就是 30 次整页重算,翻页、换条再来。

改成 shared/composables/dark.ts 的 createGlobalState,auto-import 用 priority 盖掉
@vueuse/core 的同名项,显式 import 的 7 处一并换掉。

生产构建、CPU 降速 6 倍实测:提交列表首屏主线程 2015 → 1092ms(列表出来 1.34 → 0.85 秒),
排名 1950 → 850ms,比赛 1060 → 757ms;右栏换到没看过的一条不再每次卡 100ms。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed 2026-11-03 13:55:33 +08:00
1 parent 55bdf317f1
commit e511d82f3b
9 files changed
+28 -7

No files matched your search

+5
View File
@@ -93,6 +93,11 @@ export default defineConfig(() => {
'vue-router',
'@vueuse/core',
'pinia',
// 盖掉上面 @vueuse/core 的同名项:全站共用一个实例,原因见 shared/composables/dark.ts
{
from: 'shared/composables/dark',
imports: [{ name: 'useDark', priority: 10 }],
},
{
'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
},