1. Cache Loader

在磁盘(默认)或数据库中缓存以下loader的结果

1.1. 安装

npm install --save-dev cache-loader

1.2. 用法

将此loader添加到其他(昂贵的)loader前，以将结果缓存到磁盘上。[译者注：添加到开销大的loader前是因为cache-loader可以缓存这些昂贵loader的结果，之后的loader直接调用缓存，节省开销]

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.ext$/,
        use: [
          'cache-loader', //放前面
          ...loaders
        ],
        include: path.resolve('src')
      }
    ]
  }
}

[info] 注节省读取和保存缓存文件的开销，所以只需要使用这个loader来缓存昂贵的loader。

1.3. 选项

名称	类型	默认值	描述
`cacheKey`	`{Function(options, request) -> {String}}`	`undefined`	允许覆盖默认的高速缓存key生成器
`cacheDirectory`	`{String}`	`path.resolve('.cache-loader')`	提供一个缓存目录，也就是缓存项应该被存储的地方 (被用于默认的 read/write 实现)
`cacheIdentifier`	`{String}`	`cache-loader:{version} {process.env.NODE_ENV}`	提供一个无效标识符，用于生成哈希。您可以使用它作为loader的额外依赖项(被用于默认的 read/write 实现)
`write`	`{Function(cacheKey, data, callback) -> {void}}`	`undefined`	允许覆盖默认的写入缓存数据到文件(例如. Redis, memcached)
`read`	`{Function(cacheKey, callback) -> {void}}`	`undefined`	允许覆盖默认的从文件中读取缓存数据

1.4. 示例

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          'babel-loader'
        ],
        include: path.resolve('src')
      }
    ]
  }
}

1.4.1. 数据库集成

webpack.config.js

// 或者不同的数据库客户端 - memcached, mongodb, ...
const redis = require('redis');
const crypto = require('crypto');

// ...
// 连接到数据库...
// ...

const BUILD_CACHE_TIMEOUT = 24 * 3600; // 1 day

function digest(str) {
  return crypto.createHash('md5').update(str).digest('hex');
}

// 生成缓存key
function cacheKey(options, request) {
  return `build:cache:${digest(request)}`;
}


// 从数据库读取数据并解析它们
function read(key, callback) {
  client.get(key, (err, result) => {
    if (err) {
      return callback(err);
    }

    if (!result) {
      return callback(new Error(`Key ${key} not found`));
    }

    try {
      let data = JSON.parse(result);
      callback(null, data);
    } catch (e) {
      callback(e);
    }
  });
}


// 写入数据到数据库对应的cacheKey
function write(key, data, callback) {
  client.set(key, JSON.stringify(data), 'EX', BUILD_CACHE_TIMEOUT, callback);
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheKey,
              read,
              write,
            }
          },
          'babel-loader'
        ],
        include: path.resolve('src')
      }
    ]
  }
}