JavaScript 中怎么在 Webpack 中使用 HardSource 提升冷启动性能-js教程-PHP中文网

hardsourcewebpackplugin 是 webpack 中提升开发冷启动速度最有效的缓存方案之一，通过持久化模块解析、依赖图构建、ast 转换等中间结果到磁盘，二次启动直接复用，典型项目启动耗时从 90+ 秒降至 10–20 秒。

javascript 中怎么在 webpack 中使用 hardsource 提升冷启动性能

HardSourceWebpackPlugin 是 Webpack 中提升开发冷启动速度最有效的缓存方案之一，尤其适合中大型项目。它不是简单跳过编译，而是把模块解析、依赖图构建、AST 转换等中间结果持久化到磁盘，第二次启动时直接复用，避免重复计算。

安装与基础启用

只需两步就能接入：

安装插件：npm install --save-dev hard-source-webpack-plugin
在 webpack 配置的 plugins 数组中加入实例：
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
plugins: [new HardSourceWebpackPlugin()]

注意：该插件只对开发环境（webpack serve）效果显著，生产构建不建议启用；首次运行无加速，第二次起才生效——这是正常现象，缓存需要一次“预热”。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

配置缓存路径与哈希策略

默认缓存写入 node_modules/.cache/hard-source/[confighash]，但建议显式指定，避免因 node_modules 清理导致缓存丢失：

cacheDirectory 设为绝对路径，例如 path.resolve(__dirname, '.cache/hard-source')
configHash 用于区分不同 webpack 配置（如 dev/prod）。推荐使用 node-object-hash 生成稳定哈希：
configHash: require('node-object-hash')({ sort: false }).hash
environmentHash 控制何时刷新缓存。应包含 lock 文件（package-lock.json 或 yarn.lock），确保依赖变更后自动重建缓存

规避常见冲突点

某些 loader 或插件会干扰 HardSource 缓存命中，需针对性排除：

mini-css-extract-plugin 的 loader 默认被忽略，若发现 CSS 不更新，可手动添加 test: /mini-css-extract-plugin[\/].*loader/
避免在 resolve.alias 中动态拼接路径（如 path.resolve(...)），会导致 configHash 波动，频繁清缓存
禁用 cache: { type: 'filesystem' }（Webpack 5 内置缓存）与 HardSource 同时启用，二者机制重叠且可能冲突