각도 부하 성능을 개선하는 방법은 무엇입니까?

12024 단어 angular

Angular 성능 문제를 해결하고 Angular 로드 시간을 최적화하는 방법은 다음과 같습니다. 💡



각도 성능은 일반적인 문제입니다.

아마도 Angular의 가장 큰 약점일 것입니다. 😩

내가 어떻게 알아?

저는 최근에 수십 명의 Angular 개발자를 대상으로 Angular에 대한 가장 큰 불만을 묻는 설문 조사를 했습니다. 그들이 나에게 말한 내용은 다음과 같습니다.



최근에 읽은 Angular 컨설턴트가 로드하는 데 거의 1분이 걸리는 Angular 애플리케이션을 최적화하는 방법을 설명한 기사는 말할 것도 없습니다. 예! 하나. 전부의. 분.

생각해보세요... 여러분은 Angular 앱을 만드는 데 모든 시간을 할애하지만 프로덕션에 도달하자마자 사람들은 그것이 waaaaay toooooo turtle-slooooooow라고 불평하기 시작합니다.



분명히 과장된 예이지만 Angular 성능 질문은 실제입니다.

상사가 더 나은 성능의 Angular 애플리케이션을 요구할 때 어디서부터 시작해야 할지 모르는 좌절한 Angular 개발자는 말할 것도 없습니다.

이런 상황을 어떻게 피합니까?

Angular 애플리케이션을 어떻게 최적화합니까?

Angular 애플리케이션의 성능을 개선하기 위해 무엇을 할 수 있습니까? 그리고 Angular 성능 문제를 해결하시겠습니까?

hiring an Angular consultant to help you 외에도 Angular 성능을 개선 및 최적화하고 엄청나게 빠르게 로드되도록 하는 심층 가이드가 있습니다. 모든. 하나의. 시간.

목차


  • What is loading performance versus runtime performance?
  • Getting started: Here's why you must profile Angular load time.
  • How to decrease the Angular bundle size?
  • Speedy hosting options for your Angular app?
  • Rolling our own Nginx server with Brotli support
  • Conclusion

    • 로딩 성능 대 런타임 성능이란 무엇입니까?

    When we talk about fixing Angular performance and making our Angular app faster, there are two distinct areas to wrestle with and improve. There's a difference between making your Angular app load fast and making it run fast. This is known as the difference between the loading performance and runtime performance.

    This guide focuses on how to make your Angular app load fast.

    But if you need to optimize your runtime performance and make your Angular app run fast there are all kinds of Angular optimizations that you can consider like using a trackBy function to improve ngFor performance .

    또는 building a fast-performing Angular pipe .

    뿐만 아니라 tweaking Angular's change detection settings to avoid un-necessary change detection cycles .

    그리고 API 호출이 Angular 런타임 성능을 질식시킬 수 있다는 의심이 든다면 여기 how to monitor the slowness of your HTTP calls가 있습니다.

    이제 로딩 성능과 런타임 성능의 차이를 이해했으니 어떻게 개선해야 할까요?

    시작하기: Angular 로드 시간을 프로파일링해야 하는 이유는 다음과 같습니다.

    The first step in improving the performance of your Angular app is to measure how long it takes to load and bootstrap inside the browser.

    Why?

    Some developers know that they need to optimize their Angular app but they have no idea how much or where exactly to start. And so they make these wild stabs at the code or build configuration and then refresh the app to see if it appears to load faster than it did before. This kind of optimization approach is nothing but a clown show and deserves every kind of criticism it can get. It's like trying to bake a cake without the necessary measuring cups. Or re-arranging the chairs on the deck of the Titanic before it sank.

    So what's the smarter approach?

    Measure. Measure. Measure.

    Somehow we as developers don't always notice the extra second or two that will bother the users. At least that's been my experience.

    For example, one of my developer buddies is a Django developer. He kept insisting that his Django application was faster than my Angular app. When we were together he'd pull out a browser and show me just how much faster it was... and how sluggish my Angular app was... until we started actually counting the milliseconds by using the browser's developer tool. After profiling the performance of my Angular app vs his we discovered that they were averaging about the same load time.

    Which one was faster? I don't remember. 😁

    Obviously my friends internal timer wasn't properly counting and proves why a developer MUST carefully profile the performance of his Angular app and know EXACTLY how many milliseconds it takes to load the thing. By counting the milliseconds that it takes to load your Angular app you will be able to know exactly how much you're improving load speed and performance as you attempt to optimize. Yup, count the milliseconds.

    Angular 번들 크기를 줄이는 방법은 무엇입니까?

    There are all kinds of tweaks and wildly-optimizing tree-shaking stuff floating around on the web about how to decrease the size of your Angular compiled app.

     Some of the suggested performance tweaks are impressive, like this one about using the Google Closure Compiler to decrease the size of your Angular app by 2.5x 그리고 다른 사람들이 몇 KB를 면도하기 위해 한 노력에 대해 기쁘게 생각합니다. 그러나 많은 제안이 죽은 당나귀를 차는 것과 같다는 것을 알았습니다. 특히 Angular 앱이 제대로 설계되지 않은 경우에는 더욱 그렇습니다.

    그렇다면 Angular 앱이 더 빠르게 작동하도록 어떻게 디자인합니까?

    내 추측을 놓치지 않는 한 Angular 프로젝트 10개 중 8개마다 Angular 앱의 크기를 줄이고 로드 속도를 높이는 가장 빠르고 쉬운 방법은 메인AppModule을 더 작은 모듈로 분할하고 lazy loading the other modules when you choose to .

    즉, AppModule의 크기가 가능한 한 작아야 합니다. 즉시 필요하지 않은 모든 것을 모듈화한 다음 나중에 지연 로드합니다. 지연 로드는 Angular 앱의 초기 크기를 더 작게 유지하고 더 빠른 Angular 로드 성능을 만드는 데 도움이 되기 때문입니다.

    Angular 앱을 위한 빠른 호스팅 옵션이 있습니까?

    And after you've got your Angular app properly split into lazy-loaded modules, what's the next best step?

    Deploy to a fast, global CDN.

    And what are the fastest Angular hosting options? Where can you host your Angular app to guarantee the fastest load speed?

    Here's a list of 3 different hosting options that specifically support Angular. This isn't a comprehensive list but each one of these Angular hosting options...

    • Has a free tier that allows you to get started and grow.
    • Uses a global CDN that your Angular app is deployed too.
    • Is a hosting solution that I've had success with. In other words, I know what I'm recommending.

    Roast.io





    Roast.io에서 Angular 애플리케이션 로스팅을 시작하려면 getting started guide for Angular applications이 있습니다.

    넷리파이





    Netlify에 Angular 앱을 배포하고 싶으신가요? Here's how to get started .

    Firebase 호스팅



    Firebase 호스팅은 Google에서 만든 호스팅 서비스입니다. 더 알고 싶다면 here's how to deploy an Angular app to Firebase Hosting in 2021 .

    Brotli를 지원하는 자체 Nginx 서버 롤링

    But what if you have your own server with a VPS like Digital Ocean? And would rather not deploy to a CDN?

    Then Brotli is here to help you.

     Brotli은 Google에서 개발한 압축 알고리즘으로 gzip의 후속 제품으로 간주됩니다. Angular 앱의 로드 시간이 전체 1000ms 이상 단축되는 것을 보았습니다.

    Firebase 호스팅, Microsoft Azure 호스팅 또는 위에서 언급한 다른 옵션과 같은 사전 지원 호스팅 솔루션을 사용하고 있다면 운이 좋지 않습니다. 그러나 조정하고 사용자 정의할 수 있는 자체 서버가 있는 경우 Brotli 지원을 통해 소스에서 Nginx를 컴파일할 수 있습니다.

    소스에서 컴파일하는 이유는 무엇입니까?

    Nginx는 Brotli를 지원하지 않기 때문입니다. Google의 Nginx Brotli 모듈을 사용해야 합니다.

    하지만 좋은 소식은 내가 당신을 위해 일할 스크립트를 가지고 있다는 것입니다. 😉

    여기있어.

    #Install deps
sudo apt install unzip zlib1g-dev libpcre3-dev libssl-dev brotli -Y

# Pull nginx
mkdir /tmp/nginx-brotli
cd /tmp/nginx-brotli
wget http://nginx.org/download/nginx-1.18.0.tar.gz
tar -xvf nginx-1.18.0.tar.gz 

# Pull brotli module
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init

# Build nginx
cd ../nginx-1.18.0
./configure --add-module=../ngx_brotli

./configure --sbin-path=/usr/local/nginx/nginx --conf-path=/usr/local/nginx/nginx.conf --pid-path=/usr/local/nginx/nginx.pid --with-http_ssl_module --with-http_v2_module  --add-module=../ngx_brotli 
make
sudo make install


    결론

    Angular is fast evolving framework - which is one of the reasons I enjoy Angular - and it's built by a great group of people that want to know the frustrations Angular developers have. The Angular team has already shed a lot of sweat to to improve the size of Angular applications and Angular's performance and I expect that they'll continue to do so.

    Daniel Kreider
    Google Apps Script로 Slack bot를 간편하게 구현한 이야기
    2017/5/17 개선되었습니다. Microsoft Cognitive Services QnA Maker 한국어 FAQ 정보

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage