前言
Webpack 是前端开发中常用的打包工具，随着项目规模的扩大，打包时间变得越来越长，给我们的开发带来了很多困扰。为了解决这个问题，Webpack 官方推出了开发者工具 HardSourceWebpackPlugin，通过缓存打包结果来加速二次打包的速度，本文将详细介绍如何使用 HardSourceWebpackPlugin 来优化 Webpack 的构建速度。
注：本文以 Webpack v5.60.0 版本为例。
安装 HardSourceWebpackPlugin
在使用 HardSourceWebpackPlugin 之前，需要先安装它：
npm install --save-dev hard-source-webpack-plugin
启用 HardSourceWebpackPlugin
在 Webpack 配置文件中引入 HardSourceWebpackPlugin，并将其添加到 plugins 中：
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ... 其他配置项省略
plugins: [
new HardSourceWebpackPlugin(),
],
};这样，HardSourceWebpackPlugin 就会在 Webpack 构建过程中为我们自动缓存所有中间结果。
配置 HardSourceWebpackPlugin
在默认情况下，HardSourceWebpackPlugin 会将缓存存储在 .cache/hard-source 目录下，可以通过 cacheDirectory 选项来自定义缓存目录：
new HardSourceWebpackPlugin({
cacheDirectory: 'node_modules/.cache/hard-source',
});另外，HardSourceWebpackPlugin 还有一些其他配置项：
cachePrune：在自动清理缓存前的最大缓存大小（默认为 1GiB）environmentPaths：为环境设置不同的缓存目录recordsPath：自定义记录文件的路径configHash：webpack 配置发生变化时，是否清除缓存
可根据实际需求进行调整。
测试缓存效果
在添加了 HardSourceWebpackPlugin 后，我们再次构建项目，第一次打包会如往常一样耗时较长，但是第二次打包就会快得多，因为 HardSourceWebpackPlugin 缓存了编译过程，并将其存储在硬盘上，下次打包时可以直接使用之前的缓存结果。
遇到的问题及解决方法
缓存目录不生效
如果配置了 cacheDirectory，但缓存目录没有被创建或缓存数据保存在默认缓存目录（.cache/hard-source）中，则可能是下列问题导致的：
- 没有清空前一轮的缓存。应该在配置文件中加上
cleanCache: true选项。这样就能清空之前的缓存并生成新缓存。
new HardSourceWebpackPlugin({
cacheDirectory: 'node_modules/.cache/hard-source',
cleanCache: true,
});- 没有正确设置
cacheDirectory。在 Webpack 配置文件中确认了cacheDirectory值正确，切记要去项目目录下看看该目录是否存在。有时候硬盘空间不足以保存此目录，也会导致缓存目录不被创建。
Windows 上出现用不了的报错
在 Windows 系统上可能会出现下面的报错：
[Error: HardSourceWebpackPlugin] Cached data was found for "publicPath" for compiler "D:\workspace\projectPath\node_modules\webpack\lib\Compiler.js" but the stored hash doesn't match the expected hash. The cache is invalid, so we need to rebuild the common cache.
使用 HardSourceWebpackPlugin 时，为了保证跨平台使用的兼容性，它把路径分隔符转换为 /，这是在 Linux 系统中正常的行为，但在 Windows 上可能会导致错误。
解决方法是设置 configHash 选项的值为一个函数，我们可以使用 webpack-config-utils 库中的 createConfigHash 函数来处理此问题：
npm install --save-dev webpack-config-utils
-- -------------------- ---- -------
----- - ---------------- - - --------------------------------
-------------- - -
-- --- -------------------
-------- -
--- -------------------------
----------- -------- --------------- -
------ ------------------------------- - -------------- ----------------- ---
-
--
--
--总结
HardSourceWebpackPlugin 可以极大地加快 Webpack 构建速度，尤其是对于大型项目来说，更是可以让开发效率大大提高。当然，对于小型项目而言，使用 HardSourceWebpackPlugin 可能并没有什么明显的优势，还会有一定的成本。所以，在使用该插件之前，建议先结合自己的项目需求进行考虑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64648eb6968c7c53b056e937