웹 프레임워크 생태계 발전

Chrome은 더 나은 웹을 만들기 위해 오픈소스 프레임워크와 협력하고 있습니다.

Houssein Djirdeh

Chrome은 웹 프레임워크 생태계에 적극적으로 기여하고 있으며 Chrome 개발자 Summit 2019의 강연에서는 지난 한 해 동안 Chrome이 작업한 내용을 다룹니다.

추가 세부정보와 리소스를 포함한 강연의 요약 내용을 자세히 알아보세요.

웹을 개선하는 방법

Chrome팀의 모든 구성원은 웹을 개선하는 것을 목표로 합니다. 개발자가 우수한 웹페이지를 빌드하는 데 도움이 되는 기능을 갖출 수 있도록 브라우저 API와 Chrome을 구동하는 핵심 JavaScript 및 WebAssembly 엔진인 V8을 개선하기 위해 노력하고 있습니다. 또한 다양한 방식으로 오픈소스 도구에 기여하여 현재 프로덕션 환경에 있는 웹사이트를 개선하려고 노력합니다.

대부분의 웹 개발자는 가능한 한 오픈소스 도구를 사용하며 완전히 맞춤설정된 인프라를 빌드하지 않는 것을 선호합니다. 클라이언트 측 JavaScript 프레임워크와 UI 라이브러리는 오픈소스 사용의 증가하는 부분을 구성합니다. 가장 인기 있는 세 가지 클라이언트 측 프레임워크 및 라이브러리인 React, Angular, Vue에 관한 데이터는 다음과 같습니다.

즉, 더 나은 오픈소스 도구는 더 나은 웹을 직접적으로 만들 수 있습니다. 따라서 Chrome 엔지니어는 외부 프레임워크 및 라이브러리 작성자와 직접 협력하기 시작했습니다.

웹 프레임워크에 대한 기여

웹페이지를 빌드하고 구조화하는 데 흔히 사용되는 프레임워크는 다음 두 가지 카테고리로 나뉩니다.

  • UI 프레임워크(또는 라이브러리)(예: Preact, React 또는 Vue)는 애플리케이션의 뷰 레이어를 제어합니다(예: 구성요소 모델을 통해).
  • 웹 프레임워크(예: Next.js, Nuxt.js, Gatsby)는 서버 측 렌더링과 같은 기본 제공 의견 기능이 있는 엔드 투 엔드 시스템 을 제공합니다. 이러한 프레임워크는 일반적으로 뷰 레이어에 UI 프레임워크 또는 라이브러리를 활용합니다.

UI 프레임워크 및 라이브러리와 웹 프레임워크의 스펙트럼

개발자는 프레임워크를 사용하지 않도록 선택할 수 있지만 뷰 레이어 라이브러리, 라우터, 스타일 지정 시스템, 서버 렌더러 등을 함께 연결하여 자체 프레임워크 유형을 만드는 경우가 많습니다. 웹 프레임워크는 의견이 있지만 기본적으로 이러한 문제를 많이 처리합니다.

이 게시물의 나머지 부분에서는 Chrome팀의 기여를 비롯하여 다양한 프레임워크와 도구에 최근 도입된 여러 개선사항을 중점적으로 다룹니다.

Angular

Angular팀은 프레임워크 버전 8에 여러 개선사항을 도입했습니다.

  • 기본적으로 차등 로드를 통해 최신 브라우저에 불필요한 polyfill을 최소화합니다.
차등 빌드를 사용한 경우와 사용하지 않은 경우의 angular.io 번들 크기 감소를 보여주는 그래프
차등 빌드를 사용한 angular.io의 번들 크기 감소 (Angular 버전 8부터)
  • 지연 로드 경로를 위한 표준 동적 가져오기 구문 지원
  • 웹 워커 지원 기본 스레드와 별도의 백그라운드 스레드에서 작업을 실행
  • 번들 크기를 줄이고 재컴파일 성능을 개선하는 Angular의 새로운 렌더링 엔진인 Ivy는 기존 프로젝트의 미리보기 모드에서 사용할 수 있습니다.

이러한 개선사항에 관한 자세한 내용은 'Angular 버전 8' 을 참고하세요. Chrome팀은 더 많은 기능이 도입됨에 따라 내년에 긴밀히 협력할 수 있기를 기대합니다.

Next.js

Next.js는 React를 뷰 레이어로 사용하는 웹 프레임워크입니다. Next.js는 많은 개발자가 클라이언트 측 프레임워크에서 기대하는 UI 구성요소 모델 외에도 다음과 같은 여러 기본 제공 기본 기능을 제공합니다.

  • 기본 코드 분할을 사용한 라우팅
  • 컴파일 및 번들링 (Babel 및 webpack 사용)
  • 서버 측 렌더링
  • 페이지별로 데이터를 가져오는 메커니즘
  • 캡슐화된 스타일 지정 (styled-jsx 사용)

Next.js는 번들 크기 감소를 위해 최적화되며 Chrome팀은 성능을 더욱 개선하는 데 도움이 될 수 있는 영역을 파악하는 데 도움을 주었습니다. 각각의 의견 요청 (RFC) 및 풀 요청 (PR)을 확인하여 자세히 알아볼 수 있습니다.

  1. 더 세분화된 번들을 내보내고 여러 경로를 통해 가져온 중복 코드의 양을 줄이는 개선된 webpack 청크 전략 (RFC, PR)
  2. 코드 변경 없이 Next.js 앱의 총 JavaScript 양을 최대 20% 까지 줄일 수 있는 모듈/nomodule 패턴 을 사용한 차등 로드 (RFC, PR).
  3. User Timing API를 활용하는 개선된 실적 측정항목 추적(PR)
Barnebys.com 홈페이지
Barnebys.com, 골동품 및 수집품을 위한 대형 검색엔진인 Barnebys.com은 세분화된 청크를 사용 설정한 후 총 JavaScript가 23% 감소했습니다.

또한 다음과 같이 Next.js 사용의 사용자 및 개발자 환경을 개선하기 위한 다른 기능도 살펴보고 있습니다.

  • 동시 모드를 사용 설정하여 구성요소의 점진적 또는 부분적 하이드레이션을 잠금 해제합니다.
  • 모든 소스 파일과 생성된 애셋을 분석하여 더 나은 오류와 경고를 표시하는 webpack 기반 적합성 시스템 (RFC)
Next.js의 적합성 빌드 오류 예
Next.js (프로토타입)의 적합성 빌드 오류 예

Nuxt.js

Nuxt.js는 Vue.js를 다양한 라이브러리와 결합하여 의견 설정을 제공하는 웹 프레임워크입니다. Next.js와 마찬가지로 기본적으로 많은 기능이 포함되어 있습니다.

  • 기본 코드 분할을 사용한 라우팅
  • 컴파일 및 번들링 (Babel 및 webpack 사용)
  • 서버 측 렌더링
  • 모든 페이지의 비동기식 데이터 가져오기
  • 기본 데이터 스토어 (Vuex)

다양한 도구의 성능을 개선하기 위해 직접 작업하는 것과 함께 더 많은 오픈소스 프레임워크와 라이브러리에 금전적 지원을 제공하기 위해 프레임워크 기금을 확대했습니다. 최근 Nuxt.js를 지원 함에 따라 더 스마트한 서버 렌더링 및 이미지 최적화를 비롯한 몇 가지 기능이 가까운 시일 내에 도입될 예정입니다.

Babel

언급된 거의 모든 프레임워크에서 중요한 기본 도구인 Babel의 성능을 개선하는 데도 진전을 이루었습니다.

Babel은 최신 구문이 포함된 코드를 다양한 브라우저에서 이해할 수 있는 코드로 컴파일합니다. 선택한 모든 환경에 필요한 충분한 polyfill을 제공하기 위해 다양한 브라우저 대상을 지정할 수 있는 최신 브라우저를 타겟팅하는 데 @babel/preset-env를 사용하는 것이 일반적이 되었습니다. 대상을 지정하는 한 가지 방법은 <script type="module">을 사용하여 ES 모듈을 지원하는 모든 브라우저를 타겟팅하는 것입니다.

이 경우를 최적화하기 위해 새로운 프리셋인 @babel/preset-modules를 출시했습니다. preset-modules는 브라우저 버그를 방지하기 위해 최신 구문을 이전 구문으로 변환하는 대신 가능한 가장 가까운 손상되지 않은 최신 구문으로 변환하여 각 특정 버그를 수정합니다. 따라서 대부분의 브라우저에 거의 수정되지 않은 최신 코드를 제공할 수 있습니다.

브라우저에 더 나은 폴리필을 제공하는 새로운 babel 사전 설정

preset-env를 이미 사용하는 개발자는 곧 preset-env에도 통합될 예정이므로 아무것도 하지 않아도 이러한 최적화의 이점을 누릴 수 있습니다.

다음 단계

더 나은 환경을 제공하기 위해 오픈소스 프레임워크 및 라이브러리와 긴밀히 협력하면 Chrome팀은 사용자와 개발자 모두에게 근본적으로 중요한 것이 무엇인지 파악할 수 있습니다.

웹 프레임워크, UI 라이브러리 또는 모든 형태의 웹 도구 (번들러, 컴파일러, 린터)를 사용하는 경우 프레임워크 기금을 신청하세요!