面试题：Webpack自定义加载器性能优化之缓存处理

在Webpack自定义加载器中实现缓存机制，可以通过使用this.cacheable()方法以及在加载器处理函数中进行缓存判断来实现。以下是关键代码示例及解释：

启用缓存：在加载器函数的开头调用this.cacheable()，告知Webpack此加载器支持缓存。

module.exports = function (source) {
    this.cacheable();
    // 加载器逻辑代码
};

缓存判断与处理：为了保证缓存的准确性和有效性，我们可以使用文件的绝对路径和内容的哈希值作为缓存的键。

const crypto = require('crypto');

module.exports = function (source) {
    this.cacheable();
    const filePath = this.resourcePath;
    const hash = crypto.createHash('md5').update(source).digest('hex');
    const cacheKey = `${filePath}-${hash}`;

    // 检查缓存
    if (this._module && this._module.buildInfo && this._module.buildInfo.cacheableContent) {
        const cached = this._module.buildInfo.cacheableContent[cacheKey];
        if (cached) {
            return cached;
        }
    }

    // 执行复杂的文本转换操作
    const transformedSource = performComplexTransformation(source);

    // 缓存结果
    if (!this._module.buildInfo) {
        this._module.buildInfo = {};
    }
    if (!this._module.buildInfo.cacheableContent) {
        this._module.buildInfo.cacheableContent = {};
    }
    this._module.buildInfo.cacheableContent[cacheKey] = transformedSource;

    return transformedSource;
};

function performComplexTransformation(source) {
    // 这里编写复杂的文本转换逻辑
    return source.toUpperCase(); // 示例：转换为大写
}

代码解释：

启用缓存：this.cacheable()告诉Webpack此加载器的输出可以被缓存。
生成缓存键：
- this.resourcePath获取当前处理文件的绝对路径。
- 使用crypto.createHash('md5').update(source).digest('hex')计算文件内容的MD5哈希值。
- 将文件路径和哈希值组合成唯一的缓存键cacheKey。
检查缓存：
- this._module.buildInfo.cacheableContent用于存储缓存内容。
- 如果缓存中存在对应的cacheKey，直接返回缓存结果，避免重复处理。
执行转换并缓存：
- 执行复杂的文本转换操作performComplexTransformation(source)。
- 将转换后的结果存入this._module.buildInfo.cacheableContent中，以cacheKey作为键。这样下次遇到相同的输入时，就可以直接从缓存中获取结果，提高构建效率。

面试题：Webpack自定义加载器性能优化之缓存处理

知识考点

面试题答案

代码解释：