앵귤러 angular 핫 리로드, 빌드 시간 개선 (HMR)

Frontend

앵귤러 angular 핫 리로드, 빌드 시간 개선 (HMR)

경아 (KyungA) 2024. 9. 20. 14:39

프로젝트 스펙

angular : v9.1
node : v16.17
프로젝트 번들 크기 : 335GB 예상

앵귤러가 느린 이유?

양방향 데이터 바인딩과 변경 감지 매커니즘을 사용하는데 이는 특히 대규모 애플리케이션에서는 성능 오버헤드가 될 가능성이 매우 큼
변경이 감지되면 모든 구성 요소를 확인하기 때문에 비효율적
꼭 앵귤러 탓만이 아니라 프로젝트 규모가 너무 큰게 1순위일수도 있음
오래된 버전 9라는 부분도 무시 못함

시도해본 것들

angular.json에 "aot" true로 변경

효과 없었음

package.json 시작 명령어에 --source-map=false 추가

해당 명령어는 브라우저가 번들된 자바스크립트 코드를 원래의 소스 코드(TypeScript)와 연결해 디버깅을 쉽게 해준다
이걸 false할 경우 브라우저에서 디버깅할때 타입스크립트 코드가 아닌 난독화된 코드로 본여서 디버깅에 아쉬움이 생김
배포, 프로덕션 환경에서는 보안과 성능 이슈로 false를 하는게 좋음
그래서 디버깅에 차이점이 있었느냐? 이미 개발 모드에서는 이 부분이 비활성화 되어도 충분히 디버깅이 쉬움
이미 우리 시작 명령어에는 해당 명령어가 추가가 되어있는 상태였고, 넣으나 안 넣으나 큰 차이는 없었음

HMR을 사용할 수 있게 수정

if(environment.hmr) {
  if(module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {
      const appRef = moduleInjector.get(ApplicationRef)
      const elements = appRef.components.map(c => c.location.nativeElement);
      const makeVisible = createNewHOsts(elements);
      moduleRef.destroy();
      makeVisible();
    })
  } else {
    console.error("error")
  }
}

위 코드를 main.ts에 추가 작성해주고 environments.hmr.ts 파일을 추가하라고 했었는데 명령어들이 어디서 오는건지 몰라도 사용할 수 없었고, 효과도 못 봤음

angular.json에서 최적화 관련된 옵션 비활성화

스텍오버플로우의 7번째 답변으로 수정

"optimization": false,
"aot": false,
"sourceMap": true,
"buildOptimizer": false,

angular.json에서 해당 값들을 변경해줬음, 기존 설정에서는 저 값들 반대로 설정되어있던 상태

optimization
- 활성화 : 코드 난독화, 사용되지 않는 코드 제거, 이미지 및 CSS의 크기 최적화 수행, 번들 사이즈 줄임
- 비활성화 : 최적화 미진행, 빌드는 빠르지만 번들 크기는 커질 수 있음
aot : 컴파일링 방식
- 활성화 : 런타임 성능 향상, 초기 로딩 시간이 빨라짐, 프로덕션 환경에서 사용, 빌드 시간은 길어짐
- 비활성화 : JIT 지연 컴파일을 사용하게됨, 빌드 시간이 짧아짐, 템플릿 관련 오류를 런타임에 디버깅
sourceMap
- 활성화 : 브라우저 게발자 도구 디버깅 유용, 빌드 크기 증가
- 비활성화 : 난독화된 코드, 프로덕션 환경에서는 보안이나 성능을위해 비활성화
buildOptimizer
- 활성화 : 앵귤러 코드 최적화, 번들 사이즈 줄이고 성능 향상, 프로덕션 환경에 사용
- 비활성화 : .최적화 미진행, 빌드 속도 빨라짐, 번들 사이즈 업, 성능이 떨어질 수도 있음