背景
Webpack 是目前 JavaScript 生态中最流行的构建工具之一，它可以将多个模块打包成一个或多个静态资源文件，从而提高应用的性能和可维护性。
在 Webpack 中，Loaders 扮演了非常重要的角色。Loaders 可以将不同类型的模块转换成 JavaScript 模块，以便 Webpack 能够正确地处理它们。
然而，如果我们有大量的模块需要处理，比如说几百个或几千个，那么 Loaders 的转换过程就会变得非常耗时，从而导致项目构建的效率降低。
Loaders 的缓存机制
针对 Loaders 转换过程耗时的问题，Webpack 提供了缓存机制，以便减少重复的操作，从而提高构建效率。具体而言，Webpack 的缓存机制分为两个部分：
1.输入缓存：Webpack 会将每一个 Loader 中的输入进行缓存，以便下次使用时可以跳过这些步骤。
2.文件编译缓存：当 Loader 转换文件时，Webpack 会缓存结果，以便以后使用相同的文件时可以跳过这些步骤。
这两种缓存机制都是默认开启的。在大多数情况下，它们可以显著提高应用的构建效率。但是，如果我们需要重构代码，那么这些缓存可能会导致一些问题，因为 Webpack 不会检查输入文件的修改时间。
为了解决这个问题，Webpack 还提供了一种 Hash 缓存机制。Hash 缓存会根据输入的 Hash 值来存储和获取结果，这样即使输入文件内容发生变化，Webpack 也会重新编译这些文件。
如何开启 Loaders 缓存
实际上，开启 Loaders 的缓存非常简单，只需要在 webpack.config.js 配置文件中加入以下代码即可：
// javascriptcn.com 代码示例
module.exports = {
// ...
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true, // 开启缓存
},
},
},
],
},
// ...
};在上面的代码中，我们开启了 babel-loader 的缓存。在使用 Babel 进行 JavaScript 转换时，每个文件都需要进行转换，这可能会非常耗时，特别是在处理大型项目时。因此，开启 babel-loader 的缓存机制可以大幅减少编译时间。
示例代码
下面是一个实际的示例，用于演示如何开启 Loaders 的缓存。在这个例子中，我们将使用 babel-loader 作为 Loaders。
首先，让我们安装必要的依赖项，包括 Webpack 和 babel-loader：
npm install webpack babel-loader --save-dev
然后，我们可以创建一个包含 ES6 代码的 JavaScript 文件，并创建一个 webpack.config.js 文件来配置我们的 Webpack 构建。
src/index.js：
const multiply = (x, y) => x * y; console.log(multiply(2, 3));
webpack.config.js：
// javascriptcn.com 代码示例
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: __dirname + '/dist',
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
},
],
},
};现在我们可以运行 Webpack 构建我们的应用程序了：
npx webpack
Webpack 将首先进行 babel-loader 转换，并将其缓存在 .cache 目录中（默认情况下）。每当我们对输入文件进行更改时，Webpack 都会使用缓存的转换结果，而不会重新导致外部的转换过程。
总结
在使用 Webpack 和 Loaders 时，开启缓存可以显著提高项目的构建效率。我们可以通过使用 Hash 缓存机制来避免缓存可能带来的问题，以便在需要重新构建项目时获取正确的结果。
最后，如果您在使用 Loaders 时遇到了性能问题，那么我们强烈建议您尝试开启缓存机制，这将有助于提高构建效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6541abd67d4982a6ebb422ce