面试题：Webpack自定义加载器中如何处理资源的缓存问题

Question

在Webpack自定义加载器开发过程中，假设你正在开发一个处理图片资源的加载器，由于图片资源在构建过程中处理相对耗时，为了提高构建效率，你应该如何实现对图片资源的缓存？请描述实现思路，并简单给出关键代码片段。

Answer 1

实现思路

1. 缓存标识生成：根据图片的路径、内容哈希等生成唯一的缓存标识。因为图片的内容决定了构建后的结果，路径可用于定位，所以通过两者结合能确保缓存的准确性。
2. 选择缓存存储方式：可利用Webpack的this.cacheable()机制，它会在默认情况下使用内存缓存，在构建过程中对于相同标识的图片直接从缓存中获取处理结果，无需重复处理。同时，也可考虑使用文件系统缓存（如enhanced-resolve中的Cache插件），在不同构建间复用结果，提高整体构建效率。
3. 缓存逻辑处理：在加载器处理图片资源前，先检查缓存中是否已有处理结果。若有，直接返回缓存内容；若没有，进行图片处理，处理完成后将结果存入缓存。

关键代码片段

// 自定义图片加载器
module.exports = function (source) {
  // 启用缓存
  this.cacheable();
  const callback = this.async();
  // 生成缓存标识，这里简单使用图片路径作为标识，实际应用中建议结合内容哈希
  const cacheKey = this.resourcePath;
  const cachedResult = this.getCache(cacheKey);
  if (cachedResult) {
    return callback(null, cachedResult);
  }
  // 图片处理逻辑，这里假设是简单的Base64编码处理
  const base64Result = Buffer.from(source).toString('base64');
  // 将处理结果存入缓存
  this.cache(cacheKey, base64Result);
  callback(null, `module.exports = 'data:image/png;base64,${base64Result}'`);
};