번들링 사이즈를 줄이는 방법은 크게 두가지 이다. 하나는 LazyLoading 다른 하나는 정말 사용하는 모듈만 import해서 사용하는 것이다.

Code Splitting

angular lazy module을 사용하면 module 단위로 번들링이 된다. 보통 페이지 단위로 lazy module을 설정하기 때문에 내가 로드한 페이지에 관련된 모듈만 우선 로드하게 된다.

Tree Shaking

https://webpack.js.org/guides/tree-shaking/

./some-const.ts

export const a = 1;
export const b = 1;
export function c() {
  console.log("hello world");
}

./main.ts

import { a } from './some-const';
console.log(a);

native import / export를 사용하면 번들링 과정(webpack2+, Uglyfy2사용시)에서 b / c는 제거된다. 참고로 class method는 제거되지 않는다.

BigSize Library

lodash

그냥 lodash는 지원이 되지 않는다. 일단 lodash-es를 사용하자.

yarn add lodash-es @types/lodash-es

import forEach from 'lodash-es/forEach';
import debounce from 'lodash-es/debounce';

RxJS

사용하는 기능만 번들링 되게 한다. IDE 도움을 받으면 손쉽게 import 할 수 있다.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/operator/take';
import 'rxjs/add/observable/of';

Firebase

인증 관련 부분만 사용하는데 전체 모듈이 다 번들링 되어서 아래 처럼 변경하면 관련된 부분만 번들링된다.

// AsIs
import * as firebase from 'firebase';

// ToBe
import * as firebase from 'firebase/app';

moment.js

moment 코드뿐만 아니라 locale 관련 코드도 함께 번들링이 된다. import 방식이 아니라 전역 moment 방식으로 변경해서 사용한다.

// AsIs
import * as moment from 'moment';

// ToBe
// .angular-cli
...
      "scripts": [
        "../node_modules/moment/min/moment.min.js",
      ],
...
// typings.d.ts
...
declare const moment: any;
...

Profiling

개발에 있어서 특히 프론트는 더더욱 항상 예측하지 말고 측정된 값으로 개선점을 찾아야 한다.
angular-cli는 내부적으로 webpack을 사용하기 때문에 webpack bundle의 정보를 활용할 수 있다.
이때는 --stats-json 옵션을 붙여서 빌드를 하게 되면 stats.json이라는 파일이 생성된다.
이 파일을 이용해서 WEBPACK VISUALIZER에서 어떻게 번들링 되어 있는지 확인 할수 있다.

ng build -- --prod --stats-json