각 12개의 'ng serve'는 거의 프로덕션 빌드와 같이 앱을 느리게 만듭니다.

각 12개의 'ng serve'는 거의 프로덕션 빌드와 같이 앱을 느리게 만듭니다.

방금 Angular 11.2.7에서 Angular 12로 앱을 마이그레이션했습니다.제가 'ng serve'를 개발하고 사용할 때 리빌드 시간이 지금은 훨씬, 훨씬 느려서 답답할 정도라는 것을 제외하고는 모든 것이 잘 실행됩니다.

저는 M1 iMac을 사용하고 있고, 노드 16.1.0을 사용하고 있습니다. 가치가 있습니다.

제가 Angular 12로 옮기기 전에 기계는 개발 재구축(초단위)에서 번개처럼 빨랐습니다.이제 한 줄의 코드만 변경해도 콘솔 로그에서 한 글자만 변경해도 빌드 시간은 23초이며 그 중 약 22초는 "단계: 밀봉"으로 소요됩니다.

또한 ng 서브를 할 때도 이제 모든 것이 main.js로 최소화되어 실행된다는 것을 알게 되었습니다.버전 11이 그렇게 하지는 않았지만, 개발 중에 개별적으로 미니화되지 않은 컴포넌트를 실행했던 것을 기억하는 것 같습니다.즉, 엔지서브는 제가 어떤 것을 바꿀 때마다 완전한 생산 구축과 같은 일을 하는 것 같습니다.그게 느림의 근본 원인인 것 같은데 잘 모르겠어요.

그래서...

Angular 12에서 개발할 때 'ng serve'를 계속 사용해야 합니까?

이전 빌드 속도를 유지하기 위해 마이그레이션할 때 설정해야 하는 옵션이 있습니까?

그런데 이 '봉인 단계'란 무엇입니까?제가 보기에는 생산 제작 용어처럼 들리는데요!

감사해요.

존.

개발 환경이 프로덕션과 비슷하도록 v12로 업데이트된 Angular click.

아니면 그들이 부르는 대로:

이러한 변화의 목적은 구성의 복잡성을 줄이고 새로운 "기본적으로 운영 구축" 이니셔티브를 지원하는 것입니다.

그들이 무엇을 바꿨는지에 따라 당신은 당신의 것을 업데이트해야 합니다.angular.json그리고 업데이트 합니다.projects.{PROJECT_NAME}.architect.build.defaultConfiguration경로:

"defaultConfiguration": "development"

여기서 자세히 보기

사용하지 않은 경우ng update명령을 사용하여 수동으로 업데이트합니다.npm, 마이그레이션을 실행해야 합니다.구체적으로 재료 스타일에 약간의 변화가 있어 마이그레이션하지 않으면 빌드 시간이 길어질 수 있습니다.마이그레이션을 트리거하려면 다음을 실행합니다.

ng update @angular/cli --migrate-only --from 11 --to 12

저는 제 구성에 다음 사항을 추가해야 했습니다.제 새 앱에 "개발" 구성이 없는 것 같습니다.

인angular.json

"configurations": {
  "development": {
    "optimization": false,
    "outputHashing": "all",
    "sourceMap": true,
    "namedChunks": true,
    "extractLicenses": false,
    "vendorChunk": true,
    "buildOptimizer": false,
    "budgets": []
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "ui:build"
  },
  "configurations": {
    "development": {
      "browserTarget": "ui:build:development"
    }
  },
  "defaultConfiguration": "development"
}

깨끗한 angular.json에서 비트와 조각을 수동으로 복사하는 경우(그리고 이 작업을 반드시 수행해야 함), 놓치지 않도록 하십시오."defaultConfiguration": "development"아래serve.

제 이전 각.json은 이것을 가지고 있지 않았는데, 솔직히 제 실수였을 수도 있고, 아니면 그 사건 이후에 나온 특징일 수도 있습니다.아직 생산 빌드를 받고 있었는데, 3분이 걸리고 어떤 빌드를 하고 있는지 알려주는 것이 없어서 매우 답답합니다.

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "angular12:build:production"
        },
        "development": {
          "browserTarget": "angular12:build:development"
        }
      },
      "defaultConfiguration": "development"
    },

다음과 같은 경우 개발 빌드가 있음을 알 수 있습니다.

1. 브라우저 개발 도구에서 소스를 보면 코드와 주석이 모두 한 줄로 표시되지 않습니다.
2. Lazy Chunk 파일에는 다음과 같은 긴 파일 이름이 있습니다.default-src_app_common-crm_common-crm_module_ts.js아닌34.js

또한 개인적으로 나는 꺼지는 것을 선택합니다.sourceMap. 이를 통해 컴파일 속도가 훨씬 빨라지고 필요한 경우 언제든지 사용할 수 있습니다.

---

매우 중요합니다.

마이그레이션을 한 번 이상 실행하면 마이그레이션에 '버그와 유사한 행동'이 발생하는 것으로 보입니다.만약에aot설정이 현재 참이면 마이그레이션에서 제거됩니다(기본값이 참이므로 중복).그러나 aot 설정이 누락된 상태에서 다시 실행하면 다음과 같이 기록됩니다.false사용하지 않도록 설정했습니다(11에서 마이그레이션할 때 부재가 거짓을 의미한다고 생각하고 거짓으로 유지되기를 원하기 때문입니다).

 ng update @angular/cli --migrate-only --from 11 --to 12

따라서 마이그레이션을 실행하는 것은 실제로 구축 속도를 높이는 것과 같은 착각을 불러일으킬 수 있지만 실제로는 실제로는 장애물만 사용할 수 있습니다.

즉, 이미 실행한 경우에는 실행하지 않습니다.ng update그리고 당신의 것을 보세요.angular.json서류철로 철하다

저는 이 게시물의 다른 답변에서 해결책을 찾을 수 없었습니다.결국 이 문제를 해결할 수 있었습니다.ng update @angular/cli --migrate-only update-angular-config-v12. 참고: 수락한 답변에 언급된 마이그레이션이 저에게도 적용되지 않았습니다. "Package is not installed"(패키지가 설치되지 않았습니다)라는 오류가 계속 발생했습니다.

언급URL : https://stackoverflow.com/questions/67598130/angular-12-ng-serve-builds-apps-slowly-almost-like-production-builds