더북(TheBook)

17.1.2 vendor 설정

 

코드 스플리팅을 진행하려면 우선 vendor를 설정해야 합니다. 우리는 프로젝트에서 전역적으로 사용하는 라이브러리들을 다른 파일로 분리할 것입니다. 예를 들어 react, react-dom, redux, react-redux, styled-components 등의 라이브러리처럼 모든 페이지에서 필요하고 함께 사용하는 코드들을 따로 분리하는 것입니다.

여러분이 작성한 코드가 아니라 주로 서드파티 라이브러리들을 vendor로 따로 분리합니다. 이렇게 하면 추후 프로젝트를 업데이트할 때 업데이트하는 파일 크기를 최소화할 수 있습니다.

▲ 그림 17-2 필요한 파일만 업데이트

 

예를 들어 우리가 코드 스플리팅을 적용하고 나중에 코드를 빌드하면 그림 17-2와 유사한 구조로, 즉 여러 파일로 분리해서 저장합니다. 나중에 1.js에 해당하는 코드를 변경한다면 main.js와 1.js만 새로워지겠지요? 서드파티 라이브러리들이 들어 있는 vendor.js와 다른 파일들은 그대로일 것입니다. 이 때문에 웹 브라우저에서는 더욱 오랫동안 캐싱 효과를 누릴 수 있으므로 트래픽 절감 및 로딩 속도를 개선할 수 있습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.