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

本文主要是介绍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或处理文件路径等操作，使用缓存可以显著减少重复计算的开销，从而提高应用程序的响应速度和效率。通过将缓存绑定到特定的对象，可以确保缓存的生命周期与对象的生命周期相匹配，这有助于避免内存泄漏问题。

这篇关于webpack源码分析——makeCacheable函数和weakMap的缓存应用场景的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---