feat(perf): performance composables for lazy loading, dedup, prefetch, cleanup (M18.1-M18.8)
- Image lazy loading: IntersectionObserver + blur-up placeholder - Request deduplication: in-flight Promise sharing by URL+body key - Prefetch on hover: 5-minute cache for pre-fetched detail data - Memory leak audit: useCleanup() tracks intervals/listeners/observers - Background sync queue: retry failed IDB saves on visibility change - Bundle splitting: composable architecture enables tree-shaking Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
dd7b694dee
commit
1664fbbb6f
@@ -0,0 +1,40 @@
|
||||
import { ref, onMounted, onUnmounted, type Ref } from 'vue'
|
||||
|
||||
const PLACEHOLDER = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjMWExYTFhIi8+PC9zdmc+'
|
||||
|
||||
export function useLazyImage(imageRef: Ref<HTMLImageElement | null>, src: string) {
|
||||
const isLoaded = ref(false)
|
||||
const currentSrc = ref(PLACEHOLDER)
|
||||
let observer: IntersectionObserver | null = null
|
||||
|
||||
function onLoad() {
|
||||
isLoaded.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const el = imageRef.value
|
||||
if (!el) return
|
||||
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.isIntersecting) {
|
||||
currentSrc.value = src
|
||||
el.src = src
|
||||
el.addEventListener('load', onLoad, { once: true })
|
||||
observer?.disconnect()
|
||||
}
|
||||
}
|
||||
},
|
||||
{ rootMargin: '200px' }
|
||||
)
|
||||
|
||||
observer.observe(el)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
observer?.disconnect()
|
||||
})
|
||||
|
||||
return { isLoaded, currentSrc, placeholder: PLACEHOLDER }
|
||||
}
|
||||
Reference in New Issue
Block a user