1단계: 번들 크기 파악

초기 페이지 로딩 시간이 Angular 앱 번들 크기와 밀접한 관련이 있다는 사실을 부인하기 어렵습니다.ng build --prod를 실행하면 브라우저가 서버에서 가져올 파일의 번들 크기를 볼 수 있습니다.

좋은 또는 나쁜 것으로 간주되는 크기는 무엇입니까?

일반적으로 위의 이미지에 있는 4개의 파일 중 main..js만 크거나 미쳐버릴 가능성이 있습니다. 저는 Angular로 빌드된 많은 앱을 확인했고 대부분의 중간 규모 엔터프라이즈 앱에는 500KB 미만, 평균 250KB의 main..js가 있어야 한다는 느낌이 들었습니다. 번들 크기가 해당 숫자를 크게 초과하는 경우 인식해야 할 수 있습니다. 번들 크기가 이 숫자보다 작은 경우에도 이를 더 최적화할 수 있습니다.

2단계: 파일이 gzip으로 압축되어 있습니까?

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



이 헤더가 보이지 않으면 브라우저가 원본 파일을 로드합니다. 예를 들어 아래 이미지의 Angular 번들의 경우 브라우저는 main.0d17aff85f337483317e.js를 로드하고 2.21MB의 데이터를 소비합니다. 그러나 파일을 gzip으로 압축하면 브라우저는 495.13KB만 로드할 수 있습니다. 이러한 파일 크기의 엄청난 감소는 특히 사용자가 인터넷 속도가 느린 경우 초기 페이지 로딩 시간을 확실히 줄여줍니다.

압축하는 방법?

대부분의 클라우드 플랫폼 또는 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())

3단계: Angular 번들 분석

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



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

npm install -g webpack-bundle-analyzer

Angular 앱에서 ng build --stats-json를 실행합니다(플래그--prod 사용 안 함). --stats-json을 활성화하면 추가 파일 stats.json이 생성됩니다

.

마지막으로 webpack-bundle-analyzer path/to/your/stats.json을 실행하면 브라우저에서 localhost:8888 페이지가 팝업됩니다. 그것으로 즐기십시오.

당신은 놀랄 수 있습니다,

더 이상 사용하지 않는 일부 패키지를 제거하는 것을 잊었거나

일부 패키지가 예상보다 훨씬 커서 다른 패키지로 교체될 수 있음 및/또는

일부 라이브러리를 부적절하게 가져왔기 때문에(예를 들어 moment.js의 80%는 아마도 필요하지 않은 로케일 데이터일 뿐임) 답을 찾을 수 있는 방향이 있습니다.

4단계: 번들 크기 모니터링

Angular 7 이상에서는 ng new로 새 앱을 생성할 때 angular.json에서 다음과 같은 구성을 찾을 수 있습니다.

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

이렇게 하면 Angular를 빌드하고 번들 크기가 2MB를 초과하면 경고가 표시되고 번들 크기가 5MB를 초과하면 오류가 발생합니다. 필요에 따라 숫자를 조정할 수 있습니다.
CI/CD 파이프라인에서 이 기능을 활용할 수 있습니다. 경고/오류가 표시되면 무엇이 잘못되었는지 조사할 수 있습니다.