Profiler 개요

• https://kentcdodds.com/blog/profile-a-react-app-for-performance#update-the-webpack-config-for-production-profiling

• https://web.dev/rendering-performance/

• https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

프로파일 전 셋팅

• development mode에서 개발용으로 돌아가는 코드 제거하고 성능 테스트하기
• 웹팩
• production build
• 그런데 profiler와 연결시킬 수는 있어야 하므로 별도의 설정을 거쳐야함.
• CRA로 앱을 만들었으면 react-scripts@>=3.2.0가 내장되어 있을텐데, 그러면 다음의 명령어로 원하는 바를 이룰 수 있다.

$ npx react-scripts build --profile

• 난독화 해제하기
• minify 하면서 함수 이름, 변수명 등 많이 변경돼서 파악하기 어려우므로 이름을 유지하도록 설정 변경

// ... some config ...
new TerserPlugin({
  terserOptions: {
    // ... some other config ...
    mangle: {
      safari10: true,
    },
    keep_classnames: true,
    keep_fnames: true,
    // ... some more config ...
  },
  // ... even more config ...
})

• 성능 실제 유저 수준으로 낮춰서 테스트하기
• CPU 낮추는 설정