[Bug]: g-lite 中 memoize 缓存不释放导致 内存溢出

[wanglxi1]

Describe the bug / 问题描述

g-lite 2.3.2 的 css/parser/path.ts:81
const memoizedParsePath = memoize(internalParsePath);
在长期使用过程中，缓存一直不释放

import React, { useRef, useState, useEffect } from 'react';
import { Area, Line } from '@ant-design/plots';

declare type T = {
	t: Date;
	value: number;
	k: string;
}

const HomePage: React.FC = () => {
    const [dataUtil, setDataUtil] = useState<any[]>();  

    useEffect(() => {		
		const delta = 0;
		const count = 3600;
		const legends = 100;
		
		let now = new Date().getTime() / 1000;

		const data:T[] = [];
		const createData = () => {
			let len = count*legends - data.length;
			if(len == 0){
				len = 1;
				data.splice(0, 2);
			}else{
				len = len / legends;
			}
			for (let i = 0; i < len; i++) {
				const d = new Date((now++) * 1000);
				for(let j=0; j<legends; j++){
					data.push({
						t: d,
						value: (now%count) * (j+1),
						k: 'k'+j,
					});
				}
			}
		}

        setInterval(() => {			
			createData();
            setDataUtil([...data]);
        }, delta);
    },[]);    

    

    const config = {
        xField: 't',
		yField: 'value',
		colorField: 'k',
		height: 280,
		data: dataUtil,
		legend: false,
    };

    return (
        <Area {...config} stack />
    );
};

export default HomePage;

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

Version / 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[dosubot]

Hi @wanglxi1! I'm Dosu and I’m helping the ant-design-charts team.

你的问题和 ant-design-charts 及其底层 @antv/g-lite 的缓存（memoize）实现有关，社区中已经有类似的内存泄漏反馈。主要原因是 memoize 的缓存没有释放，导致内存不断增长，尤其是在高频率数据更新或不断传入新数据时更明显。这种问题在 chart update 时不会自动清理缓存，只有在销毁组件时才会释放资源，导致内存溢出相关讨论1 相关讨论2。

近期 ant-design-charts 有修复部分内存溢出问题（如事件监听器未清理），但 memoize 缓存未释放的问题在 g-lite 层面依然存在修复PR。目前社区常见的临时解决方案是：定期销毁并重建图表实例，避免长时间运行导致缓存无限增长。

你的代码中 setInterval 没有 clear，会导致资源无法释放，建议在 useEffect 的 return 里加上 clearInterval，避免额外的内存泄漏官方建议。

如果你依赖的 @ant-design/plots/@antv/g-lite 版本较老，建议关注后续依赖升级和相关 issue 的进展，或尝试升级到最新版本测试是否有改善。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[wanglxi1]

@dosubot
memoize 未导出，没法引用，我怎么clear

[hustcc]

最好还是修改 memoize 的缓存函数，使用 lru 等有内存占用上限的。

[dosubot]

memoize 在 g-lite 里确实是内部实现，没有导出，所以无法直接引用或清理缓存。目前没有官方 API 或方法可以手动清除 memoize 的缓存相关讨论。

社区推荐的规避方式是：通过销毁并重建图表实例（比如卸载组件或调用 destroy 方法），这样会释放相关资源和缓存，但无法只清理 memoize 缓存。如果你的场景是高频率数据更新，建议定期销毁并重建图表，或者优化数据流，减少不必要的缓存增长修复PR说明。

另外，记得在 useEffect 的 return 里加上 clearInterval，避免额外的内存泄漏。当前没有更直接的解决办法，建议关注后续 g-lite 或 ant-design-charts 的版本更新。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[wanglxi1]

参考 @antv/util/src/lodash/memoize.ts 中的实现，重写了一版 @antvg-lite/src/utils/memoize.ts 可缓解此问题。

function flru(max: number) {
  let num, curr, prev;
  const limit = max || 1;

  function keep(key, value) {
    if (++num > limit) {
      prev = curr;
      reset(1);
      ++num;
    }
    curr[key] = value;
  }

  function reset(isPartial?: number) {
    num = 0;
    curr = Object.create(null);
    isPartial || (prev = Object.create(null));
  }

  reset();

  return {
    clear: reset,
    has: function(key) {
      return curr[key] !== void 0 || prev[key] !== void 0;
    },
    get: function(key) {
      var val = curr[key];
      if (val !== void 0) return val;
      if ((val = prev[key]) !== void 0) {
        keep(key, val);
        return val;
      }
    },
    set: function(key, value) {
      if (curr[key] !== void 0) {
        curr[key] = value;
      } else {
        keep(key, value);
      }
    },
  };
}

const CacheMap = new Map<Function, ReturnType<typeof flru>>();

export function memoize<F = (...args: unknown[]) => unknown>(
    func: F,
    resolver?: (...args: any[]) => any,
) {
  if (typeof func !== 'function' ||
      (resolver != null && typeof resolver !== 'function')) {
    throw new TypeError('Expected a function');
  }

  const memoized = function(...args) {
    const key = resolver ? resolver.apply(this, args) : args[0];
    const {cache} = memoized;

    if (cache.has(key)) return cache.get(key);

    const result = func.apply(this, args);
    cache.set(key, result);
    return result;
  };

  if (!CacheMap.has(func)) CacheMap.set(func, flru(1024));
  memoized.cache = CacheMap.get(func);
  memoize.cacheList.push(memoized.cache);

  return memoized as F;
}

memoize.Cache = CacheMap;
memoize.cacheList = [];
memoize.clearCache = () => {
  memoize.cacheList.forEach(
      (cache) => (cache as unknown as Map<unknown, unknown>).clear(),
  );
};

[lxfu1]

参考 @antv/util/src/lodash/memoize.ts 中的实现，重写了一版 @antvg-lite/src/utils/memoize.ts 可缓解此问题。

function flru(max: number) {
let num, curr, prev;
const limit = max || 1;

function keep(key, value) {
if (++num > limit) {
prev = curr;
reset(1);
++num;
}
curr[key] = value;
}

function reset(isPartial?: number) {
num = 0;
curr = Object.create(null);
isPartial || (prev = Object.create(null));
}

reset();

return {
clear: reset,
has: function(key) {
return curr[key] !== void 0 || prev[key] !== void 0;
},
get: function(key) {
var val = curr[key];
if (val !== void 0) return val;
if ((val = prev[key]) !== void 0) {
keep(key, val);
return val;
}
},
set: function(key, value) {
if (curr[key] !== void 0) {
curr[key] = value;
} else {
keep(key, value);
}
},
};
}

const CacheMap = new Map<Function, ReturnType>();

export function memoize<F = (...args: unknown[]) => unknown>(
func: F,
resolver?: (...args: any[]) => any,
) {
if (typeof func !== 'function' ||
(resolver != null && typeof resolver !== 'function')) {
throw new TypeError('Expected a function');
}

const memoized = function(...args) {
const key = resolver ? resolver.apply(this, args) : args[0];
const {cache} = memoized;

if (cache.has(key)) return cache.get(key);

const result = func.apply(this, args);
cache.set(key, result);
return result;

};

if (!CacheMap.has(func)) CacheMap.set(func, flru(1024));
memoized.cache = CacheMap.get(func);
memoize.cacheList.push(memoized.cache);

return memoized as F;
}

memoize.Cache = CacheMap;
memoize.cacheList = [];
memoize.clearCache = () => {
memoize.cacheList.forEach(
(cache) => (cache as unknown as Map<unknown, unknown>).clear(),
);
};

直接给 g-lite 提各 PR ？

[wanglxi1]

个人观点，这不是g-lite的问题（因为他提供了clearCache功能），而 使用方 未正确使用导致。
用 lru 只是为了最小化改动，不是最好的实现方式