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
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.
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) |
compare | {Function(stats, dep) -> {Boolean}} | undefined | Allows 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} | 0 | Round mtime by this number of milliseconds both for stats and dep before passing those params to the comparing function |
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) |
write | {Function(cacheKey, data, callback) -> {void}} | undefined | Allows you to override default write cache data to file (e.g. Redis, memcached) |
webpack.config.js
module.exports = { module: { rules: [ { test: /\.js$/, use: ['cache-loader', 'babel-loader'], include: path.resolve('src'), }, ], }, };
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.