react-native在使用metro构建时为了提升构建效率采用了缓存机制,虽然在打包时有效地提升了打包速度,但是在进行问题排查时虽然修改了JS代码,但是由于优先使用了缓存,会造成变更后的代码一直无法生效。
设置缓存
由于构建打包采用的是metro,通过resetCache = true,进行清除缓存
1 | // metro.config.js |
resetCache=true
的作用是每次构建时均清空缓存,其默认是false,可以加快构建速度。
但是在某些情况下会出现因缓存导致的问题。
缓存地址
虽然我们通过设置不使用缓存可以有效的避免缓存问题,但是技术人员需要找到具体的缓存地址,通过merto的代码进行寻根
当配置了resetCache:true,
,构建是会新增一行打印输出:the transform cache was reset.
;
我们可以在/metro/src/lib/TerminalReporter.js
,找到相关代码:
1 | // metro/src/lib/TerminalReporter.js 236行 |
再通过transform_cache_reset
这个事件,我们可以找到这个时间发出的地方:
1 | //metro/src/Server.js 85行 |
在metro/src/Server中判断是否要清除缓存,如果是true就执行clear;
通过cacheStores
,我们可以找到初始化的内容
1 | //metro-config/src/defaults/index.js 135行 |
可以看到,缓存地址用的系统缓存,我们可以执行下os.tmpdir()
找到对应的系统缓存的文件夹
1 | //test.js |
打开这个文件可以看到有很多的缓存文件,我们要找的metro的构建缓存就在metro-cache
中