面试题：Webpack缓存机制之专家难度：自定义Webpack缓存策略及原理

1. 理解Webpack构建流程与模块解析

构建流程：Webpack从入口(entry)开始，递归地构建出一个依赖图(dependency graph)，图中包含所有项目所需的模块。然后根据配置的loader和plugin对模块进行转换和处理，最后输出打包后的文件。
模块解析：Webpack会根据配置的resolve规则，将模块请求解析为文件路径。例如，根据extensions配置尝试不同的文件扩展名，根据alias配置进行路径别名替换等。

2. 自定义缓存策略设计思路

精准控制缓存粒度
- 模块级别：可以根据模块的唯一标识（如文件路径）来缓存模块的解析结果。在构建过程中，如果模块没有变化（例如文件内容未改变，可以通过文件哈希值判断），则直接从缓存中读取模块解析结果，而不需要重新解析和处理。
- 构建产物级别：对于打包后的产物（如bundle文件），可以根据构建时的参数（如mode、target等）以及依赖模块的状态来决定是否使用缓存。如果构建参数和依赖都未改变，直接使用缓存的构建产物。
与Webpack现有生态良好兼容
- 利用Webpack插件系统：Webpack的插件机制允许在构建的各个阶段介入。我们可以编写一个自定义插件，在模块解析和构建输出阶段应用缓存策略。
- 遵循Webpack的配置规范：将自定义缓存策略相关的配置整合到Webpack的常规配置文件（如webpack.config.js）中，这样开发人员可以方便地进行配置和管理。

3. 实现步骤

创建自定义插件

class CustomCachePlugin {
    constructor(options) {
        this.cache = {};
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.normalModuleFactory.tap('CustomCachePlugin', (nmf) => {
            nmf.hooks.beforeResolve.tapAsync('CustomCachePlugin', (data, callback) => {
                const cacheKey = data.request;
                if (this.cache[cacheKey]) {
                    return callback(null, this.cache[cacheKey]);
                }
                callback();
            });
            nmf.hooks.afterResolve.tap('CustomCachePlugin', (result) => {
                const cacheKey = result.request;
                this.cache[cacheKey] = result;
            });
        });
        compiler.hooks.emit.tapAsync('CustomCachePlugin', (compilation, callback) => {
            const buildHash = this.calculateBuildHash(compilation);
            const cacheKey = `build_${buildHash}`;
            if (this.cache[cacheKey]) {
                // 直接使用缓存的构建产物
                Object.keys(this.cache[cacheKey]).forEach((filename) => {
                    compilation.assets[filename] = this.cache[cacheKey][filename];
                });
                return callback();
            }
            // 计算构建产物的哈希值并缓存
            const newBuildAssets = {};
            Object.keys(compilation.assets).forEach((filename) => {
                newBuildAssets[filename] = compilation.assets[filename];
            });
            this.cache[cacheKey] = newBuildAssets;
            callback();
        });
    }
    calculateBuildHash(compilation) {
        // 根据构建参数和依赖模块计算哈希值
        const buildParams = `${compilation.options.mode}_${compilation.options.target}`;
        const moduleHashes = [];
        compilation.modules.forEach((module) => {
            moduleHashes.push(module.hash);
        });
        return require('crypto').createHash('md5').update(buildParams + moduleHashes.join('')).digest('hex');
    }
}

在Webpack配置中使用插件

module.exports = {
    // 其他Webpack配置...
    plugins: [
        new CustomCachePlugin({
            // 自定义缓存插件的配置参数
        })
    ]
};

通过上述步骤，我们基于Webpack的底层原理，实现了一个可以精准控制缓存粒度，并且与Webpack现有生态良好兼容的自定义缓存策略。在模块解析阶段，根据模块请求缓存解析结果；在构建输出阶段，根据构建参数和依赖模块的状态缓存构建产物。

星途面试题库

面试题：Webpack缓存机制之专家难度：自定义Webpack缓存策略及原理

知识考点

面试题答案

1. 理解Webpack构建流程与模块解析

2. 自定义缓存策略设计思路

3. 实现步骤