webpack源码分析——makeCacheable函数和weakMap的缓存应用场景

一、makeCacheable 函数

函数功能

该函数是将一个不带缓存的函数 realFn 转换成一个带缓存的版本。这样可以提高性能，因为相同的输入值不需要每次都重新计算，而是可以从缓存中直接获取结果。

二、函数分析

1. 使用 WeakMap 弱引用特性创建缓存

const cache = new WeakMap();

2. getCache 函数

const getCache = associatedObjectForCache => {
	const entry = cache.get(associatedObjectForCache);
	if (entry !== undefined) return entry;
	const map = new Map();
	cache.set(associatedObjectForCache, map);
	return map;
};

getCache 函数用于获取或创建与给定对象关联的缓存。如果这个对象已经有了一个缓存映射，它将返回这个映射；否则，它会创建一个新的 Map 对象，将其与对象关联，并返回它。

3. 缓存化函数

const fn = (str, associatedObjectForCache) => {
	if (!associatedObjectForCache) return realFn(str);
	const cache = getCache(associatedObjectForCache);
	const entry = cache.get(str);
	if (entry !== undefined) return entry;
	const result = realFn(str);
	cache.set(str, result);
	return result;
};

fn 是一个包装过的函数，它接受一个字符串 str 和一个可选的关联对象 associatedObjectForCache。如果没有提供关联对象，fn 将直接调用 realFn 函数。如果提供了关联对象，fn 将尝试从缓存中获取结果，如果缓存中没有结果，它将调用 realFn 并将结果存储在缓存中。

4. 绑定缓存

fn.bindCache = associatedObjectForCache => {
	const cache = getCache(associatedObjectForCache);
	return str => {
		const entry = cache.get(str);
		if (entry !== undefined) return entry;
		const result = realFn(str);
		cache.set(str, result);
		return result;
	};
};

fn.bindCache 方法允许创建一个新的函数，这个函数总是使用associatedObjectForCache缓存结果。这样可以为特定的对象创建一个专用的缓存函数。

##三、源码

const makeCacheable = realFn => {
	const cache = new WeakMap();

	const getCache = associatedObjectForCache => {
		const entry = cache.get(associatedObjectForCache);
		if (entry !== undefined) return entry;
		const map = new Map();
		cache.set(associatedObjectForCache, map);
		return map;
	};

	const fn = (str, associatedObjectForCache) => {
		if (!associatedObjectForCache) return realFn(str);
		const cache = getCache(associatedObjectForCache);
		const entry = cache.get(str);
		if (entry !== undefined) return entry;
		const result = realFn(str);
		cache.set(str, result);
		return result;
	};

	fn.bindCache = associatedObjectForCache => {
		const cache = getCache(associatedObjectForCache);
		return str => {
			const entry = cache.get(str);
			if (entry !== undefined) return entry;
			const result = realFn(str);
			cache.set(str, result);
			return result;
		};
	};

	return fn;
};

四 函数用途

makeCacheable 函数可以用于性能优化，特别是在处理重复调用且计算成本较高的函数时。例如，在Web开发中，对于解析URL或处理文件路径等操作，使用缓存可以显著减少重复计算的开销，从而提高应用程序的响应速度和效率。通过将缓存绑定到特定的对象，可以确保缓存的生命周期与对象的生命周期相匹配，这有助于避免内存泄漏问题。