디버깅을 위한 Angular 11 시리즈(XIV) 생산 환경

작은 쓰레기 같은 놈들 · 게시됨 2020. 8. 11. 오후 5:59:35

Angular 9 시리즈 (1) 동적 부하 구성 요소
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 시리즈(2) 동적 성분 전송 매개변수
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 시리즈(3)는 동적 컴포넌트 이벤트를 구독합니다
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 시리즈 (IV) 맞춤형 파이프 파이프라인
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 시리즈(V)는 금액 통화 형식을 제공합니다
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 시리즈(VI)는 네이티브 JS 변수와 메서드를 호출합니다
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 시리즈 (VII) CSS 스타일 스코프
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 시리즈(VIII)는 집합을 통해 이벤트를 트리거하여 자식 컴포넌트의 값을 업데이트합니다
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 시리즈 (9) #id 선택기가 페이지에 적용됨
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 시리즈(10)는 vconsole과 eruda 개발자용 디버깅 패널을 내장합니다
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 시리즈 (XI) 스타일 정의 5가지 방법
https://www.itsvse.com/thread-9305-1-1.html

Angular 9 시리즈(XII)는 OTP를 기반으로 동적 토큰을 생성합니다
https://www.itsvse.com/thread-9325-1-1.html

Angular 10 시리즈(13)는 바이두 이차트 차트를 도입했습니다
https://www.itsvse.com/thread-9347-1-1.html

Angular 프로젝트를 빌드 명령어로 프로덕션 환경에 패키징하는데, 예상되는 효과는 개발 환경에서 보는 것과 다를 수 있습니다.

TS 코드:

로그인이 보이네요.

AppComponent가 현재 컴포넌트입니다.

개발 환경과 운영 환경의 렌더링은 다음과 같습니다:

생산 환경은 우리가 기대했던 것과는 전혀 달랐습니다.

빌드 명령 데이터에 대하여:

Angular 빌드 성능 최적화
https://www.itsvse.com/thread-9203-1-1.html

지금은 디버깅이 필요합니다.
SourceMap은 소스 코드와 컴파일된 코드의 위치 매핑을 저장하는 정보 파일입니다

프론트엔드 작업에서는 주로 다음 세 가지 측면에서 디버그 문제를 해결하는 데 사용됩니다:

a. 코드 압축이 혼동된 후
b. sass, typeScript 같은 다른 언어를 사용해 CSS나 JS로 컴파일한 후
c. 웹팩과 같은 패키징 도구를 사용한 다중 파일 병합 후

위 세 가지 경우에는 디버깅할 때만큼 쉽게 디버깅할 수 없기 때문에, 디버깅을 위해 콘솔에서 소스 코드로 변환하는 데 SourceMap이 필요합니다.

빌드 명령어를 수정해야 하는데, 다음과 같습니다:

로그인이 보이네요.

(매개변수 추가하기 전에)

(매개변수를 추가한 후)

*.map 파일이 많이 생성되는 것을 볼 수 있습니다.

위 사진에서 볼 수 있듯이, Google Chrome을 사용해 F12를 눌러 개발자 모드에 들어가고, 소스를 선택한 후 main.js을 선택한 후 우클릭하여 "소스 맵 추가" 옵션을 선택해 생성된 맵 파일 주소를 추가하세요.

예를 들어:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map

(끝)

[각] 디버깅을 위한 Angular 11 시리즈(XIV) 생산 환경

관련 게시물

본 섹션