CLI - Angular에서 프로덕션용 빌드

웹 애플리케이션이 만들어지고 배포할 준비가 되면 Angular가 모든 다른 코드 조각을 하나의 빌드로 컴파일해야 합니다. 빌드가 더 작은 크기로 압축됩니다.

이 마지막 단계에서 몇 가지 사소한 문제가 발생합니다. 앱을 구축하기 위해 거쳐온 혹독함을 고려할 때 매우 실망스러운 경험이 될 수 있습니다.

이것은 고립된 문제라고 생각하기 쉽지만, 변조되지 않은 새로운 프로젝트도 동일한 문제를 겪습니다. 직면한 주요 문제 중 하나는 main.js가 생성되지 않는 것입니다. 다음과 같은 다른 경고가 표시됩니다.

1. 사용하지 않는 기능을 삭제합니다.
2. 초기화 시 사이트 효과.

CLI 해결 방법 - 문제 구축

다양한 작업 솔루션을 살펴보기 전에 Angular에 대한 다양한 플래그 설정을 살펴보겠습니다.

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

--prod가 Angular에서 사용되면 플래그 지정 불가능한 일부 설정이 설정됩니다.

1. .angular-cli.json에 구성된 경우 서비스 워커를 추가합니다.
2. 모듈의 process.env.NODE_ENV를 production 값으로 바꿉니다(이는 react와 같은 일부 라이브러리에 필요함).
3. 코드에서 UglifyJS를 실행합니다.

프로젝트가 빌드될 때 ng build --env=prod와 같은 명령은 파일을 압축하지 않기 때문에 훌륭한 빌드 프로덕션 작업을 수행하지 못합니다. 기억해야 할 또 다른 사항은 AOT가 구현되었는지 확인하는 것입니다. AOT는 기본적으로 주로 활성화되어 있습니다.

AOT(Ahead of Time)가 구현된 경우 ng build --prod 명령이 작동해야 합니다. 작동하지 않으면 ng build --prod --aot=false 명령을 사용합니다.

ng serve --prod 명령은 Angular에서 프로덕션 기능 활성화가 활성화된 경우에도 작동할 수 있습니다. 이 명령은 또한 앱 로드 시간을 크게 단축하는 데 도움이 됩니다.