cache-loader

[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![coverage][cover]][cover-url] [![chat][chat]][chat-url] [![size][size]][size-url]

The cache-loader allow to Caches the result of following loaders on disk (default) or in the database.

起步

To begin, you’ll need to install cache-loader:

npm install --save-dev cache-loader

在一些性能开销较大的 loader 之前添加此 loader，以将结果缓存到磁盘里。

webpack.config.js

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

⚠️ 请注意，保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader。

选项

Name

Type

Default

Description

Name

cacheContext

Type

{String}

Default

undefined

Description

Allows you to override the default cache context in order to generate the cache relatively to a path. By default it will use absolute paths

Name

cacheKey

Type

{Function(options, request) -> {String}}

Default

undefined

Description

Allows you to override default cache key generator

Name

cacheDirectory

Type

{String}

Default

path.resolve('.cache-loader')

Description

Provide a cache directory where cache items should be stored (used for default read/write implementation)

Name

cacheIdentifier

Type

{String}

Default

cache-loader:{version} {process.env.NODE_ENV}

Description

Provide an invalidation identifier which is used to generate the hashes. You can use it for extra dependencies of loaders (used for default read/write implementation)

Name

write

Type

{Function(cacheKey, data, callback) -> {void}}

Default

undefined

Description

Allows you to override default write cache data to file (e.g. Redis, memcached)

Name

read

Type

{Function(cacheKey, callback) -> {void}}

Default

undefined

Description

Allows you to override default read cache data from file

Name

readOnly

Type

{Boolean}

Default

false

Description

Allows you to override default value and make the cache read only (useful for some environments where you don’t want the cache to be updated, only read from it)

示例

Basic

webpack.config.js

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

Database Integration

webpack.config.js

// Or different database client - memcached, mongodb, ...
const redis = require('redis');
const crypto = require('crypto');
// ...
// connect to client
// ...
const BUILD_CACHE_TIMEOUT = 24 * 3600; // 1 day
function digest(str) {
  return crypto
    .createHash('md5')
    .update(str)
    .digest('hex');
}
// Generate own cache key
function cacheKey(options, request) {
  return `build:cache:${digest(request)}`;
}
// Read data from database and parse them
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);
    }
  });
}
// Write data to database under 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'),
      },
    ],
  },
};

贡献

Please take a moment to read our contributing guidelines if you haven’t yet done so.

CONTRIBUTING

License

MIT