vite下,修改node_modules源码后,在浏览器源码中看不到改动的内容

一、解决办法

vite官网 - 缓存
vite下,修改node_modules源码后,在浏览器的源代码中看不到改动的内容,查看vite文档后发现了这么一段话:

文件系统缓存

Vite 会将预构建的依赖缓存到 node_modules/.vite。它根据几个源来决定是否需要重新运行预构建步骤:

  • package.json 中的 dependencies 列表
  • 包管理器的 lockfile,例如 package-lock.json, yarn.lock,或者 pnpm-lock.yaml
  • 可能在 vite.config.js 相关字段中配置过的

只有在上述其中一项发生更改时,才需要重新运行预构建。

如果出于某些原因,你想要强制 Vite 重新构建依赖,你可以用 --force 命令行选项启动开发服务器,或者手动删除 node_modules/.vite 目录。

浏览器缓存

解析后的依赖请求会以 HTTP 头 max-age=31536000,immutable 强缓存,以提高在开发时的页面重载性能。一旦被缓存,这些请求将永远不会再到达开发服务器。如果安装了不同的版本(这反映在包管理器的 lockfile 中),则附加的版本 query 会自动使它们失效。如果你想通过本地编辑来调试依赖项,你可以:

  1. 通过浏览器调试工具的 Network 选项卡暂时禁用缓存;
  2. 重启 Vite dev server,并添加 --force 命令以重新构建依赖;
  3. 重新载入页面。

二、实操结果

操作1 操作2 浏览器中是否可以看到修改 .vite/deps是否可以看到修改
修改源码 直接刷新页面
执行vite dev后,刷新页面
执行vite dev --force后,刷新页面
执行vite dev --force后,刷新页面,再次修改代码,刷新页面
修改.vite/deps中源码 直接刷新页面
posted @   槑孒  阅读(1283)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示