1 | <div align="center">
|
2 | <a href="https://webpack.js.org/">
|
3 | <img width="200" height="200" src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg">
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | [![npm][npm]][npm-url]
|
8 | [![node][node]][node-url]
|
9 | [![deps][deps]][deps-url]
|
10 | [![tests][tests]][tests-url]
|
11 | [![coverage][cover]][cover-url]
|
12 | [![chat][chat]][chat-url]
|
13 | [![size][size]][size-url]
|
14 |
|
15 | # cache-loader
|
16 |
|
17 | The `cache-loader` allow to Caches the result of following loaders on disk (default) or in the database.
|
18 |
|
19 | ## Getting Started
|
20 |
|
21 | To begin, you'll need to install `cache-loader`:
|
22 |
|
23 | ```console
|
24 | npm install --save-dev cache-loader
|
25 | ```
|
26 |
|
27 | Add this loader in front of other (expensive) loaders to cache the result on disk.
|
28 |
|
29 | **webpack.config.js**
|
30 |
|
31 | ```js
|
32 | module.exports = {
|
33 | module: {
|
34 | rules: [
|
35 | {
|
36 | test: /\.ext$/,
|
37 | use: ['cache-loader', ...loaders],
|
38 | include: path.resolve('src'),
|
39 | },
|
40 | ],
|
41 | },
|
42 | };
|
43 | ```
|
44 |
|
45 | > ⚠️ Note that there is an overhead for saving the reading and saving the cache file, so only use this loader to cache expensive loaders.
|
46 |
|
47 | ## Options
|
48 |
|
49 | | Name | Type | n Default | Description |
|
50 | | :-------------------: | :----------------------------------------------: | :-----------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
51 | | **`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 |
|
52 | | **`cacheKey`** | `{Function(options, request) -> {String}}` | `undefined` | Allows you to override default cache key generator |
|
53 | | **`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) |
|
54 | | **`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) |
|
55 | | **`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 |
|
56 | | **`precision`** | `{Number}` | `0` | Round `mtime` by this number of milliseconds both for `stats` and `dep` before passing those params to the comparing function |
|
57 | | **`read`** | `{Function(cacheKey, callback) -> {void}}` | `undefined` | Allows you to override default read cache data from file |
|
58 | | **`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) |
|
59 | | **`write`** | `{Function(cacheKey, data, callback) -> {void}}` | `undefined` | Allows you to override default write cache data to file (e.g. Redis, memcached) |
|
60 |
|
61 | ## Examples
|
62 |
|
63 | ### Basic
|
64 |
|
65 | **webpack.config.js**
|
66 |
|
67 | ```js
|
68 | module.exports = {
|
69 | module: {
|
70 | rules: [
|
71 | {
|
72 | test: /\.js$/,
|
73 | use: ['cache-loader', 'babel-loader'],
|
74 | include: path.resolve('src'),
|
75 | },
|
76 | ],
|
77 | },
|
78 | };
|
79 | ```
|
80 |
|
81 | ### Database Integration
|
82 |
|
83 | **webpack.config.js**
|
84 |
|
85 | ```js
|
86 | // Or different database client - memcached, mongodb, ...
|
87 | const redis = require('redis');
|
88 | const crypto = require('crypto');
|
89 |
|
90 | // ...
|
91 | // connect to client
|
92 | // ...
|
93 |
|
94 | const BUILD_CACHE_TIMEOUT = 24 * 3600; // 1 day
|
95 |
|
96 | function digest(str) {
|
97 | return crypto
|
98 | .createHash('md5')
|
99 | .update(str)
|
100 | .digest('hex');
|
101 | }
|
102 |
|
103 | // Generate own cache key
|
104 | function cacheKey(options, request) {
|
105 | return `build:cache:${digest(request)}`;
|
106 | }
|
107 |
|
108 | // Read data from database and parse them
|
109 | function read(key, callback) {
|
110 | client.get(key, (err, result) => {
|
111 | if (err) {
|
112 | return callback(err);
|
113 | }
|
114 |
|
115 | if (!result) {
|
116 | return callback(new Error(`Key ${key} not found`));
|
117 | }
|
118 |
|
119 | try {
|
120 | let data = JSON.parse(result);
|
121 | callback(null, data);
|
122 | } catch (e) {
|
123 | callback(e);
|
124 | }
|
125 | });
|
126 | }
|
127 |
|
128 | // Write data to database under cacheKey
|
129 | function write(key, data, callback) {
|
130 | client.set(key, JSON.stringify(data), 'EX', BUILD_CACHE_TIMEOUT, callback);
|
131 | }
|
132 |
|
133 | module.exports = {
|
134 | module: {
|
135 | rules: [
|
136 | {
|
137 | test: /\.js$/,
|
138 | use: [
|
139 | {
|
140 | loader: 'cache-loader',
|
141 | options: {
|
142 | cacheKey,
|
143 | read,
|
144 | write,
|
145 | },
|
146 | },
|
147 | 'babel-loader',
|
148 | ],
|
149 | include: path.resolve('src'),
|
150 | },
|
151 | ],
|
152 | },
|
153 | };
|
154 | ```
|
155 |
|
156 | ## Contributing
|
157 |
|
158 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
159 |
|
160 | [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
161 |
|
162 | ## License
|
163 |
|
164 | [MIT](./LICENSE)
|
165 |
|
166 | [npm]: https://img.shields.io/npm/v/cache-loader.svg
|
167 | [npm-url]: https://npmjs.com/package/cache-loader
|
168 | [node]: https://img.shields.io/node/v/cache-loader.svg
|
169 | [node-url]: https://nodejs.org
|
170 | [deps]: https://david-dm.org/webpack-contrib/cache-loader.svg
|
171 | [deps-url]: https://david-dm.org/webpack-contrib/cache-loader
|
172 | [tests]: https://dev.azure.com/webpack-contrib/cache-loader/_apis/build/status/webpack-contrib.cache-loader?branchName=master
|
173 | [tests-url]: https://dev.azure.com/webpack-contrib/cache-loader/_build/latest?definitionId=4&branchName=master
|
174 | [cover]: https://codecov.io/gh/webpack-contrib/cache-loader/branch/master/graph/badge.svg
|
175 | [cover-url]: https://codecov.io/gh/webpack-contrib/cache-loader
|
176 | [chat]: https://badges.gitter.im/webpack/webpack.svg
|
177 | [chat-url]: https://gitter.im/webpack/webpack
|
178 | [size]: https://packagephobia.now.sh/badge?p=cache-loader
|
179 | [size-url]: https://packagephobia.now.sh/result?p=cache-loader
|