本文主要是介绍webpack源码分析——makeCacheable函数和weakMap的缓存应用场景，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、makeCacheable 函数
函数功能
该函数是将一个不带缓存的函数 realFn 转换成一个带缓存的版本。这样可以提高性能，因为相同的输入值不需要每次都重新计算，而是可以从缓存中直接获取结果。
二、函数分析
- 使用 WeakMap 弱引用特性创建缓存
const cache = new WeakMap();
- 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 对象，将其与对象关联，并返回它。
- 缓存化函数
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 并将结果存储在缓存中。
- 绑定缓存
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或处理文件路径等操作，使用缓存可以显著减少重复计算的开销，从而提高应用程序的响应速度和效率。通过将缓存绑定到特定的对象，可以确保缓存的生命周期与对象的生命周期相匹配，这有助于避免内存泄漏问题。
这篇关于webpack源码分析——makeCacheable函数和weakMap的缓存应用场景的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
