fix: 修复内存泄漏并优化缓存管理
修复版本检查定时器未清理导致的内存泄漏问题 优化axios缓存机制,减少内存占用和过期缓存清理频率
Showing
3 changed files
with
43 additions
and
11 deletions
| ... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
| 2 | * @Author: hookehuyr hookehuyr@gmail.com | 2 | * @Author: hookehuyr hookehuyr@gmail.com |
| 3 | * @Date: 2022-05-26 23:52:36 | 3 | * @Date: 2022-05-26 23:52:36 |
| 4 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 4 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 5 | - * @LastEditTime: 2025-06-10 13:47:08 | 5 | + * @LastEditTime: 2025-10-01 15:41:19 |
| 6 | * @FilePath: /data-table/src/App.vue | 6 | * @FilePath: /data-table/src/App.vue |
| 7 | * @Description: | 7 | * @Description: |
| 8 | --> | 8 | --> |
| ... | @@ -12,7 +12,7 @@ | ... | @@ -12,7 +12,7 @@ |
| 12 | 12 | ||
| 13 | <script setup> | 13 | <script setup> |
| 14 | import { mainStore, useTitle } from "@/utils/generatePackage"; | 14 | import { mainStore, useTitle } from "@/utils/generatePackage"; |
| 15 | -import { computed, watchEffect, onMounted } from "vue"; | 15 | +import { computed, watchEffect, onMounted, onUnmounted } from "vue"; |
| 16 | import { useRoute, useRouter } from "vue-router"; | 16 | import { useRoute, useRouter } from "vue-router"; |
| 17 | // import { Toast } from "vant"; | 17 | // import { Toast } from "vant"; |
| 18 | // 会根据配置判断是否显示调试控件 | 18 | // 会根据配置判断是否显示调试控件 |
| ... | @@ -242,8 +242,9 @@ onMounted(async () => { | ... | @@ -242,8 +242,9 @@ onMounted(async () => { |
| 242 | } | 242 | } |
| 243 | 243 | ||
| 244 | // TAG:检查是否更新 | 244 | // TAG:检查是否更新 |
| 245 | + let upDater = null; | ||
| 245 | if (import.meta.env.PROD) { | 246 | if (import.meta.env.PROD) { |
| 246 | - const upDater = new Updater({ | 247 | + upDater = new Updater({ |
| 247 | time: 30000 | 248 | time: 30000 |
| 248 | }) | 249 | }) |
| 249 | upDater.on('no-update', () => { | 250 | upDater.on('no-update', () => { |
| ... | @@ -259,6 +260,13 @@ onMounted(async () => { | ... | @@ -259,6 +260,13 @@ onMounted(async () => { |
| 259 | }); | 260 | }); |
| 260 | }) | 261 | }) |
| 261 | } | 262 | } |
| 263 | + | ||
| 264 | + // 组件卸载时清理定时器 | ||
| 265 | + onUnmounted(() => { | ||
| 266 | + if (upDater) { | ||
| 267 | + upDater.destroy(); | ||
| 268 | + } | ||
| 269 | + }); | ||
| 262 | }); | 270 | }); |
| 263 | </script> | 271 | </script> |
| 264 | 272 | ... | ... |
| ... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
| 2 | * @Author: hookehuyr hookehuyr@gmail.com | 2 | * @Author: hookehuyr hookehuyr@gmail.com |
| 3 | * @Date: 2022-05-28 10:17:40 | 3 | * @Date: 2022-05-28 10:17:40 |
| 4 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 4 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 5 | - * @LastEditTime: 2024-11-25 15:56:19 | 5 | + * @LastEditTime: 2025-09-30 22:25:22 |
| 6 | * @FilePath: /data-table/src/utils/axios.js | 6 | * @FilePath: /data-table/src/utils/axios.js |
| 7 | * @Description: | 7 | * @Description: |
| 8 | */ | 8 | */ |
| ... | @@ -27,7 +27,7 @@ const onlyDataCache = { | ... | @@ -27,7 +27,7 @@ const onlyDataCache = { |
| 27 | const { method, url, params, data } = config; | 27 | const { method, url, params, data } = config; |
| 28 | var key = [method, url].join("&"); | 28 | var key = [method, url].join("&"); |
| 29 | if (fullPath) { | 29 | if (fullPath) { |
| 30 | - key = [method, url, stringify(params), stringify(data)].join("&"); | 30 | + key = [method, url, JSON.stringify(params), JSON.stringify(data)].join("&"); |
| 31 | } | 31 | } |
| 32 | return key; | 32 | return key; |
| 33 | }, | 33 | }, |
| ... | @@ -70,9 +70,9 @@ const keepDataCache = { | ... | @@ -70,9 +70,9 @@ const keepDataCache = { |
| 70 | // 缓存列表 | 70 | // 缓存列表 |
| 71 | list: [], | 71 | list: [], |
| 72 | // 最大缓存数 | 72 | // 最大缓存数 |
| 73 | - MAX_NUM: 100, | 73 | + MAX_NUM: 50, // 从100减少到50,减少内存占用 |
| 74 | // 最大缓存时间 | 74 | // 最大缓存时间 |
| 75 | - EXPIRED_TIME: 60000, | 75 | + EXPIRED_TIME: 30000, // 从60秒减少到30秒,更频繁地清理过期缓存 |
| 76 | // 根据请求的信息(请求方式,url,请求get/post数据),产生map的key | 76 | // 根据请求的信息(请求方式,url,请求get/post数据),产生map的key |
| 77 | getRequestKey(config) { | 77 | getRequestKey(config) { |
| 78 | const { method, url, params, data } = config; | 78 | const { method, url, params, data } = config; |
| ... | @@ -91,10 +91,14 @@ const keepDataCache = { | ... | @@ -91,10 +91,14 @@ const keepDataCache = { |
| 91 | if (index > -1) { | 91 | if (index > -1) { |
| 92 | // 保存请求结果 | 92 | // 保存请求结果 |
| 93 | this.list[index].data = data; | 93 | this.list[index].data = data; |
| 94 | + this.list[index].time = Date.now(); // 更新时间戳 | ||
| 94 | } else { | 95 | } else { |
| 95 | // 添加到缓存列表中 | 96 | // 添加到缓存列表中 |
| 96 | this.list.push({ time: Date.now(), key, data }); | 97 | this.list.push({ time: Date.now(), key, data }); |
| 97 | } | 98 | } |
| 99 | + | ||
| 100 | + // 主动清理过期缓存 | ||
| 101 | + this.cleanExpiredCache(); | ||
| 98 | }, | 102 | }, |
| 99 | // 查找缓存结果 | 103 | // 查找缓存结果 |
| 100 | find(config) { | 104 | find(config) { |
| ... | @@ -115,11 +119,21 @@ const keepDataCache = { | ... | @@ -115,11 +119,21 @@ const keepDataCache = { |
| 115 | } | 119 | } |
| 116 | } | 120 | } |
| 117 | // 判断是否超出了最大缓存数量 | 121 | // 判断是否超出了最大缓存数量 |
| 118 | - if (this.list.length === this.MAX_NUM) { | 122 | + if (this.list.length >= this.MAX_NUM) { |
| 123 | + // 移除最旧的缓存项 | ||
| 119 | this.list.shift(); | 124 | this.list.shift(); |
| 120 | } | 125 | } |
| 121 | // 返回undefined,让请求拦截不执行config.adapter | 126 | // 返回undefined,让请求拦截不执行config.adapter |
| 122 | return undefined; | 127 | return undefined; |
| 128 | + }, | ||
| 129 | + // 清理过期缓存的方法 | ||
| 130 | + cleanExpiredCache() { | ||
| 131 | + const now = Date.now(); | ||
| 132 | + this.list = this.list.filter(item => now - item.time <= this.EXPIRED_TIME); | ||
| 133 | + }, | ||
| 134 | + // 清空所有缓存 | ||
| 135 | + clear() { | ||
| 136 | + this.list = []; | ||
| 123 | } | 137 | } |
| 124 | }; | 138 | }; |
| 125 | 139 | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2024-02-06 11:38:13 | 2 | * @Date: 2024-02-06 11:38:13 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2024-02-06 13:04:25 | 4 | + * @LastEditTime: 2025-09-30 22:33:40 |
| 5 | - * @FilePath: /xysBooking/src/utils/versionUpdater.js | 5 | + * @FilePath: /data-table/src/utils/versionUpdater.js |
| 6 | * @Description: | 6 | * @Description: |
| 7 | */ | 7 | */ |
| 8 | /* eslint-disable */ | 8 | /* eslint-disable */ |
| ... | @@ -61,10 +61,20 @@ export class Updater { | ... | @@ -61,10 +61,20 @@ export class Updater { |
| 61 | 61 | ||
| 62 | timing(time = 10000) { | 62 | timing(time = 10000) { |
| 63 | //轮询 | 63 | //轮询 |
| 64 | - setInterval(async () => { | 64 | + this.intervalId = setInterval(async () => { |
| 65 | const newHtml = await this.getHtml(); | 65 | const newHtml = await this.getHtml(); |
| 66 | this.newScript = this.parserScript(newHtml); | 66 | this.newScript = this.parserScript(newHtml); |
| 67 | this.compare(this.oldScript, this.newScript); | 67 | this.compare(this.oldScript, this.newScript); |
| 68 | }, time); | 68 | }, time); |
| 69 | } | 69 | } |
| 70 | + | ||
| 71 | + /** | ||
| 72 | + * 清理定时器 | ||
| 73 | + */ | ||
| 74 | + destroy() { | ||
| 75 | + if (this.intervalId) { | ||
| 76 | + clearInterval(this.intervalId); | ||
| 77 | + this.intervalId = null; | ||
| 78 | + } | ||
| 79 | + } | ||
| 70 | } | 80 | } | ... | ... |
-
Please register or login to post a comment