# @ldrummond/cache-loader > Caches the result of following loaders on disk. Latest version **4.1.0** (published 2021-05-10) · MIT license · 0 weekly downloads ## Install ```sh npm install @ldrummond/cache-loader pnpm add @ldrummond/cache-loader yarn add @ldrummond/cache-loader bun add @ldrummond/cache-loader ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.1.0 | | Published | 2021-05-10 | | First published | 2021-05-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >= 8.9.0 | | Dependencies | 6 | | Unpacked size | 27.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 638 | | Author | Tobias Koppers @sokra | | Maintainers | ldrummond | | Keywords | webpack | ## Links - npm: https://www.npmjs.com/package/@ldrummond/cache-loader - Repository: https://github.com/webpack-contrib/cache-loader - Issues: https://github.com/webpack-contrib/cache-loader/issues - npm.io page: https://npm.io/package/@ldrummond/cache-loader ## Dependencies (6) - [mkdirp](https://npm.io/package/mkdirp.md) ^1.0.4 - [neo-async](https://npm.io/package/neo-async.md) ^2.6.2 - [buffer-json](https://npm.io/package/buffer-json.md) ^2.0.0 - [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0 - [schema-utils](https://npm.io/package/schema-utils.md) ^2.7.0 - [find-cache-dir](https://npm.io/package/find-cache-dir.md) ^3.3.1 ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 4.1.0 (latest) — 2021-05-10 ## README
[![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 | | :-------------------: | :----------------------------------------------: | :-----------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`cacheAddedFiles`** | `{Boolean}` | `false` | Allow to caches the added files. By default it's not cached. | | **`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 --- _Source: https://npm.io/package/@ldrummond/cache-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._