perf: reduce frontend memory pressure and startup cost

Limit long-lived page and component retention while virtualizing large card views to keep runtime memory lower. Defer heavy editor, chart, workflow, calendar, and icon code so the app loads less JavaScript up front.
2026-07-25 15:59:37 +08:00 · 2026-05-09 08:32:14 +08:00
parent 2931f5df46
commit dbeea6afcc
24 changed files with 1224 additions and 248 deletions
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -2,6 +2,7 @@
 import api from '@/api'
 import type { MediaInfo } from '@/api/types'
 import MediaCard from '@/components/cards/MediaCard.vue'
+import VirtualCardGrid from '@/components/misc/VirtualCardGrid.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 import { useI18n } from 'vue-i18n'

@@ -27,12 +28,11 @@ const loading = ref(false)
 // 是否加载完成
 const isRefreshed = ref(false)

-// 数据列表
-const dataList = ref<MediaInfo[]>([])
-const currData = ref<MediaInfo[]>([])
+// 使用 shallowRef 避免长列表中的深层代理开销
+const dataList = shallowRef<MediaInfo[]>([])

 // 用于保存已处理过的 key
-const seenKeys = ref<Set<string>>(new Set<string>())
+const seenKeys = new Set<string>()

 // 拼装参数
 function getParams() {
@@ -46,27 +46,42 @@ function getParams() {

 // MediaInfo 去重的字段
 const dedupFields = [
-  "source",
-  "type",
-  "season",
-  "tmdb_id",
-  "imdb_id",
-  "tvdb_id",
-  "douban_id",
-  "bangumi_id",
-  "mediaid_prefix",
-  "media_id",
-] as const;
+  'source',
+  'type',
+  'season',
+  'tmdb_id',
+  'imdb_id',
+  'tvdb_id',
+  'douban_id',
+  'bangumi_id',
+  'mediaid_prefix',
+  'media_id',
+] as const

 function deduplicate(items: MediaInfo[]): MediaInfo[] {
  return items.filter(item => {
-    const key = dedupFields.map(field => String(item[field])).join('~');
-    if (seenKeys.value.has(key)) {
-      return false;
+    const key = dedupFields.map(field => String(item[field])).join('~')
+    if (seenKeys.has(key)) {
+      return false
    }
-    seenKeys.value.add(key);
-    return true;
-  });
+    seenKeys.add(key)
+    return true
+  })
+}
+
+function appendData(items: MediaInfo[]) {
+  dataList.value = dataList.value.concat(items)
+}
+
+async function loadPageData() {
+  const rawData: MediaInfo[] = await api.get(props.apipath!, {
+    params: getParams(),
+  })
+
+  return {
+    rawCount: rawData.length,
+    uniqueData: deduplicate(rawData),
+  }
 }

 // 获取列表数据
@@ -87,22 +102,18 @@ async function fetchData({ done }: { done: any }) {
        // 设置加载中
        loading.value = true
        // 请求API
-        currData.value = await api.get(props.apipath, {
-          params: getParams(),
-        })
+        const { rawCount, uniqueData } = await loadPageData()
        // 取消加载中
        loading.value = false
        // 标计为已请求完成
        isRefreshed.value = true
-        if (currData.value.length === 0) {
+        if (rawCount === 0) {
          // 如果没有数据，跳出
          done('empty')
          return
        }
-        // 去重
-        currData.value = deduplicate(currData.value)
        // 合并数据
-        dataList.value.push(...currData.value)
+        appendData(uniqueData)
        // 页码+1
        page.value++
        // 返回加载成功
@@ -113,19 +124,15 @@ async function fetchData({ done }: { done: any }) {
      // 设置加载中
      loading.value = true
      // 请求API
-      currData.value = await api.get(props.apipath, {
-        params: getParams(),
-      })
+      const { rawCount, uniqueData } = await loadPageData()
      // 标计为已请求完成
      isRefreshed.value = true
-      if (currData.value.length === 0) {
+      if (rawCount === 0) {
        // 如果没有数据，跳出
        done('empty')
      } else {
-        // 去重
-        currData.value = deduplicate(currData.value)
        // 合并数据
-        dataList.value.push(...currData.value)
+        appendData(uniqueData)
        // 页码+1
        page.value++
        // 返回加载成功
@@ -147,9 +154,16 @@ async function fetchData({ done }: { done: any }) {
  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible pt-3 px-2" @load="fetchData">
    <template #loading />
    <template #empty />
-    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
-      <MediaCard v-for="data in dataList" :key="data.tmdb_id || data.douban_id" :media="data" />
-    </div>
+    <VirtualCardGrid
+      v-if="dataList.length > 0"
+      :items="dataList"
+      :get-item-key="item => item.tmdb_id || item.douban_id || item.bangumi_id || item.media_id || item.title"
+      tabindex="0"
+    >
+      <template #default="{ item }">
+        <MediaCard :media="item" />
+      </template>
+    </VirtualCardGrid>
    <NoDataFound
      v-if="dataList.length === 0 && isRefreshed"
      error-code="404"
--- a/src/views/discover/MediaCardSlideView.vue
+++ b/src/views/discover/MediaCardSlideView.vue
@@ -3,6 +3,7 @@ import api from '@/api'
 import type { MediaInfo } from '@/api/types'
 import MediaCard from '@/components/cards/MediaCard.vue'
 import SlideView from '@/components/slide/SlideView.vue'
+import VirtualSlideView from '@/components/slide/VirtualSlideView.vue'
 import { useI18n } from 'vue-i18n'
 import { useIntersectionObserver, until } from '@vueuse/core'

@@ -27,8 +28,8 @@ const componentLoaded = ref(false)
 // 是否已尝试加载
 const hasTriedLoading = ref(false)

-// 数据列表
-const dataList = ref<MediaInfo[]>([])
+// 使用 shallowRef 避免横向卡片区的大数组深层代理
+const dataList = shallowRef<MediaInfo[]>([])

 // 容器引用
 const containerRef = ref<HTMLElement | null>(null)
@@ -74,13 +75,15 @@ onActivated(() => {

 <template>
  <div ref="containerRef">
-    <SlideView v-if="componentLoaded">
-      <template #content>
-        <template v-for="data in dataList" :key="data.tmdb_id || data.douban_id || data.bangumi_id">
-          <MediaCard :media="data" width="9rem" />
-        </template>
+    <VirtualSlideView
+      v-if="componentLoaded"
+      :items="dataList"
+      :get-item-key="item => item.tmdb_id || item.douban_id || item.bangumi_id || item.media_id || item.title"
+    >
+      <template #item="{ item }">
+        <MediaCard :media="item" width="9rem" />
      </template>
-    </SlideView>
+    </VirtualSlideView>
    <SlideView v-else-if="!componentLoaded">
      <template #content>
        <div v-for="i in 10" :key="i" style="width: 9rem">
--- a/src/views/discover/PersonCardListView.vue
+++ b/src/views/discover/PersonCardListView.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import api from '@/api'
+import type { Person } from '@/api/types'
 import PersonCard from '@/components/cards/PersonCard.vue'
+import VirtualCardGrid from '@/components/misc/VirtualCardGrid.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 import { useI18n } from 'vue-i18n'

@@ -27,9 +29,18 @@ const loading = ref(false)
 // 是否加载完成
 const isRefreshed = ref(false)

-// 数据列表
-const dataList = ref<any>([])
-const currData = ref<any>([])
+// 使用 shallowRef 避免长列表中的深层代理开销
+const dataList = shallowRef<Person[]>([])
+
+function appendData(items: Person[]) {
+  dataList.value = dataList.value.concat(items)
+}
+
+async function loadPageData() {
+  return api.get(props.apipath!, {
+    params: getParams(),
+  }) as Promise<Person[]>
+}

 // 拼装参数
 function getParams() {
@@ -59,20 +70,18 @@ async function fetchData({ done }: { done: any }) {
        // 设置加载中
        loading.value = true
        // 请求API
-        currData.value = await api.get(props.apipath, {
-          params: getParams(),
-        })
+        const currentData = await loadPageData()
        // 取消加载中
        loading.value = false
        // 标计为已请求完成
        isRefreshed.value = true
-        if (currData.value.length === 0) {
+        if (currentData.length === 0) {
          // 如果没有数据，跳出
          done('empty')
          return
        } else {
          // 合并数据
-          dataList.value = [...dataList.value, ...currData.value]
+          appendData(currentData)
          // 页码+1
          page.value++
          // 返回加载成功
@@ -84,17 +93,15 @@ async function fetchData({ done }: { done: any }) {
      // 设置加载中
      loading.value = true
      // 请求API
-      currData.value = await api.get(props.apipath, {
-        params: getParams(),
-      })
+      const currentData = await loadPageData()
      // 标计为已请求完成
      isRefreshed.value = true
-      if (currData.value.length === 0) {
+      if (currentData.length === 0) {
        // 如果没有数据，跳出
        done('empty')
      } else {
        // 合并数据
-        dataList.value = [...dataList.value, ...currData.value]
+        appendData(currentData)
        // 页码+1
        page.value++
        // 返回加载成功
@@ -116,9 +123,11 @@ async function fetchData({ done }: { done: any }) {
  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible px-3" @load="fetchData">
    <template #loading />
    <template #empty />
-    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
-      <PersonCard v-for="data in dataList" :key="data.id" :person="data" />
-    </div>
+    <VirtualCardGrid v-if="dataList.length > 0" :items="dataList" :get-item-key="item => item.id" tabindex="0">
+      <template #default="{ item }">
+        <PersonCard :person="item" />
+      </template>
+    </VirtualCardGrid>
    <NoDataFound
      v-if="dataList.length === 0 && isRefreshed"
      error-code="404"
--- a/src/views/discover/PersonCardSlideView.vue
+++ b/src/views/discover/PersonCardSlideView.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import PersonCard from '@/components/cards/PersonCard.vue'
+import type { Person } from '@/api/types'
 import api from '@/api'
 import SlideView from '@/components/slide/SlideView.vue'
+import VirtualSlideView from '@/components/slide/VirtualSlideView.vue'
+import { useIntersectionObserver } from '@vueuse/core'

 // 输入参数
 const props = defineProps({
@@ -16,8 +19,14 @@ provide('rankingPropsKey', reactive({ ...props }))
 // 组件加载完成
 const componentLoaded = ref(false)

+// 是否已尝试加载
+const hasTriedLoading = ref(false)
+
 // 数据列表
-const dataList = ref<any>([])
+const dataList = shallowRef<Person[]>([])
+
+// 容器引用
+const containerRef = ref<HTMLElement | null>(null)

 // 获取订阅列表数据
 async function fetchData() {
@@ -25,22 +34,49 @@ async function fetchData() {
    if (!props.apipath) return

    dataList.value = await api.get(props.apipath)
-    if (dataList.value.length > 0) componentLoaded.value = true
+    componentLoaded.value = true
  } catch (error) {
    console.error(error)
+  } finally {
+    hasTriedLoading.value = true
  }
 }

-// 加载时获取数据
-onMounted(fetchData)
+const { stop } = useIntersectionObserver(
+  containerRef,
+  ([{ isIntersecting }]) => {
+    if (isIntersecting) {
+      fetchData()
+      stop()
+    }
+  },
+  {
+    rootMargin: '300px',
+  },
+)
+
+onActivated(() => {
+  if (dataList.value.length === 0 && hasTriedLoading.value) {
+    fetchData()
+  }
+})
 </script>

 <template>
-  <SlideView v-if="componentLoaded">
-    <template #content>
-      <template v-for="data in dataList" :key="data.id">
-        <PersonCard :person="data" width="9rem" />
+  <div ref="containerRef">
+    <VirtualSlideView v-if="componentLoaded" :items="dataList" :get-item-key="item => item.id">
+      <template #item="{ item }">
+        <PersonCard :person="item" width="9rem" />
      </template>
-    </template>
-  </SlideView>
+    </VirtualSlideView>
+    <SlideView v-else>
+      <template #content>
+        <div v-for="i in 10" :key="i" style="width: 9rem">
+          <VCard class="outline-none overflow-hidden">
+            <div style="padding-bottom: 150%"></div>
+          </VCard>
+        </div>
+      </template>
+    </SlideView>
+  </div>
 </template>