Angular Ivy 성능 비교

안녕하세요, 이것은 나의 첫 번째 게시물입니다. 내 기사 블로그를 여기에 다시 게시합니다. 하지만 곧 새로운 것이 나올 것입니다.


https://eduardstefanescu.dev/2020/02/19/angular-ivy-perfomance-comparison/에 원래 게시되었습니다.


Angular는 번들 크기가 더 작은 새로운 Ivy 컴파일러를 발표하므로 실제 프로젝트에서 번들 크기와 전체 애플리케이션 성능이 얼마나 향상되었는지 알아보고 싶었습니다.

Angular 9 릴리스 노트를 보고 번들 크기를 더 개선할 수 있는지 물었습니다. 압축 알고리즘을 사용하면 가능하다는 것을 알았습니다. 약간의 연구 끝에 모든 .js, .html 및 .css 파일을 실행하고 gzip 및 brotli 압축 알고리즘을 사용하여 압축하는 두 개의 라이브러리 zlib 및 brotli가 있습니다. 이 작업을 수행할 수 있는 방법을 보여 주는 기사를 작성하겠습니다.

하지만 데이터를 보여주기 전에 프로젝트 사양을 제시하고 싶습니다. 이 프로젝트는 11페이지만 있는 더 작은 프로젝트이며 Angular Material을 사용하고 있습니다.

테스트는 HTTP 호출에 영향을 받고 싶지 않았기 때문에 정적 페이지에서 실행되었으며 사용된 브라우저는 Google Chrome이었습니다. 페이지 크기, 페이지의 전체 로드 시간, 빌드 시간 및 기본 번들 크기를 테스트했습니다. 언급하고 싶은 또 다른 중요한 점은 압축 알고리즘이 Angular 9 빌드 파일을 통해 실행되었다는 것입니다.

먼저 번들 크기를 살펴보겠습니다.

Angular 8 번들 크기와 brotli가 포함된 Angular 9 사이에는 큰 차이가 있으며 페이지 크기 비교에서도 확인할 수 있습니다.

페이지 크기는 내 예상과 일치하며 압축되지 않은 파일보다 압축된 파일의 크기가 더 작은 것이 일반적입니다.

하지만 이 점을 잠시 염두에 두고 이 애플리케이션의 전반적인 성능이 크게 향상되지 않은 전체 페이지 로드 시간 다이어그램을 살펴보고 그 이유를 설명하겠습니다.

다이어그램에서 알 수 있듯이 압축 알고리즘을 사용하는 Angular 8과 Angular 9의 차이는 불과 몇 밀리초, 정확히 249ms입니다. 이 크기의 애플리케이션에 대해 상대적으로 괜찮습니다. 다른 다이어그램.

이에 대한 설명은 가져오기가 많지 않은 테스트된 프로젝트 설정을 기반으로 사용하지 않는 라이브러리가 삭제되는 트리 쉐이킹 프로세스 때문이며, 트리 쉐이킹은 삭제할 원치 않는 라이브러리가 없어 매우 가까운 시간이 소요되었습니다. 4개의 샘플 사이. 그러나 이러한 작은 간격의 주요 요인은 프로젝트 크기와 그 이후의 트리 쉐이킹 프로세스입니다.

페이지 크기가 작을수록 다운로드 속도가 빨라져 페이지 로딩 시간이 줄어듭니다. 대규모 응용 프로그램에서 시간이 훨씬 더 향상될 것으로 기대합니다.

개발자의 관점에서 이것은 훌륭하고 Angular Ivy는 더 빠르게 빌드되며 프로젝트가 상당히 큰 경우 좋은 이점입니다. 두 가지 압축 알고리즘 샘플의 시간이 여기에 있어서는 안 된다는 점을 언급하고 싶습니다. 사실 압축 시간인데 건물과 압축 시간이 더 작았더라면 이례적이었을 것입니다.

이 두 가지 압축 알고리즘의 빌드 시간을 계산해 보겠습니다.

gzip:

Building time:    17481ms
Compressing time: 14913ms
Total:            32394ms

브로틀리:

Building time:    14913ms
Compressing time: 14859ms
Total:            29772ms

Angular 8의 빌드 시간은 29889ms였으며 이는 brotli가 있는 Angular 9가 더 낮은 빌드 시간을 얻었음을 의미합니다. 나는 그것이 이 둘 사이에 큰 차이가 없다는 것을 알고 있지만 더 큰 프로젝트에서는 확장될 것입니다.

결론적으로 Angular 9의 성능은 더 큰 프로젝트에서 확인할 수 있으며 이전 Angular 버전에 비해 여전히 개선된 점입니다.

이 기사를 읽어 주셔서 감사합니다. 흥미로웠다면 동료 및 친구들과 공유하십시오. 또는 개선할 수 있는 부분이 있으면 알려주세요.