Webpack - Code Spliting

React를 처음으로 배우게 만들었고 지금까지도 진행중인 CC-Show라는 프로젝트를 진행하면서 좀더 코드를 고도화 시킬 수 있는 방법은 없을까 하고 여러 오픈소스들을 많이 찾아보았다. React-Router이 Plain Router를 사용하려다 보니 require.ensure라는 함수를 통해 라우터에 컴포넌트를 넘겨주는 코드를 보았다. 처음보는 코드라 찾아봤는데 꽤 재미있는 내용이 나왔다.

■ Single Page Application

Single Page Application - SPA는 말 그대로 페이지가 하나인 웹사이트이다. Single Page Application이면 진짜 페이지가 한개인가? 라는 생각이 들 것이다. 대부분의 어플리케이션의 경우 페이지 하나로는 절대적으로 구현을 못하는것이 대부분이다. 그래서 우리가 잘 알고 있는 고전적인 방법은 라우터별로 html, js, css파일등 페이지를 그려주기 위한 파일들을 그때그때 다운로드 받고 보여주는 방식이였다. 하지만 SPA는 해당 파일들을 한 번에 다운로드 받고 js에 의해서 보여지는 View만 달라지는 방식으로 구현된다.

하지만 이런 SPA 방식에서 View만 바뀌게 되면 기존 웹사이트와 같은 뒤로가기, URL로 특정 페이지 접근하기 등 URL과 관련된 접근을 하지 못한다. 그래서 이런 SPA를 개발할 때는 프론트엔드 router 모듈을 별도로 사용하게 된다. 프론트엔드 router 모듈을 사용하게 되면 고전적인 서버의 router와 같은 모습으로 동작하게 된다.

SPA의 장점은 어플리케이션이 구동되는대에 필요한 모든 파일을 서버로부터 한번에 받아오기 때문에 어플리케이션의 속도가 빠르다. 하지만 당장 사용되지 않는 파일들도 가져오기 때문에 페이지 초기 구동 속도가 매우 저하된다.

■ Code Spliting - Webpack

Webpack은 번들링 도구이다. Code Spliting은 이러한 번들링 도구인 Webpack의 가장 강력한 기능중 하나이다. 기본적으로는 webpack이 번들을 만들 때 모든 소스코드를 하나의 번들 파일로만 만든다. 하지만 이렇게 만들어진 번들을 사용하게 되면 사용하지 않는 리소스도 모두 로드하기 때문에 리소스 낭비가 발생할 수 있다. 그래서 Code Spliting을 통해 번들을 잘게 쪼개고 필요한 번들만 필요할 때 동적으로 불러와서 사용할 수 있다.

이렇게 작게 쪼갠 번들을 '청크'라고 한다. 작은 번들을 구현하고 이 번들단위로 동적으로 로드하기 때문에 리소스 부하를 관리할 수 있다.

Webpack에서는 Code Spliting을 위한 기능을 3가지를 제공한다.

Entry Points : Entriy point를 설정하여 수동으로 코드를 분할하는 방법이다.

Prevent Duplication: SplitChunksPlugin를 사용하여 청크를 분리하고 옵션을 통해 중복되는 종속성을 제거할 수 있다.

Dynamic Imports : 모듈 내에서 인라인 함수(import) 호출을 통해 코드를 분리하는 방법

필자의 경우 dynamic import를 사용하여 router마다 청크를 구분하였고 각각 페이지에 사용되는 모듈과 컴포넌트들만 로드하도록 하여 사용되지 않는 리소스를 로딩되는 것을 방지할 수 있었다.

구버전의 Dynamic import에서는 require.ensure를 사용했지만 Webpack 4.6.0+버전 이상부터는 import를 사용한다. import는 ECMAScript proposal을 따르기 때문에 require.ensure말고 import가 권장된다.