react项目如何清除缓存

清除 React 项目缓存的几种方法

删除 node_modules 和重新安装依赖
进入项目根目录，运行以下命令：

rm -rf node_modules package-lock.json
npm install

此方法彻底清除依赖缓存，解决因依赖版本冲突或损坏导致的问题。

清除浏览器缓存
在开发过程中，浏览器可能缓存旧资源。强制刷新（Ctrl + Shift + R 或 Cmd + Shift + R）或使用无痕窗口可避免缓存干扰。生产环境中，通过文件名哈希（如 main.[hash].js）或设置 HTTP 缓存头管理缓存。

清理 Webpack 构建缓存
若项目使用 Webpack，删除缓存目录：

rm -rf .cache-loader  # 若使用 cache-loader
rm -rf node_modules/.cache  # 默认 Webpack 缓存位置

或在 webpack.config.js 中配置 cache: false 禁用缓存。

清除 Babel 或 TypeScript 缓存
Babel 默认缓存位置为 node_modules/.cache/babel-loader，TypeScript 缓存可通过以下命令清除：

rm -rf node_modules/.cache/ts-loader  # ts-loader
tsc --build --clean  # TypeScript 项目引用

使用 npm cache clean
清理 npm 全局缓存（影响所有项目）：

npm cache clean --force

注意：此操作会删除全局缓存，可能导致后续安装变慢。

配置构建工具生成唯一哈希
在 Webpack 配置中，为输出文件添加内容哈希，确保文件更新后哈希变化：

output: {
  filename: '[name].[contenthash].js',
}

使用 create-react-app 的解决方案
CRA 项目可通过以下方式清除缓存：

npm run build -- --no-cache  # 构建时禁用缓存

或删除 build 文件夹后重新构建。