React.lazy1 [React.js] 성능 향상을 위한 코드 분할(React.lazy, Suspense) 코드 분할(Code Spliting)이 필요한 이유 렌더링 최적화 도중 lighthouse 성능 측정 점수가 초반보다 현저히 떨어진 것을 알 수 있었다. lighthouse에서 권장하는 방법 중 하나가 사용하지 않는 자바스크립트 줄이기였는데, 서버 측에서 렌더링하지 않는 경우 'React.lazy()'로 자바스크립트 번들을 분할하는 방법을 사용하라는 것이었다. 대부분의 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 번들 파일을 웹 페이지에 포함해 한 번에 전체 앱을 로드한다. 아래는 여러 파일이 하나의 파일로 번들링되는 예시이다. App // app.js import { add } from './math.js'; console.log.. 2022. 5. 19. 이전 1 다음 반응형
