코드분할
-
[React] 코드 분할과 React.lazyReact 2022. 8. 11. 16:46
코드 분할 Code-Splitting 번들링 Bundling 대부분 React 앱들은 Webpack, Rollup, Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 “번들 된” 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다. 코드 분할 하지만 사용자의 앱이 커지면 번들도 커지게 된다. 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 한다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 “나누는” 것입니다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능입니다. 코드 분할은 앱을 “지연 로딩” 하게 도..