code splitting

코드 분할이란? 리액트에서의 코드 분할에 대해 알아보겠습니다. 유저가 처음 웹 페이지에 접속했을때 빌드된 main.js 파일을 로드한다고 생각해봅시다. 만약 프로젝트의 규모가 커진다면 main.js 파일의 크기 또한 커질 것이고 이를 로드하는데 많은 시간이 걸리므로 사용자 경험의 퀄리티가 저해될 것입니다. 따라서 main.js를 여러 파일로 나눠, 용량을 줄여줘야만 하겠죠? 여기서 사용하는 기술이 코드 분할입니다. 코드 분할의 방법 코드 분할을 하기 위해서는 물론 bundler가 설치되어있어야겠죠? 저는 제일 익숙한 webpack을 사용했습니다. 내장 import 함수 사용하기 코드 분할을 하는 가장 좋은 방법은 import() 문법을 사용하는 것이라고 공식 docs에 나와있습니다. 아래와 같이 butt..