React Code splitting

MERN 프로젝트를 해보던중 코드 스플리팅이란 개념을 맞닥드렸다.. 이게 무엇인가?

 

Code splitting 

is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.

코드 분할(code spliting)은 코드를 다양한 번들이나 컴포넌트로 분할하여 필요에 따라 로드하거나 병렬로 로드하는 것을 말한다.

 

 

 

As an application grows in complexity or is maintained, CSS and JavaScripts files or bundles grow in byte size, especially as the number and size of included third-party libraries increases. To prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files. Then features required at page load can be downloaded immediately with additional scripts being lazy loaded after the page or application is interactive, thus improving performance. While the total amount of code is the same (and perhaps even a few bytes larger), the amount of code needed during initial load can be reduced.

 

Code splitting is a feature supported by bundlers like Webpack and Browserify which can create multiple bundles that can be dynamically loaded at runtime.

애플리케이션이 복잡해지면서 이를 유지하고, CSS와 자바스크립트 파일 또는 번들, 특히 포함된 외부 라이브러리의 수와 크기가 증가함에 따라 용량이 증가합니다.  엄청난 수의 파일들의 다운로드의 필수요건을 방지하기위해 스크립트를 여러개의 작은 파일로 나눌 수 있습니다. 그러면 어떠한 기능이 요구될때 해당 페이지는 애플리케이션이 상호작용하거나 페이지가 레이지 로딩 후 추가된 스크립트를 바로 다운로드 받아서 가져올 수 있습니다. 따라서 성능이 개선됩니다. 초기 시작할때 총 코드량은 줄어들고, 전체 코드량을 같거나 혹은 몇 바이트가 살짝 높을 수 있습니다.

코드 분할은 런타임 때 동적으로 로드될 수 있는 여러 번들을 만들 수 있는 웹팩 및 브라우저파이와 같은 번들러에서 지원되는 기능입니다.

 

 

https://developer.mozilla.org/en-US/docs/Glossary/Code_splitting

Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

 

 

프론트엔드는 일단 첫번째로 데이터를 가져와서 화면에 뿌려주는 역할을 하지만 이런 웹의 성능적인 개선을 신경써야하는 만큼 코드 스플릿이 필요하다고 생각하고 그게 맞다고 생각합니다 하하. 

 

https://reactjs.org/docs/code-splitting.html

Code-Splitting – React

 

 

리액트 공홈에 이렇게 친절하게 라우팅에서 사용법을 알려주셔서 그대로 적용했습니다

 

 

그 후 네트워크 탭을 통해서 chunk로 js가 따로 들어오는 지 확인까지 하면 완성입니다. 

 

 

이상 React lazy, suspense를 이용한 suspense 였습니다.