如何调试流型极慢性能?



在工作中我被迫使用流类型,然而非常慢点,这里有一个演示问题的视频:

https://www.youtube.com/watch?v=hloQX8wG0t0

我已经尝试了一些事情,比如删除流类型的定义,摆脱循环依赖,等等…

在这一点上,我的想法,我也不知道如何调试的东西,有没有人有一个想法如何看到保存/每个按键后生成的依赖树?

编辑1:这是我当前的.flowconfig:

[ignore]
.*/node_modules/react-native-keyboard-aware-scroll-view/.*
.*/node_modules/react-native-fbsdk/.*
.*/node_modules/@react-native-community/picker.*
.*/node_modules/@react-native-community/slider.*
; remove when flow is updated. Currently leads to "Cannot assign rest to restState because rest [1] is incompatible with State [2]."
.*/node_modules/redux-persist/lib/persistReducer.js.flow
.*/node_modules/recompose/dist/Recompose.cjs.js.flow
; Ignores sub apps
.*/firebase/**
.*/webapp/**
.*/node_modules/react-native-androw/src.*
; Migration to RN 0,64 causes some random errors
.*/node_modules/react-navigation-redux-helpers
.*/node_modules/react-navigation-redux-helpers
.*/node_modules/react-native-calendars
; .*/node_modules/react-native/Libraries/Interaction
; .*/node_modules/react-native/Libraries/Logbox/Data
; We fork some components by platform
.*/*[.]android.js
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/.buckd/
; Ignore polyfills
node_modules/react-native/Libraries/polyfills/.*
; Flow doesn't support platforms
.*/Libraries/Utilities/LoadingView.js
[untyped]
.*/node_modules/@react-native-community/cli/.*/.*
.*/node_modules/react-native-confetti-cannon/.*
.*/node_modules/react-native-linear-gradient/.*

[libs]
node_modules/react-native/interface.js
node_modules/react-native/flow/
flow/libs
[options]
emoji=true
server.max_workers=1
sharedmemory.hash_table_pow=22
esproposal.optional_chaining=enable
esproposal.nullish_coalescing=enable
; RN 0.64 turns this on, our codebase explodes
; exact_by_default=true
module.file_ext=.js
module.file_ext=.json
module.file_ext=.ios.js
module.system.node.allow_root_relative=true
munge_underscores=true
module.name_mapper='^react-native/(.*)$' -> '<PROJECT_ROOT>/node_modules/react-native/1'
module.name_mapper='^@?[./a-zA-Z0-9$_-]+.(bmp|gif|jpg|jpeg|png|psd|svg|webp|m4v|mov|mp4|mpeg|mpg|webm|aac|aiff|caf|m4a|mp3|wav|html|pdf)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/flow/SVGFlowStub.js'
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
; Types first is the architecture that forces very very strict rules (always export typed results)
; In order to increase the performance of flow (it is painfully slow)
; However our codebase is in no way shape or form ready for this (it throws around 567 type errors)
types_first=false
[lints]
sketchy-null-number=warn
sketchy-null-mixed=warn
sketchy-number=warn
untyped-type-import=warn
nonstrict-import=warn
deprecated-type=warn
unsafe-getters-setters=warn
unnecessary-invariant=warn
signature-verification-failure=warn
[strict]
deprecated-type
nonstrict-import
sketchy-null
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import
[version]
^0.137.0

我还尝试了一个不同的流插件,因为我认为这可能与插件向流服务器发出太多请求有关,这稍微提高了性能,但并不显着

编辑2:

我只是尝试了一堆事情,即删除了一堆我们重新组合的类型,然后也尝试将大部分类型提取到libDef…仍然没有

我真的认为问题出在我们的架构上,我们基本上在types/index.js文件中声明了我们所有的类型,每次我们想要使用它们时,我们都手动导入它们,例如import type { UUID } from 'src/types',因为所有的类型都在那里声明了,所以依赖树没有错,它需要在每次更改/保存

时检查400多个文件。<标题>

3 编辑我最终解析了整个应用程序的依赖树,以找出是否有什么真的错了…我得出的结论是,流没有做错什么,但我们的导入是罪魁祸首,主要是(我认为)由于Redux和Sagas,拉一个导入结束重新检查整个应用。

你可以在这里找到我是如何发现的:

https://ospfranco.com/post/2021/08/25/how-to-visualize-flowtype-dependency-tree/

多谢!

我最终分析了整个应用程序的依赖树,以找出是否真的有问题…我得出的结论是,流没有做错什么,但我们的导入是罪魁祸首,主要是(我认为)由于Redux和Sagas,拉一个导入结束重新检查整个应用。

你可以在这里找到我是如何发现的:

https://ospfranco.com/post/2021/08/25/how-to-visualize-flowtype-dependency-tree/

最新更新