unplugin-svg-component icon indicating copy to clipboard operation
unplugin-svg-component copied to clipboard

当 svg 文件从目录「剪切」到不相关目录后,热更新并没有触发,手动刷新浏览器也没有任何更新

Open pany-ang opened this issue 1 year ago • 24 comments

  • macos / vscode
  • "unplugin-svg-component": "0.10.4"
  • 不需要特定的最小复现,按照标题操作即可,注意一定要是「剪切」操作

预期:有热更新是最好的,如若不行,建议在手动刷新浏览器时进行兜底操作(重新生成 .d.ts 等)

pany-ang avatar Dec 02 '24 09:12 pany-ang

经过测试,该 bug 是在 0.10.4 版本引入的,0.10.3 没有该问题

pany-ang avatar Dec 02 '24 09:12 pany-ang

感谢反馈, 确实在 0.10.4 的时候, 启动服务就生成了d.ts, 但如果没有访问服务, 就不会开启热更新, 热更新的启动时机也确实要更换到启动服务的时候.

Jevon617 avatar Dec 03 '24 03:12 Jevon617

@pany-ang 最新版本0.11.0 已修复.

Jevon617 avatar Dec 03 '24 06:12 Jevon617

测试了一下,并没有完全修复。我提到的问题和你说的「但如果没有访问服务, 就不会开启热更新」并不是一回事。

pany-ang avatar Dec 03 '24 07:12 pany-ang

~在最新的 0.12.0 版本下,先启动服务,再访问服务(也可以不访问),然后剪切 svg 文件到不相关目录即可复现该问题~

我重新描述一下:在最新的 0.12.0 版本下,先启动服务,再访问服务(也可以不访问),然后剪切 svg 文件到不相关目录,此时热更新没有触发 .d.ts 文件也没有更新

pany-ang avatar Dec 03 '24 08:12 pany-ang

刚测了一下最新的 0.12.1 版本:先启动服务,再访问服务,然后剪切 svg 文件到不相关目录,此时热更新没有触发 .d.ts 文件也没有更新,但是如果这时候手动刷新浏览器,那么 icon 将会渲染正确,并且更新了 .d.ts 文件。

当有了这个刷新浏览器的兜底逻辑,「剪切」操作造成的影响变得很小了

pany-ang avatar Dec 04 '24 09:12 pany-ang

我这里测试一直是可以触发热更新的, 不管是剪切还是删除.

Jevon617 avatar Dec 04 '24 09:12 Jevon617

我猜测 可能是在你的电脑上, chokidar 监听不到剪切操作?

Jevon617 avatar Dec 04 '24 10:12 Jevon617

我猜测 可能是在你的电脑上, chokidar 监听不到剪切操作?

不是很清楚。新增、删除、修改、从外部剪切进来。这几个操作都没问题。只有从内部将 svg 剪切出去时才有问题。

pany-ang avatar Dec 04 '24 10:12 pany-ang

应该是这个原因:https://github.com/vitejs/vite/issues/12912 只要我在main.ts里面import并注册组件vite HMR就会失效

IllegalCreed avatar Dec 24 '24 02:12 IllegalCreed

我大概知道原因了,应该是hmr运行到到这里崩掉了,于是就没有hmr了,我在dist里面把genCode函数里面的hmrCode那段字符串删除了,就好了,我不太清楚原理。

IllegalCreed avatar Dec 24 '24 03:12 IllegalCreed

@IllegalCreed 可以给我一个可复现的demo吗, 我瞅瞅.

Jevon617 avatar Dec 24 '24 03:12 Jevon617

@IllegalCreed 可以给我一个可复现的demo吗, 我瞅瞅.

我刚试了新建ts或者js的vue+vite项目都无法复现,我只能试试精简一下我现在的项目了:https://github.com/IllegalCreed/svg-hmr-demo

IllegalCreed avatar Dec 24 '24 04:12 IllegalCreed

@Jevon617 https://github.com/IllegalCreed/svg-hmr-demo 可以了,我还是不太清楚这个和我新建的项目有啥区别,但是在这里面就可以复现,你可以修改界面元素,比如header的文字,hmr可以在终端看到确实触发了,但是页面并没有变化。清空genCode函数里面的hmrCode字符串就可以恢复正常了

IllegalCreed avatar Dec 24 '24 05:12 IllegalCreed

@IllegalCreed 感谢

Jevon617 avatar Dec 24 '24 05:12 Jevon617

@IllegalCreed 还是无法复现... image

Jevon617 avatar Dec 24 '24 09:12 Jevon617

@Jevon617 抱歉,我似乎找到复现的方法了,就是提前启动一个开发服务器,把端口占用,然后在启动这个,相同端口,vite其实会自动避开端口号占用,不过hmr失效了。

IllegalCreed avatar Dec 25 '24 01:12 IllegalCreed

按你说的步骤一样无法复现, hmr正常工作.

Jevon617 avatar Dec 25 '24 02:12 Jevon617

我又还原了部分代码,目前demo可能会报很多接口超时错误,不过没关系应该。现在在端口占用的情况下我这里是稳定复现的,不清楚是不是和其他环境有关

IllegalCreed avatar Dec 25 '24 05:12 IllegalCreed

demo路由现在是homev2

IllegalCreed avatar Dec 25 '24 05:12 IllegalCreed

无法复现... image

Jevon617 avatar Dec 25 '24 05:12 Jevon617

@Jevon617 我放弃了,那我也不知道怎么回事了。我在demo根目录上传了两个录像,一个是不会触发hmr的录像,一个是修改hmrcode后修复hmr的录像

IllegalCreed avatar Dec 25 '24 06:12 IllegalCreed

@IllegalCreed 没法复现的话, 只能你自己定位问题了, 当然也可以关闭 svg 的 hmr.

Jevon617 avatar Dec 25 '24 07:12 Jevon617

关闭hmr我试过了,但是gencode函数中hmrcode字符串的拼接并不受hmr选项的影响,所以在我这里问题依然存在。我现在只能暂时注释来临时解决问题。不过还是多谢大佬,后面我再仔细研究一下吧。

IllegalCreed avatar Dec 25 '24 07:12 IllegalCreed