npm.devtool.tech
👏 You can access cache-loader package with using cacheLoader variable in browser devtools!
Caches the result of following loaders on disk.

code/package/bundle size

0B
publish
0B
install
0B
bundle minified
0B
bundle gzipped

npm node deps tests coverage chat size

cache-loader

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

Getting Started

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

npm install --save-dev cache-loader

Add this loader in front of other (expensive) loaders to cache the result on disk.

webpack.config.js

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

⚠️ Note that there is an overhead for saving the reading and saving the cache file, so only use this loader to cache expensive loaders.

Options

NameTypen DefaultDescription
cacheContext{String}undefinedAllows you to override the default cache context in order to generate the cache relatively to a path. By default it will use absolute paths
cacheKey{Function(options, request) -> {String}}undefinedAllows you to override default cache key generator
cacheDirectory{String}findCacheDir({ name: 'cache-loader' }) or os.tmpdir()Provide a cache directory where cache items should be stored (used for default read/write implementation)
cacheIdentifier{String}cache-loader:{version} {process.env.NODE_ENV}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)
compare{Function(stats, dep) -> {Boolean}}undefinedAllows you to override default comparison function between the cached dependency and the one is being read. Return true to use the cached resource
precision{Number}0Round mtime by this number of milliseconds both for stats and dep before passing those params to the comparing function
read{Function(cacheKey, callback) -> {void}}undefinedAllows you to override default read cache data from file
readOnly{Boolean}falseAllows 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)
write{Function(cacheKey, data, callback) -> {void}}undefinedAllows you to override default write cache data to file (e.g. Redis, memcached)

Examples

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'),
      },
    ],
  },
};

Contributing

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

CONTRIBUTING

License

MIT

🔎Explore Package🔎CDN Script

Score

Popularity43/100
Quality94/100
Maintenance18/100