프로젝트의 Ligthouse를 확인해봤다. ?! 성능이 갈려버렸다... 그래서 바로 성능 개선을 나서기로 했다! 1. Code Splitting import Header from '../components/header'; import Test from '../pages/test'; import TestCreate from '../pages/testCreate'; // ... 다음과 같이 Router 를 사용하는 부분에서 각 페이지 컴포넌트를 Splitting 할 계획이다. 그 이유는 React 공식 사이트에서도 나오는데, 현재 페이지에서 사용자 경험을 해치지 않고 번들을 나누기 위해서는 라우트가 가장 확실하기 때문이다. 사용할 것은 React에서 제공하는 lazy와 Suspense이다. lazy는 동적으..

0. 들어가면서 webpack과 babel을 통해서 만든 프로젝트에 Code Splitting을 공부하기 위해서 추가로 작업한 것이다. 1. Code Splitting? 우리가 일반적으로 yarn build을 사용하면 하나의 번들 파일이 만들어진다. 프로젝트의 규모가 커지면서 번들 파일도 같이 점점 커지게 된다. 크기가 커진 번들 파일을 화면에 로드하는 경우 시간이 걸어지는 결과가 발생한다. 즉, 사용자가 느끼는 서비스의 만족도가 낮아지게 된다. 이때, 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것이 Code Splitting이다. 여러 개의 번들 파일로 나누어서 실제 로드가 될 화면에 필요한 번들 파일만 불러오고 나머지 번들 파일은 호출하지 않고 필요할 때 호출하면서 더 빠른 속도로 화면에 보이..