[![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] # 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`: ```console npm install --save-dev cache-loader ``` Add this loader in front of other (expensive) loaders to cache the result on disk. **webpack.config.js** ```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) | | **`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) | ## Examples ### Basic **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.js$/, use: ['cache-loader', 'babel-loader'], include: path.resolve('src'), }, ], }, }; ``` ### Database Integration **webpack.config.js** ```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](./.github/CONTRIBUTING.md) ## License [MIT](./LICENSE) [npm]: https://img.shields.io/npm/v/cache-loader.svg [npm-url]: https://npmjs.com/package/cache-loader [node]: https://img.shields.io/node/v/cache-loader.svg [node-url]: https://nodejs.org [deps]: https://david-dm.org/webpack-contrib/cache-loader.svg [deps-url]: https://david-dm.org/webpack-contrib/cache-loader [tests]: https://dev.azure.com/webpack-contrib/cache-loader/_apis/build/status/webpack-contrib.cache-loader?branchName=master [tests-url]: https://dev.azure.com/webpack-contrib/cache-loader/_build/latest?definitionId=4&branchName=master [cover]: https://codecov.io/gh/webpack-contrib/cache-loader/branch/master/graph/badge.svg [cover-url]: https://codecov.io/gh/webpack-contrib/cache-loader [chat]: https://badges.gitter.im/webpack/webpack.svg [chat-url]: https://gitter.im/webpack/webpack [size]: https://packagephobia.now.sh/badge?p=cache-loader [size-url]: https://packagephobia.now.sh/result?p=cache-loader

	Stars	Issues	Version	Updated	Created
@babel/preset-typescript	42,899	767	7.24.1	a month ago	6 years ago
awesome-typescript-loader	2,351	233	5.2.1	6 years ago	9 years ago
cache-loader	640	26	4.1.0	5 years ago	7 years ago

@babel/preset-typescript vs awesome-typescript-loader vs cache-loader

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past