cache-loader

What is cache-loader?

The cache-loader package is used to speed up the build process by caching the results of expensive loaders in webpack. This can significantly reduce build times by avoiding redundant processing.

What are cache-loader's main functionalities?

Caching Loader Results

This feature allows you to cache the results of loaders like babel-loader. By using cache-loader before babel-loader, the results of babel-loader are cached, which can significantly speed up subsequent builds.

const path = require('path');

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

Custom Cache Directory

This feature allows you to specify a custom directory for the cache. This can be useful if you want to control where the cache files are stored, for example, to avoid conflicts or to place them in a directory that is not cleaned up by other processes.

const path = require('path');

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

Other packages similar to cache-loader

hard-source-webpack-plugin

The hard-source-webpack-plugin provides an intermediate caching step for modules. It is more comprehensive than cache-loader as it caches the entire module state, not just the loader results. This can lead to even faster builds, but it is also more complex to set up and maintain.

babel-loader

While babel-loader itself is not a caching solution, it can be used in conjunction with cache-loader to cache the results of Babel transpilation. This combination is often used to speed up the build process for JavaScript projects.

webpack

Webpack itself has built-in caching mechanisms starting from version 5. These built-in features can sometimes replace the need for cache-loader, offering a more integrated and potentially more efficient caching solution.

README

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

Name	Type	n Default	Description
cacheContext	{String}	undefined	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
cacheKey	{Function(options, request) -> {String}}	undefined	Allows 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)
write	{Function(cacheKey, data, callback) -> {void}}	undefined	Allows you to override default write cache data to file (e.g. Redis, memcached)
read	{Function(cacheKey, callback) -> {void}}	undefined	Allows you to override default read cache data from file
readOnly	{Boolean}	false	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)

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

Changelog

3.0.0 (2019-04-19)

Bug Fixes

• usage with raw loaders (#69) (4924341)

Features

• change default cache directory (#64) (fd1c6d7)

BREAKING CHANGES

• default cache directory is node_modules/.cache/cache-loader

<a name="2.0.1"></a>