zh-lx / code-inspector

🚀 Click the dom to open your IDE and position the cursor at dom's source code location! 点击页面 dom 来打开 IDE 并将光标自动定位到源代码位置!
https://inspector.fe-dev.cn
MIT License
1.76k stars 127 forks source link

请问为什么 inject-loader 要关闭 cache?可以提供参数控制吗 #80

Closed iworkerweb closed 10 months ago

iworkerweb commented 10 months ago

图片

本地开发,修改文件,然后保存,loader花费时间比较长 图片

开启cache后,修改文件,然后保存,花费时间 图片

zh-lx commented 10 months ago

inject-loader 这个 loader 会起到将交互逻辑注入页面以及启动 node server 服务的作用(这两个需要同步进行,因为 node server 服务端口可能被占用重试,会先启动 node server,确定了 port 后在注入交互逻辑,这样交互才能够在发送请求时找到正确的 port)。如果关闭了缓存,可能会导致项目关闭服务再重新启动后,node server不会启动的问题以及 node server 的端口和交互请求的端口不一致问题。

我在 0.4.6 版本中优化了这部分缓存逻辑,只对注入交互逻辑那一个文件不缓存,其他文件都走缓存,辛苦安装 0.4.6 版本体验下看看是否有比较明显的提升🙏

iworkerweb commented 10 months ago

图片 感觉还是有些慢

zh-lx commented 10 months ago

图片 感觉还是有些慢

看起来有大幅提升了哈,我看看这周再支持下用户自定义入口文件以及编译文件试试

iworkerweb commented 10 months ago

是的 感谢 那你们升级后 我再试试

zh-lx commented 10 months ago

0.5.0 版本中新增了 forceinjectcache 参数可以使用,设置为 true 可以提升性能,可以安装体验下

jo0ger commented 9 months ago

@zh-lx 我加了这个插件,0.5 的版本,并且没有设置 forceInjectcache 这个参数,HMR 好慢呀

这是加之前的

image

这是加之后的

企业微信截图_0dfd520a-3266-4fe9-a2c7-e2e92cc47cf2

差了快 9 倍了,本地开发很不方便

zh-lx commented 9 months ago

@zh-lx 我加了这个插件,0.5 的版本,并且没有设置 forceInjectcache 这个参数,HMR 好慢呀

这是加之前的 image

这是加之后的 企业微信截图_0dfd520a-3266-4fe9-a2c7-e2e92cc47cf2

差了快 9 倍了,本地开发很不方便

要提高编译速度需要显式设置 forceInjectcachetrue;不过需要手动确认下设置为 true 时,你项目启动服务、关闭服务、再次启动后插件功能能否正常使用,能的话就设置 forceInjectcachetrue 就好

jo0ger commented 9 months ago

@zh-lx 我加了这个插件,0.5 的版本,并且没有设置 forceInjectcache 这个参数,HMR 好慢呀 这是加之前的 image 这是加之后的 企业微信截图_0dfd520a-3266-4fe9-a2c7-e2e92cc47cf2 差了快 9 倍了,本地开发很不方便

要提高编译速度需要显式设置 forceInjectcachetrue;不过需要手动确认下设置为 true 时,你项目启动服务、关闭服务、再次启动后插件功能能否正常使用,能的话就设置 forceInjectcachetrue 就好

你指的启动服务关闭服务,指的是 本地的 项目的 dev server 的重启?

zh-lx commented 9 months ago

@zh-lx 我加了这个插件,0.5 的版本,并且没有设置 forceInjectcache 这个参数,HMR 好慢呀 这是加之前的 image 这是加之后的 企业微信截图_0dfd520a-3266-4fe9-a2c7-e2e92cc47cf2 差了快 9 倍了,本地开发很不方便

要提高编译速度需要显式设置 forceInjectcachetrue;不过需要手动确认下设置为 true 时,你项目启动服务、关闭服务、再次启动后插件功能能否正常使用,能的话就设置 forceInjectcachetrue 就好

你指的启动服务关闭服务,指的是 本地的 项目的 dev server 的重启?

是的,部分项目(最新版 create-react-app 创建的)强制缓存会导致二次冷启动插件的 node server 启动失败,vue项目一般不存在此问题。但需要具体验证下

jo0ger commented 9 months ago

@zh-lx 那我先设置 true 吧,如果有问题,再反馈给你

zh-lx commented 9 months ago

@zh-lx 那我先设置 true 吧,如果有问题,再反馈给你

好的

zh-lx commented 9 months ago

@jo0ger 刚刚升级了 0.5.1 版本进行了优化,彻底升级了这部分缓存策略,不需要再手动配置,也解决了部分项目冷启动 node server 无法开启的问题。可以升级到 0.5.1 版本体验一下

jo0ger commented 9 months ago

@jo0ger 刚刚升级了 0.5.1 版本进行了优化,彻底升级了这部分缓存策略,不需要再手动配置,也解决了部分项目冷启动 node server 无法开启的问题。可以升级到 0.5.1 版本体验一下

cacheIdentifiers 这个配置哪提供的?

zh-lx commented 9 months ago

@jo0ger 刚刚升级了 0.5.1 版本进行了优化,彻底升级了这部分缓存策略,不需要再手动配置,也解决了部分项目冷启动 node server 无法开启的问题。可以升级到 0.5.1 版本体验一下

cacheIdentifiers 这个配置哪提供的?

cacheIdentifiers 不是 webpack 内置的属性,是我自己定义的一个参数,这样保证每次冷启动时这个参数是不同的能执行 inject-loader 启动 node server 服务。然后 HMR 就全部走 cacheable: true 的全缓存策略

jo0ger commented 9 months ago

我记得 babel-loader 也有这个参数