https://github.com/webpack-contrib/cache-loader
[DEPRECATED] Caches the result of following loaders on disk
https://github.com/webpack-contrib/cache-loader
cache webpack-loader
Last synced: 9 months ago
JSON representation
[DEPRECATED] Caches the result of following loaders on disk
- Host: GitHub
- URL: https://github.com/webpack-contrib/cache-loader
- Owner: webpack-contrib
- License: mit
- Archived: true
- Created: 2017-04-26T08:59:47.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-10-27T14:38:24.000Z (about 5 years ago)
- Last Synced: 2025-04-09T10:04:10.008Z (10 months ago)
- Topics: cache, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 1.15 MB
- Stars: 640
- Watchers: 14
- Forks: 51
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-list - cache-loader - contrib | 637 | (JavaScript)
README
# DEPRECATED
Consider upgrading webpack to version 5 and setup cache https://webpack.js.org/configuration/other-options/#cache
---
[![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