React Devtools production ビルドで計測
ref.
開発ビルドで計測しても意味ない
production ビルドで計測
実は単純じゃない
1. webpack alias で変更
react-dom -> react-dom/profiling
scheduler/tracing -> scheduler/tracing-profiling
2. minify 時のコンポーネントの mangling をオフる
code:js
new TerserPlugin({
terserOptions: {
mangle: {
safari10: true,
},
keep_classnames: true,
keep_fnames: true,
},
})
3. CPU slowdown とかも検討すること
React.Profiler 使い方
code:js
<Profiler id="SomeComponent" onRender={(
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
interactions,
) => {
// 加工
}}>
</Profiler>