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

프로젝트 스펙

---

• 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
  • 활성화 : 앵귤러 코드 최적화, 번들 사이즈 줄이고 성능 향상, 프로덕션 환경에 사용
  • 비활성화 : .최적화 미진행, 빌드 속도 빨라짐, 번들 사이즈 업, 성능이 떨어질 수도 있음

 

 

최초 시작 빌드 속도 개선

---

(전)

프로젝트 시작하는데 걸리는 시간 약 2분

(후)

설정 변경 후 1분으로 줄어듦

여기서 중요한 포인트는 --source-map=false 명령어가 꼭 추가 되어있어야한다 나는 이 명령어가 그닥 큰 효과가 없어서 빼버렸는데 json 설정 파일이랑 같이 동작하나보다. 무조건 둘 다 설정해줘야지 효과가 있는 명령어인 것 같다

 

 

HMR 컴파일 속도 개선

---

(전)

개발하면서 저장 버튼을 누르는 순간 다시 빌드되는데 약 11초~12초가 걸렸음
이게 생각보다 말도 안되게 긴 시간인거고, 생산성이 극도로 저하됐음 뭐 좀 보려고 console.log 찍고 저장하는 순간 강제로 멍때리게 됨

(후)

무려 4초대로 진입 7초나 절약했다. 어마무시하게 큰 차이가 느껴짐 진짜 말도안되게 좋아진걸 느낌!!!!!!!!!!!!