웹 앱 로딩 시간을 10배 빠르게 만드는 방법!

안녕하세요 여러분, 오늘 저는 Angular 또는 SPA(Single Page Application)를 사용하여 구축한 웹 앱의 로딩 시간을 단축하는 방법에 대해 논의할 것입니다.

기사에 들어가기 전에 먼저 웹 프레임워크(Angular, React 등)를 사용하여 개발된 SPA(Single Page Application)가 어떻게 작동하는지 이해합시다.

단일 페이지 신청

단일 페이지 애플리케이션은 서버에서 새 페이지 전체를 로드하는 대신 현재 페이지를 동적으로 다시 작성하여 사용자와 상호 작용하는 웹 애플리케이션입니다.

SPA에서 브라우저가 서버에 첫 번째 요청을 하면 서버는 index.html 파일을 다시 보냅니다. 기본적으로 그게 전부입니다. HTML 파일이 제공되는 유일한 시간입니다. HTML 파일에는 .js 페이지를 제어할 index.html 파일에 대한 스크립트 태그가 있습니다. 모든 후속 호출은 일반적으로 JSON 형식의 데이터만 반환합니다. 애플리케이션은 이 JSON 데이터를 사용하여 페이지를 동적으로 업데이트합니다. 그러나 페이지가 다시 로드되지 않습니다.

클라이언트(서버가 아님)는 애플리케이션이 시작되면 데이터를 HTML로 변환하는 작업을 처리합니다. 기본적으로 Angular, React 및 Vue와 같은 대부분의 최신 SPA 프레임워크에는 HTML을 생성하기 위해 브라우저에서 실행되는 일종의 템플릿 엔진이 있습니다.

문제

이제 SPA 사용의 문제점 또는 단점 중 하나를 살펴보겠습니다. 이니셜index.html은 매우 가볍기 때문에 대부분의 힘든 작업은 서버에서 가져온 후속 Javascript 파일과 브라우저에서 해당 JS를 실행하는 클라이언트에서 수행됩니다.

우리 프로젝트가 많은 구성 요소와 종속성으로 인해 복잡해지기 시작하면서 번들로 제공되는 JS 파일 크기는 시간이 지남에 따라 커집니다.



여기에서 이것이 1MB 🤯 이상의 Angular 앱 빌드로 생성된 번들 JS임을 알 수 있습니다. 이 파일은 상당한 시간이 걸리는 브라우저에 로드되어야 하며 사용자는 웹 페이지의 첫 번째 그림을 기다려야 합니다.

React는 훨씬 가볍지만 이러한 JS 파일을 압축하여 이 크기를 확실히 줄일 수 있습니다. 그것이 우리가 다음에 할 일입니다.

해결책

이 문제를 해결하는 방법 중 하나인 번들 JS 파일을 압축하고 압축된 버전을 제공하는 방법에 대해 논의할 것입니다.

번들 JS 파일 압축

Angular에서 이러한 JS 파일의 압축 버전을 생성하려면 gzipper를 사용하여 파일을 gzip 형식으로 압축할 수 있습니다.
package.json에 대해 gzipper에 dev 종속성을 추가합니다.

  "devDependencies": {
   ...
    "gzipper": "^7.0.0",
   ...
  }

또한 package.json를 사용하여 빌드한 후 파일을 gzip으로 압축하도록 gzipper의 빌드 스크립트를 업데이트합니다.

"build": "ng build && gzipper compress --verbose ./dist/client/",

이제 npm run build를 사용하여 애플리케이션을 빌드하면 해당 JS 파일의 두 가지 버전을 얻게 됩니다. 하나는 비압축이고 하나는 .js.gz 확장자로 압축된 것입니다.



보시다시피 Javascript 파일의 gzip 압축 버전은 거의 4배 더 작습니다(1.2MB에서 300KB).
JS와 함께 모든 HTML, CSS 및 자산 파일도 gzip으로 압축되어 크기가 50% 이상 줄어듭니다.

엔진엑스

이제 Nginx의 역할이 있습니다. 이러한 압축된 버전의 Javascript 파일을 제공할 무언가가 필요합니다. 이를 위해 Nginx를 사용할 것입니다.
nginx.conf - Nginx용 구성 파일에서 server 객체에 이 네 줄을 추가합니다.

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

이렇게 하면 gzip 압축이 활성화되고 파일을 제공할 때 gzip 압축이 브라우저에서 지원되는 경우 Nginx는 더 작은 gzip 버전을 제공하므로 로딩 시간이 최대 10배까지 단축됩니다.

결론

이것으로 이 기사의 끝을 표시합니다. 이것은 단일 페이지 응용 프로그램의 로딩 시간을 단축하는 여러 가지 방법 중 하나였습니다. 앱이 대규모로 프로덕션 등급이 되면 매우 유용할 것입니다.

React의 경우 gzipped 버전에서 빌드 파일을 생성하는 방법은 this 문서를 참조할 수 있습니다.

이 기사가 마음에 들면 내 소셜에서 나와 계속 연락하거나 원하면 나를 지원하십시오.
의견이 있으시면 댓글로 알려주세요.

다음 시간까지, 평화.!