面试题：Webpack打包速度优化之高级难度：缓存策略

Webpack缓存机制提升打包速度

babel-loader缓存
- 机制：babel-loader可以开启缓存，将转换后的代码缓存起来，下次遇到相同代码时直接从缓存读取，而不是重新转换。
- 配置：在webpack配置文件的module.rules中，对于babel-loader，添加cacheDirectory: true。例如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            }
        ]
    }
};

webpack - cache
- 机制：Webpack 4.0 引入了webpack - cache，它提供了一种更通用的缓存策略。有两种缓存类型：memory - cache（默认，在内存中缓存）和filesystem - cache（将缓存写入文件系统）。
- 配置：
  - memory - cache：默认启用，无需额外配置。
  - filesystem - cache：在webpack配置文件中添加如下配置：

const path = require('path');
module.exports = {
    cache: {
        type: 'filesystem',
        cacheDirectory: path.resolve(__dirname, '.webpackcache')
    }
};

TerserPlugin缓存
- 机制：TerserPlugin用于压缩代码，它也可以开启缓存，缓存压缩后的结果，减少重复压缩的开销。
- 配置：在optimization.minimizer中，对TerserPlugin配置cache: true。例如：

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                cache: true
            })
        ]
    }
};

缓存失效原因及排查

文件变化
- 原因：如果被缓存的文件（如源文件、配置文件等）发生了变化，缓存可能会失效。例如，修改了babel配置文件，babel - loader的缓存可能就不再适用。
- 排查：检查项目中相关文件的修改时间，对比打包前后文件内容是否有变化。特别是配置文件，如.babelrc、webpack.config.js等。
缓存配置错误
- 原因：缓存配置不正确可能导致缓存无法正常工作或意外失效。比如babel - loader的cacheDirectory路径设置错误，或者webpack - cache的配置参数不恰当。
- 排查：仔细检查缓存相关的配置参数，确保路径正确，配置项符合文档要求。例如，对于filesystem - cache，检查cacheDirectory路径是否可写，是否被误删除。
环境变化
- 原因：打包环境发生变化，如操作系统、Node.js版本、Webpack版本等改变，可能使缓存失效。例如，从Windows系统迁移到Linux系统打包，或者升级了Webpack版本。
- 排查：确认打包环境，对比之前能正常使用缓存的环境，看是否有环境参数的变化。如果是升级了Webpack版本等情况，可以查阅新版本的文档，看缓存机制是否有变动。
缓存清理
- 原因：手动清理了缓存目录（如babel - loader的缓存目录或filesystem - cache的目录），或者某些脚本在打包前清理了相关缓存。
- 排查：检查项目中的脚本，看是否有清理缓存相关的操作。如果是手动清理，确认是否必要，是否有恢复缓存的方法（如重新打包生成缓存）。

面试题：Webpack打包速度优化之高级难度：缓存策略

知识考点

面试题答案

Webpack缓存机制提升打包速度

缓存失效原因及排查