Webpack 中如何配置持久化缓存？

推荐答案

在 Webpack 中配置持久化缓存可以通过以下几种方式实现：

1. 使用 cache 配置项：

   module.exports = {
     cache: {
       type: 'filesystem',
       buildDependencies: {
         config: [__filename], // 当配置文件发生变化时，缓存失效
       },
     },
   };

2. 使用 cache-loader：

   // www.javascriptcn.com code example
   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           use: [
             'cache-loader',
             'babel-loader',
           ],
         },
       ],
     },
   };

3. 使用 hard-source-webpack-plugin：

   const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
   
   module.exports = {
     plugins: [
       new HardSourceWebpackPlugin(),
     ],
   };

本题详细解读

1. 使用 cache 配置项

Webpack 5 引入了 cache 配置项，允许你将缓存持久化到文件系统中。通过设置 type: 'filesystem'，Webpack 会将构建缓存存储在磁盘上，从而在后续构建中重用这些缓存，显著提升构建速度。

• buildDependencies：用于指定哪些文件或目录的变化会导致缓存失效。例如，config: [__filename] 表示当配置文件发生变化时，缓存会失效。

2. 使用 cache-loader

cache-loader 是一个 Webpack 插件，它可以将 loader 的处理结果缓存到磁盘上。通过将 cache-loader 放在其他 loader 之前，可以避免重复处理相同的文件，从而加快构建速度。

• 适用场景：适用于那些处理时间较长的 loader，如 babel-loader 或 ts-loader。

3. 使用 hard-source-webpack-plugin

hard-source-webpack-plugin 是一个第三方插件，它通过将模块的编译结果缓存到磁盘上来加速 Webpack 的构建过程。与 cache-loader 不同，hard-source-webpack-plugin 缓存的是整个模块的编译结果，而不仅仅是 loader 的处理结果。

• 优点：可以显著减少重复编译的时间，特别是在大型项目中效果尤为明显。
• 缺点：可能会占用较多的磁盘空间，且在某些情况下可能会导致缓存不一致的问题。

通过以上几种方式，你可以在 Webpack 中配置持久化缓存，从而提升构建效率。