inkreachhub/inkreach-official-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(deploy): production deployment setup and fixes

Browse Source 
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma
  binaryTargets for openssl 3.0
- nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal
  cron, http->https redirect
- prisma: add origin_goods.delisted migration, sync missing schema
  (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz
- api: CORS wildcard reflection, helmet CORP cross-origin, price
  backfill in persistProductDetail, categoryIcon ancestor fallback,
  mediaByColor per-color gallery in public goods detail
- admin: /admin base path (vite + router)
- import-data.mjs: udt_name casting, serial sequence advance fix
This commit is contained in:
yeuimu
2026-08-26 14:23:09 +08:00
parent be0b90e68f
commit 6c61a4e871
982 changed files with 74156 additions and 179393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/vue-debug-guides/reference/keepalive-transition-memory-leak.md
-144
View File
@@ -1,144 +0,0 @@
---
title: KeepAlive with Transition Memory Leak
impact: MEDIUM
impactDescription: Combining KeepAlive with Transition can cause memory leaks in certain Vue versions
type: gotcha
tags: [vue3, keepalive, transition, memory-leak, animation]
---
# KeepAlive with Transition Memory Leak
**Impact: MEDIUM** - There is a known memory leak when using `<Transition>` and `<KeepAlive>` together. Component instances may not be properly freed from memory when combining these features.
## Task Checklist
- [ ] Test memory behavior when using KeepAlive + Transition together
- [ ] Consider if transition animation is necessary with cached components
- [ ] Use browser DevTools Memory tab to verify no leak
- [ ] Keep Vue updated to get latest bug fixes
## The Problem
```vue
<template>
<!-- Known memory leak combination in some Vue versions -->
<Transition name="fade">
<KeepAlive>
<component :is="currentView" />
</KeepAlive>
</Transition>
</template>
```
When switching between components repeatedly:
- Component instances accumulate in memory
- References prevent garbage collection
- Memory usage grows with each switch
## Diagnosis
Use Chrome DevTools to detect the leak:
1. Open DevTools > Memory tab
2. Take heap snapshot
3. Switch between components 10+ times
4. Take another heap snapshot
5. Compare: look for growing VueComponent count
## Workarounds
### Option 1: Remove Transition if Not Essential
```vue
<template>
<!-- No memory leak without Transition -->
<KeepAlive :max="5">
<component :is="currentView" />
</KeepAlive>
</template>
```
### Option 2: Use CSS Animations Instead
```vue
<template>
<KeepAlive :max="5">
<component
:is="currentView"
:class="{ 'fade-enter': isTransitioning }"
/>
</KeepAlive>
</template>
<style>
.fade-enter {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
```
### Option 3: Use Strict Cache Limits
If you must use both, minimize impact with strict limits:
```vue
<template>
<Transition name="fade" mode="out-in">
<KeepAlive :max="3">
<component :is="currentView" />
</KeepAlive>
</Transition>
</template>
```
### Option 4: Key-Based Cache Invalidation
Force fresh instances when needed:
```vue
<script setup>
import { ref, computed } from 'vue'
const currentView = ref('Dashboard')
const cacheKey = ref(0)
function switchViewFresh(view) {
currentView.value = view
cacheKey.value++ // Force new instance
}
</script>
<template>
<Transition name="fade" mode="out-in">
<KeepAlive :max="3">
<component :is="currentView" :key="cacheKey" />
</KeepAlive>
</Transition>
</template>
```
## Keep Vue Updated
This is a known issue tracked in Vue's GitHub repository. Memory leak fixes are periodically released, so ensure you're on the latest Vue version:
```bash
npm update vue
```
## Key Points
1. **Known issue** - Memory leaks with KeepAlive + Transition are documented
2. **Test in DevTools** - Use Memory tab to verify your specific usage
3. **Consider alternatives** - CSS animations may work without the leak
4. **Set strict `max`** - Limit cache size to cap memory impact
5. **Keep Vue updated** - Bug fixes are released periodically
## Reference
- [GitHub Issue #9842: Memory leak with transition and keep-alive](https://github.com/vuejs/vue/issues/9842)
- [GitHub Issue #9840: Memory leak with transition and keep-alive](https://github.com/vuejs/vue/issues/9840)
- [Vue.js KeepAlive Documentation](https://vuejs.org/guide/built-ins/keep-alive.html)