웹펙 성능 개선 포인트

트리 쉐이킹

https://www.webpack-korea.org/guides/tree-shaking/

트리 쉐이킹은 사용하지 않는 코드를 제거하는 방식이다. ES2015 모듈의 구문에 의존하여 의존성 트리를 만들고 사용하지 않는 코드를 삭제한다.

모듈을 가져올 때는 import arrayUtils from 'array-utils'; 이렇게 가져오면 대량의 자바스크립트가 포함될 수 있다. 그렇기 때문에 import { unique, implode, explode } from "array-utils";와 같이 필요한 코드만 사용해야 합니다.

사이드 이펙트를 일으키지 않는 다고 보장할 수 없는 코드는 제거되지 않고 남겨둔다.

코드를 제거할 때는 UglifyJs와 같은 서드 파티 도구를 사용해야 한다.

코드 스플리팅

https://webpack.js.org/guides/code-splitting/

자바스크립트를 청크로 분할하고 청크를 필요로 하는 애플리케이션의 경로에만 이 청크들을 배분하여 성능을 개선하는 기술이다.

코드 스프리팅은 세가지가 있다. 첫번째는 엔트리 이다. 기본적으로는 entry에 2개를 설정한다. app과 vendor인데, app은 우리가 개발한 코드이고, vendor는 서드 파티 라이브러리이다. vendor는 자주 변경되지 않기 때문에 캐싱을 위해 분리한다.

두번째는 중복 코드 방지이다. 엔트리에 지정한 모듈들이 동일한 모듈을 의존하면 중복된 코드를 포함하게 된다. 그래서 SplitChunksPlugin를 사용하여 공통 의존성을 다른 청크파일로 분리한다.

세번째는 동적 모듈 로딩이다. ES Proposal에 있는 import()로 사용하는 모듈과 웹펙 기능인 require.ensure를 사용하면 청크를 만들게 된다.

성능 개선 포인트

• 모듈 사용시 필요한 부분만 사용하고, UglifyJs 플러그인을 사용한다.
• 사이드 이펙트가 없는 함수를 만들어 트리쉐이킹을 한다.
• Entry에 app, vendor와 같이 수동 번들링 설정을 한다.
• 중복 의존성 코드 방지를 위해 SplitChunksPlugin을 사용한다.
• 동적 모듈 로딩을 할 수 있는 부분은 동적 모듈 로딩을 한다.