예산의 경고, 초기에 최대 초과

--prod를 사용하여 Angular 7 프로젝트를 빌드 할 때 예산에 경고가 있습니다.

각도 7 프로젝트가 있는데 빌드하고 싶지만 경고가 있습니다.

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

다음은 청크 세부 정보입니다.

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB  [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]

예산이란 정확히 무엇입니까? 어떻게 관리해야합니까?

angular.json 파일을 열고 budgets키워드를 찾으십시오 .

다음과 같이 표시되어야합니다.

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
   }
]

아마 짐작했듯이이 maximumWarning경고를 방지하기 위해 값을 늘릴 수 있습니다 .

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   }
]

예산 이란 무엇을 의미합니까?

성능 예산은 웹 프로젝트의 설계 및 개발에서 초과 할 수없는 사이트 성능에 영향을 미치는 특정 값에 대한 제한 그룹입니다.

우리의 경우 예산은 번들 크기에 대한 제한입니다.

또한보십시오:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• 성능 예산 (요청 수를 줄이고 파일 크기를 작게 유지)

Angular CLI 예산이란 무엇입니까? 예산은 Angular CLI의 잘 알려지지 않은 기능 중 하나입니다. 다소 작지만 매우 깔끔한 기능입니다!

응용 프로그램의 기능이 성장함에 따라 그 크기도 커집니다. Budgets는 Angular CLI의 기능으로, 구성에서 예산 임계 값을 설정하여 애플리케이션의 일부가 설정 한 경계 내에 유지되도록 할 수 있습니다. — 공식 문서

즉, Angular 애플리케이션을 빌드 프로세스에서 생성되는 번들이라고하는 컴파일 된 JavaScript 파일 세트로 설명 할 수 있습니다. 각 예산을 사용하면 이러한 번들의 예상 크기를 구성 할 수 있습니다. 더 나아가, 경고를 받고 싶거나 번들 크기가 너무 통제 할 수없는 경우 오류와 함께 빌드에 실패하려는 경우 조건에 대한 임계 값을 구성 할 수 있습니다!

예산을 정의하는 방법? 각 예산은 angular.json 파일에 정의되어 있습니다. 작업 공간의 모든 앱에는 요구 사항이 다르기 때문에 예산은 프로젝트별로 정의됩니다.

실용적으로 생각하면 프로덕션 빌드에 대한 예산을 정의하는 것이 합리적입니다. Prod 빌드는 트리 쉐이킹 및 코드 최소화와 같은 모든 최적화를 적용한 후 "실제 크기"로 번들을 생성합니다.

빌드 오류입니다! 최대 번들 크기를 초과했습니다. 이것은 뭔가 잘못되었다는 것을 알려주는 훌륭한 신호입니다.

1. 기능을 실험 해 보았지만 제대로 정리하지 않았을 수 있습니다.
2. 툴링이 잘못되어 잘못된 자동 가져 오기를 수행하거나 제안 된 가져 오기 목록에서 잘못된 항목을 선택할 수 있습니다.
3. 우리는 부적절한 위치에있는 게으른 모듈에서 물건을 가져올 수 있습니다
4. 우리의 새로운 기능은 정말 크고 기존 예산에 맞지 않습니다.

첫 번째 방법 : 파일이 gzip으로 압축되어 있습니까?

일반적으로 gzip 파일은 원본 파일 크기의 약 20 %에 불과하므로 앱의 초기로드 시간을 크게 줄일 수 있습니다. 파일을 gzip으로 압축했는지 확인하려면 개발자 콘솔의 네트워크 탭을여세요. “Response Headers”에서“Content-Encoding : gzip”이 표시되어야하는 경우 사용하는 것이 좋습니다.

gzip하는 방법? 대부분의 클라우드 플랫폼 또는 CDN에서 Angular 앱을 호스팅하는 경우이 문제를 처리했을 것이므로이 문제에 대해 걱정할 필요가 없습니다. 그러나 Angular 앱을 제공하는 자체 서버 (예 : NodeJS + expressJS)가있는 경우 파일이 gzip으로 압축되었는지 확인하십시오. 다음은 NodeJS + expressJS 앱에서 정적 자산을 gzip하는 예제입니다. 이 단순한 미들웨어 "압축"이 번들 크기를 2.21MB에서 495.13KB로 줄인다는 것은 상상할 수 없습니다.

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

두 번째 접근 방식 :: Angular 번들 분석

번들 크기가 너무 커지면 부적절한 대형 타사 패키지를 사용했거나 더 이상 사용하지 않는 경우 일부 패키지를 제거하지 않았기 때문에 번들을 분석 할 수 있습니다. Webpack에는 웹팩 번들의 구성에 대한 시각적 아이디어를 제공하는 놀라운 기능이 있습니다.

이 그래프를 얻는 것은 매우 쉽습니다.

1. npm install -g webpack-bundle-analyzer
2. Angular 앱에서 실행합니다 ng build --stats-json(flag를 사용하지 마십시오 --prod). 활성화 --stats-json하면 추가 파일 stats.json을 얻을 수 있습니다.
3. 마지막으로 실행 webpack-bundle-analyzer ./dist/stats.json하면 브라우저가 localhost : 8888에 페이지를 표시합니다. 그것을 즐기십시오.

참조 1 : Angular CLI 예산으로 하루를 절약 한 방법과이를 통해 절약 할 수있는 방법

참조 2 : 4 단계로 Angular 번들 크기 최적화