Webpack 是一个强大的前端构建工具，它可以将多个静态资源打包成一个或多个文件，同时它也可以处理各种类型的文件，如 JavaScript、CSS、图片等。但是，Webpack 的构建速度也是我们需要关注的问题，特别是在大型项目中，构建速度会对开发效率产生重大影响。
Webpack 提供了多种优化方法来提高构建速度，其中缓存就是其中一种非常有效的方法。本文将详细介绍 Webpack 如何使用缓存提高构建速度。
缓存原理
缓存是指将一些预处理结果缓存下来，以便下次使用时可以快速读取，从而提高效率。在 Webpack 中，缓存可以分为两种：
文件缓存：将已经处理过的文件缓存到磁盘中，下次构建时可以直接读取，无需重新处理。
内存缓存：将已经处理过的模块缓存到内存中，下次构建时可以直接读取，无需重新解析和编译。
这两种缓存方式都可以提高构建速度，但是文件缓存的效果更为明显，因为它可以跨进程和跨机器使用，而内存缓存只能在同一进程中使用。
文件缓存
Webpack 的文件缓存是通过 cache-loader 实现的。cache-loader 可以将其他 loader 处理过的文件缓存到磁盘中，下次构建时可以直接读取，无需重新处理。
cache-loader 的使用非常简单，只需要在其他 loader 之前添加 cache-loader 即可。例如，我们可以将 babel-loader 和 cache-loader 组合使用：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
---- ---------------- ----------------
-------- --------------
-
-
-这样，当我们再次构建时，Webpack 将会检查缓存目录中是否存在已经处理过的文件，如果存在，则直接读取缓存文件，否则重新处理文件。
cache-loader 的缓存目录默认是在项目根目录下的 .cache 目录中，我们也可以通过 cacheDirectory 选项来设置缓存目录：
{
loader: 'cache-loader',
options: {
cacheDirectory: path.resolve(__dirname, '.webpack_cache')
}
}内存缓存
Webpack 的内存缓存是通过 hard-source-webpack-plugin 实现的。hard-source-webpack-plugin 可以将已经处理过的模块缓存到内存中，下次构建时可以直接读取，无需重新解析和编译。
hard-source-webpack-plugin 的使用也非常简单，只需要在 Webpack 配置文件中添加该插件即可：
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ...
plugins: [
new HardSourceWebpackPlugin()
]
}总结
Webpack 的缓存优化可以有效地提高构建速度，特别是在大型项目中，优化效果更为明显。我们可以使用 cache-loader 将已经处理过的文件缓存到磁盘中，也可以使用 hard-source-webpack-plugin 将已经处理过的模块缓存到内存中。这两种方式都可以大大提高构建速度，使我们更加高效地开发前端项目。
示例代码
以下是一个使用 cache-loader 和 hard-source-webpack-plugin 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------------- - --------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
---- ---------------- ----------------
-------- --------------
-
-
--
-------- -
--- -------------------------
-
--在这个示例中，我们将 cache-loader 和 babel-loader 组合使用，同时也使用了 hard-source-webpack-plugin 插件。这样，在下次构建时，Webpack 将会从缓存中读取已经处理过的文件和模块，从而大大提高构建速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66188b61d10417a2228d6556