페이지 속도를 위한 React 및 Vue 프레임워크의 교훈

페이지 속도를 지속적으로 추구하다 보면 같은 지점으로 되돌아가는 경우가 종종 있습니다. 기술팀에 동기를 부여하기 위한 제품, 마케팅, 성장팀의 노력에도 불구하고, 사이트 성능을 향상할 수 있는 작업은 리팩토링의 필요성으로 인해 종종 연기되고, 완료되더라도 항상 완전한 결과를 얻지는 못합니다. 이 주기에서는 실제 성과 달성에 대한 몇 가지 통찰력 있는 관점을 고려하는 것이 좋습니다. 예를 들어 React.js 및 Vue.js의 속도나 Next.js 및 Nuxt.js와 같은 SSR(서버 측 렌더링) 확장을 다른 플랫폼과 비교하여 어떤 교훈을 얻을 수 있습니까? 이제 jQuery 및 CSS 파일의 MB를 최적화할 때가 아닌가? 잘 모르는 프런트 엔드 개발자를 위해 웹 성능을 희생하는 대기업은 언제 깨어날까요? 이러한 질문을 하나씩 해결해 보겠습니다.

Next.js 및 Nuxt.js 기반 사이트가 빠른 이유는 무엇입니까?

React와 Vue를 기반으로 구축된 SEO 친화적인 구조인 Next와 Nuxt 플랫폼은 속도 성능이 돋보입니다. 그런데 왜 이 플랫폼들은 그렇게 빠른 걸까요?

React.js와 Vue.js 아래와 같이 각 페이지를 하위 구성 요소로 나누는 구성 요소 기반 프레임워크입니다.

이미지 (2).png — 출처: https://dev.to/yakimych/seriously-do-react-hooks-replace-state-containers-3cpl

이 점을 설명하기 위해 실제 사례인 전자상거래 목록 페이지를 살펴보겠습니다. 이 목록 페이지는 다음과 같은 하위 구성 요소로 간주될 수 있습니다.

헤더
ICO정보제출
- 등록정보 기재
  - 페이지 제목
  - 작은 표시
  - 제품수
- 필터
  - 카테고리 필터
  - 가격 필터
  - ...
- 정렬
- 제품 카드
  - 제품 사진
- 제품 세부 사항
  - 제품명
  - 제품 가격
    - 취소선 가격
    - 판매 가격
  - 할인율
  - 캠페인 정보
- 쪽수 매기기
- 카테고리 내용
바닥 글

Nuxt.js를 사용하여 구성 요소 기반 애플리케이션을 만들 때 이러한 각 구성 요소는 별도로 코딩되어 마스터 페이지에 포함됩니다. 예를 들어 ProductPhoto.js라는 파일을 생각해 보세요. 제품 사진(캐러셀, 반응형 이미지 표시 등)에 필요한 기능이 무엇이든 JS 코드는 이 구성 요소 내에 작성됩니다. 마찬가지로 이 구성 요소에서 사용하는 CSS 파일만 포함됩니다. 이는 해당 구성 요소를 사용하면 각 구성 요소에 필요한 파일만 실행된다는 의미입니다.

현재 대부분의 웹 플랫폼에서 이 프로세스는 어떻게 처리됩니까?

script.js 파일에는 멤버십, 필터, 장바구니 페이지부터 메뉴까지 모든 페이지에서 실행되는 모든 코드가 포함되어 있습니다. 결과?

다음이 포함된 웹사이트 3MB JS 파일 및 1.5MB CSS 파일. 주요 문제는 파일 크기뿐만 아니라 일반적인 Android 모바일 장치의 CPU가 밀리초 내에 수천 줄의 코드를 실행할 것이라고 기대할 수 없다는 사실입니다. 필요한 코드만 실행하면 성능 향상을 얻을 수 있습니다.

렌더링 차단 리소스를 제거하는 방법은 무엇입니까?

현재 상위 32만 개 웹 사이트 중 1%가 평균 약 250KB에 달하는 Font Awesome 글꼴 라이브러리를 사용하고 있습니다. 플릭 효과로 인해 비동기 로딩이 바람직하지 않다는 점을 고려하여 모바일 또는 데스크톱에서 페이지를 열 때 첫 번째 화면에 표시되는 글꼴 수를 생각해보십시오. 50개의 다양한 플랫폼에 대한 짧은 연구에서 평균 3.4개의 아이콘이 사용된 것으로 나타났습니다(가장 일반적으로 장바구니, 사용자, 메뉴, 알림). 따라서 문제 없이 아이콘 XNUMX개만 로드하려면 전체 라이브러리를 로드해야 합니다.

이미지-2 (1).png — 출처: https://trends.builtwith.com/widgets/Font-Awesome

고급 JS 프레임워크는 이를 어떻게 관리합니까? 관련 구성 요소에 사용된 아이콘의 SVG 형식만 가져오므로 전체 글꼴이나 CSS 라이브러리를 로드할 필요가 없습니다.

Bootstrap과 React JS 사용이 우리에게 무엇을 말해주는가?

Bootstrap JS 라이브러리는 전 세계 모든 사이트에서 26%의 시장 점유율을 갖고 있으며 React 사용량은 약 4%입니다. 부트스트랩은 유연성과 사용 용이성으로 인해 인기가 높으며 빠른 개발이 가능합니다. 그러나 이러한 유연성에는 대가가 따릅니다. 일반 JS 기능, 광범위한 코드 적용 범위, 결코 사용하지 않을 기능에 대한 기능이 프로젝트에 포함됩니다.