Angular 빌드 프로세스를 가속화하는 방법

Angular 빌드 프로세스를 가속화하는 방법

TypeScript 파일을 몇 가지 변경한 후 각 빌드에 20분 이상 걸립니다.는 다음합니다.ng build --output-path=..\..\static\angularjs.

Microsoft PowerShell에서 실행하면 25~30초 정도 걸립니다.이것은 많은 시간입니다.

환경

• 윈도우 10
• 8 GB-Ram
• 파이참 64
• MS 파워셸

어떻게 하면 속도를 높일 수 있을까요?

앱을 구축하는 데 28초가 걸렸지만, 시간을 9초로 줄였습니다.이 플래그 사용

ng build --source-map=false

시간을 비교한 시간의 차이를 확인할 수 있습니다.

ng build --stats-json 

ng build --stats-json --source-map=false

소스 맵은 디버깅 전용입니다. 도움이 되기를 바랍니다.

덕분에 구축 시간이 50%로 단축되었습니다.

          "optimization": false,
          "outputHashing": "none",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "showCircularDependencies": false,
          "aot": true,
          "extractLicenses": false,
          "statsJson": false,
          "progress": false,
          "vendorChunk": true,
          "buildOptimizer": false,

저는 이 문제를 해결하기 위해 다음을 사용했습니다.watch 발즉, 깃)

ng build --watch=true

이 기능은 지속적으로 실행되며 저장된 경우에만 자동으로 파일을 빌드합니다.이 적을 >로 되었습니다. 변경은 에서 8초만 생성되기 때문입니다. 이는 생성만 하기 때문입니다..js실제로 변경된 내용에 대한 파일입니다.

출처: https://angular.io/guide/deployment

그ng build명령은 출력 파일을 한 번만 생성하고 이를 처리하지 않습니다.

그ng build --watch명령은 소스 파일이 변경될 때 출력 파일을 다시 생성합니다. 것이.--watch플래그는 개발 중에 빌드하고 다른 서버에 변경사항을 자동으로 다시 적용할 때 유용합니다.

은 아마 사합니야다해용을 해야 할 것입니다.ng build필요한 최적화가 완료되도록 생산을 위해 구축할 때 필요한 옵션을 사용합니다.

다른 사람들의 답변을 바탕으로 자체 구성을 만들어 개발 빌드 시간을 3배 단축했습니다.

1. angular.json는 다과같은새만들다니습었을로프라는 새로운 ."development"projects.<my-project-name>.architect.build.configurations:

   "development": {
     "optimization": false,
     "outputHashing": "none",
     "sourceMap": true,
     "namedChunks": false,
     "aot": true,
     "extractLicenses": false,
     "statsJson": false,
     "progress": true,
     "vendorChunk": true,
     "buildOptimizer": false
   },
   "production": {
     ...
   

   여기서 소스 맵을 활성화합니다.이 그것들이, 은 그것들을 설정할 수 .sourceMap에 깃발을 내미는.false제작 시간을 훨씬 더 줄일 수 있습니다.

2. package.json파일 나는 새로운 스크립트를 추가했습니다.watch:

   "scripts": {
     ...
     "watch": "ng build --watch --configuration development"
   }
   

3. 그러면 명령줄에서 실행하면 됩니다.

   npm run watch
   

   이전보다 구축 시간이 훨씬 단축되고, 변경할 때마다 모든 것이 더욱 신속하게 재구축됩니다.

최종 통계는 다음과 같습니다.

• 기본 설정: 77초
• 소스 맵 포함: 25초
• 소스 맵 없음: 21초

https://github.com/angular/angular-cli/issues/6795 에 따르면 다음과 같이 사용됩니다.--build-optimizer=false빌드 속도를 높입니다.

이 답변이 도움이 된다면 구체적으로 어떤 조언이 도움이 되었는지 댓글로 남겨주세요!

저는 최근에 Angular 8에서 Angular 13으로 업그레이드했습니다.빌드 시간은 유사하지만(Angular 8과 Angular 13 모두에서 약 10분) 리빌드 시간에 어려움을 겪었습니다(예: 사용).--watch몇 개의 파일만 변경하면 Angular 8은 <10초 안에 다시 컴파일되고 Angular 13은 10분이 더 필요했습니다!).

(스크린샷은 아래 참조)을 사용하여 지정했고 훨씬 더 나은 재구축 시간(~8-10초)을 확인했습니다. 이 옵션은 다음과 같습니다.angular-cli ng build의 지휘관 --aot=false.

합니다."aot:false사실, 가장 인기 있는 대답 중 많은 것들은 분명히 시도해 볼 것을 제안합니다."aot":true틀리지 . (은 성능을 합니다.)"sourceMap":false는 .) 하만저는지,,"aot":false게임 체인저였습니다.

또한 "브라우저에서 더 빠른 렌더링"과 같은 "AOT"(사전 컴파일)의 이점도 알고 있습니다.저는 여전히 프로덕션 빌드에 "AOT"()"aot":true를 사용하지만, 여기서 제 대답은 제가 사용하는 개발에 초점을 맞추고 있습니다.--watch파일 변경사항을 기반으로 다시 빌드하기 때문에 빠른 재빌드를 원하며 "브라우저에서 렌더링 속도가 느려지는 것"은 개의치 않습니다.

몇 가지 유용한 리소스(자세한 내용을 알게 되면 추가하겠습니다):

• 이 의견은 AOT 컴파일이 JIT 컴파일보다 느릴 수 있음을 시사하며, 그 이유일 수 있습니다."aot":false나에게 효과가 있습니다.
• 이 의견은 다음을 사용하여 빌드 프로세스를 프로파일링하는 데 도움이 될 수 있습니다( 병목 현상을 찾거나 긴 빌드 시간 문제 해결).node --inspect그리고.chrome://inspect
• 이 댓글에는 프로파일링에 대한 추가 팁이 있습니다.NG_BUILD_PROFILING=1

빌드 성능을 향상시킬 수 있는 기타 팁:

• 이 블로그 게시물은 다음을 설명합니다.NG_PERSISTENT_BUILD_CACHE=1Angular <=12에 대한 옵션(Angular 13, 여기 RFC에서 이 옵션이 기본값으로 설정된 것 같습니다.
  • 13에서 Angular 13 에NG_PERSISTENT_BUILD_CACHE 될 수 .angular.json "cache"여기 Angular 13 릴리스 블로그 게시물 및 이 문서에 설명된 속성; 기본값"cache": { "enabled": ...사실입니다!
• 커스텀 빌더를 사용하는 것에 대해 이야기하는 또 다른 Git 이슈는 , 그리고

몇 가지 관련 사항(더 실험적인/도움이 되지 않을 수 있음):

• 이와 같은 블로그 게시물은 당신이 당신 자신의 빌더를 사용할 수 있음을 시사합니다.esbuild 성능 -- 은 더 Angular에서 하는 "을 하지 않을 수 , "원본적인 방법" - "Angular" - "원본적인 방법").templateUrl재산).또한 비용이 발생할 수 있습니다(즉, 더 큰 번들 크기).
• Google Chrome Developers의 이 비디오는 1년 이상 된 "스타트업 성능"에 대한 원칙에 대해 설명하고 번들 크기와 기타 모범 사례에 초점을 맞추고 있습니다. 따라서 비디오는 빌드 성능을 저하시키는 제안을 할 수 있습니다(작은 번들이나 더 쉬운 디버깅과 같은 다른 트레이드오프).

EDIT 아래 스크린샷과 같이 angular.json에서 "aot":false'를 설정합니다.JSON의 위치/경로는 다음과 같습니다.

root>projects>{craft-app}>architect>build>configurations>{development}

서...{craft-app}빌드해야 하는 각도 프로젝트의 구체적인 이름입니다.{development} 이름이며 합니다.-c: 수예(예:

ng build craft-app -c=development

덕분에 구축 시간이 70%로 단축되었습니다.

      "optimization": false,
      "outputHashing": "none",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "showCircularDependencies": false,
      "aot": true,
      "extractLicenses": false,
      "statsJson": false,
      "progress": false,
      "vendorChunk": true,
      "buildOptimizer": false

노드 매개 변수를 사용할 수 있습니다.--max_old_space_size맘에 들다

node --max_old_space_size=4096 ./node_modules/.bin/ngbuild --prod --build-optimizer

하지만 환경을 통해 설정하는 것을 선호합니다.

NODE_OPTIONS=--max-old-space-size=4096

CI 파이프라인 구축 프로세스 속도를 두 배로 높였습니다.

최신 Angular 버전(10 이상)에만 관련될 수 있는 답변 추가

는 그 을 되었습니다.CommonJS그리고.AMD의존성이 제 경우의 범인입니다.

각도 빌드 프로세스는 다음과 같은 경고를 발생시켜 사용자가 이 상황에 처해 있음을 나타냅니다.

Warning: xxxxxx.ts depends on 'yyyyyy.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

이 상태에서는 거의 6분 동안 내 자신의 재구축 시간이 견딜 수 없었습니다. 즉, 수정된 스크립트 파일 하나를 저장하기 위한 재구축입니다.

Build at: 2021-05-28T07:39:58.559Z - Hash: 5f8c96f22c3daf60faa2 - Time: 234429ms

하지만 제가 공격적인 참조를 제거했을 때, 초기 빌드 시간은 약 80초로 줄었고, 리빌드 시간은 7-8초로 줄었습니다.

물론, 공격적인 모듈에 대한 참조를 항상 제거할 수 있는 것은 아니지만, 저의 경우에는 로컬 디버깅을 위해 제거할 수 있었고 배포 시에도 유지할 수 있었습니다.이것은 저의 발전 속도를 상당히 높였습니다.

개발 모드에서 이 플래그를 변경할 수 있습니다.

"buildOptimizer": false

저는 이게 효과가 있었어요. Angular 7.

prod 빌드에 대한 모든 최적화 제거

내 프로젝트에서는 1시간에서 6분으로 시간이 단축됩니다.

항상 기계가 수행하는 다른 작업을 주의 깊게 관찰하고 전체 CPU 사용량을 모니터링하는 것을 잊지 마십시오.

예를 들어 저처럼 VS Code 창을 절대 닫지 않는 경향이 있다면 결국 수백 개가 열려 실제로 속도가 느려질 수 있습니다.VSCode가 동시에 수천 개의 동일한 파일을 실행하여 모든 것을 확인하는 동안 느린 Angular 빌드 타이밍을 잡을 수 있습니다.

저는 아마 수백 개의 창을 닫았을 때 노트북 팬들이 훨씬 적게 오는 것을 발견했습니다.

또한 바이러스 검사 소프트웨어의 제외 항목에 작업 디렉터리를 추가하는 것이 좋습니다.물론 그것이 여러분의 환경에서 안전하지 않을 수도 있는지 판단하는 것은 여러분에게 달려 있습니다.

언급URL : https://stackoverflow.com/questions/45242553/how-to-speed-up-the-angular-build-process