> 웹 프론트엔드 > JS 튜토리얼 > 파일 번들링 및 HTTP/2 : 모범 사례를 다시 생각합니다

파일 번들링 및 HTTP/2 : 모범 사례를 다시 생각합니다

Jennifer Aniston
풀어 주다: 2025-02-17 12:47:14
원래의
283명이 탐색했습니다.

File Bundling and HTTP/2: Rethinking Best Practices

최신 JavaScript 뉴스 레터를 구독하고 여기를 클릭하여 구독하려면 여기를 클릭하십시오. 이제 거의 모든 JavaScript 응용 프로그램이 빌드 프로세스를 사용합니다. ES2015 또는 TypeScript에서 번역하지 않더라도 코드에 대한 어떤 형태의 연결 및 압축을 수행하는 것이 표준 관행이되었습니다. 그 이유는 HTTP 요청을하는 데 상당한 오버 헤드가 있기 때문입니다. 서비스가 적고 큰 파일은 많은 작은 파일보다 더 효율적입니다. 네트워크의 기본 프로토콜 인 다음 버전의 HTTP/2를 채택하면 모범 사례를 다시 생각할 때가 될 수 있습니다.

HTTP/2는 Google의 SPDY 프로토콜을 기반으로하며 기존 HTTP 1.1 표준을 기반으로 페이지 로딩 대기 시간을 개선하고 보안을 개선하도록 설계되었습니다. 이 새로운 프로토콜에 대한 작업은 2012 년에 시작되었으며 첫 번째 개발 버전은 SPDY의 직접 사본입니다. 최종 표준은 2015 년 5 월에 출시되었으며 올해 5 월 Google은 더 이상 Chrome의 SPDY를 지원하지 않을 것이라고 발표했습니다. HTTP/2는 이전 모델과 어떻게 다릅니 까? 한 가지 주요 차이점은 http/2가 텍스트 기반 프로토콜이 아닌 프로토콜이라는 것입니다. 이로 인해보다 작고 단호하고 오류가 적은 오류가 발생합니다. 이 프로토콜의 주요 장점은 다중화되어 있다는 것입니다. 즉, 단일 연결에서 여러 파일을 전송할 수 있습니다. 널리 공개 된 또 다른 기능은 서버 푸시로, 클라이언트가 요청하기 전에 서버가 클라이언트로 리소스를 전송하여 캐시를 미리 채울 수 있습니다.

모든 주류 브라우저를 포함하여 새로운 프로토콜에 대한 지원이 매우 좋습니다. 서버 측에서 Apache2, Nginx 및 Microsoft IIS에서 지원하며 Node.js 5.0 이상에서도 지원됩니다. 대부분의 브라우저 공급 업체는 TLS 연결에서 HTTP/2 만 지원할 것이라고 말하지만 Let 's Encrypt의 무료 SSL 인증서의 출현으로 쉬운 요구 사항입니다. 올해 6 월 W3Techs가 수집 한 데이터에 따르면 상위 천만 개의 웹 사이트 중 약 8.4%가 새로운 계약을 지원합니다. 크롬 사용자 인 경우 HTTP/2 및 SPDY 표시기 확장을 사용하여 방문하는 웹 사이트가 HTTP/2를 통해 서비스를 제공하는 것을 명확하게 볼 수 있습니다.

http/2의 채택은 JavaScript 개발자에게 무엇을 의미합니까? 여러 파일을 번들에 연결하는 현재 관행은 브라우저가 코드를 효율적으로 캐시하기가 어렵습니다. 모듈에서 코드 줄을 변경하려면 전체 번들 파일을 다시 다운로드해야합니다. HTTP/2 멀티플렉싱은 요청을 비교적 저렴하게 만들기 때문에 코드를 작은 번들로 나누고 캐시를 더 잘 활용하여 응용 프로그램이 사용자의 대역폭을 효과적으로 활용할 수있는 옵션이 있습니다.

그러나 요청이 저렴하다면 번들을 완전히 포기해야합니까? 언뜻보기에 이것은 의미가있는 것처럼 보이지만 HTTP 요청의 비용이 고려해야 할 유일한 요소는 아닙니다. 웹 서버는 또한 많은 양의 파일을 얼마나 효율적으로 제공 할 수 있는지 제한합니다. JavaScript 커뮤니티의 급증이 더 작고 중앙 집중식 모듈로 이동함에 따라 이러한 파일을 어떤 종류의 번들링없이 클라이언트에게 제공하는 것은 이상적이지 않습니다. 가장 중요한 것은 파일을 결합하면 압축이 더 나은 압축을 얻을 수 있으므로 대역폭이 절약됩니다.

그렇다면 언제 http/2로 전환해야합니까? 대답은 상황에 따라 다릅니다. 브라우저 지원이 매우 좋지만 대상 고객이 여전히 이전 버전의 IE에 갇혀 있으면 운이 좋으므로 방문자 통계를 확인하여 대부분의 사용자에게 도움이 될 수 있는지 확인하십시오. 이 모든 것에서 얻는 것은 새로운 프로토콜의 지원과 채택이 놀랍게도 잘 진행되고 있으며 개발자로서 우리가 무시할 수없는 트렌드입니다.

어떤 종류의 번들링 전략을 사용하십니까? HTTP/2로 전환하는 것을 고려하고 있습니까, 아니면 이미 전환했을 수도 있습니까? 의견에 알려주세요!

파일 번들링 및 http/2

에 대한 FAQS (FAQS)

HTTP/1보다 HTTP/2의 주요 장점은 무엇입니까?

http/2는 http/1에 비해 몇 가지 장점이 있습니다. 가장 중요한 장점 중 하나는 단일 TCP 연결을 통해 여러 요청을 다중화하는 기능입니다. 이 기능은 여러 요청을 할 때 발생할 수있는 대기 시간을 줄이므로 웹 응용 프로그램의 전반적인 성능을 향상시킵니다. HTTP/2는 또한 헤더 압축을 지원하여 오버 헤드를 줄이고 서버 푸시를 지원하므로 서버가 클라이언트가 요청하기 전에 클라이언트에게 리소스를 보낼 수 있습니다.

파일 번들은 HTTP/2에서 어떻게 작동합니까?

HTTP/2에서 파일 번들링은 더 이상 HTTP/1에서와 같이 필요하지 않습니다. HTTP/2가 한 번에 단일 연결에서 여러 요청을 처리 할 수있어서 파일을 묶어 요청 수를 줄일 수 있기 때문입니다. 대신 파일을 별도로로드 할 수있어 캐시 활용을 향상시키고 파일 관리 및 업데이트를 단순화 할 수 있습니다.

http/2의 멀티플렉싱은 무엇입니까?

멀티플렉싱은 HTTP/2의 주요 기능으로, 단일 TCP 연결을 통해 여러 요청과 응답을 동시에 전송할 수 있습니다. 이는 연결 당 하나의 요청 만 처리 할 수있는 HTTP/1의 주요 개선입니다. 멀티플렉싱은 여러 요청과 관련된 대기 시간을 줄여서 웹 응용 프로그램의 성능을 향상시킵니다.

HTTP/2에서 서버는 어떻게 작동합니까?

서버 푸시 푸시는 HTTP/2의 기능으로, 클라이언트가 요청하기 전에 서버가 클라이언트에 리소스를 보낼 수 있습니다. 이는 고객이 리소스를 수신하고 렌더링하는 데 걸리는 시간을 줄임으로써 웹 응용 프로그램의 성능을 향상시킬 수 있습니다. 서버는 초기 요청에 따라 클라이언트가 필요로하는 리소스를 푸시 할 수 있습니다.

파일 번들링이 HTTP/2에서 나쁜 관행으로 간주되는 이유는 무엇입니까?

http/2에서 파일 번들링은 프로토콜의 주요 장점 중 일부를 제거하기 때문에 나쁜 관행으로 간주됩니다. HTTP/2는 동시에 단일 연결에서 여러 요청을 처리하도록 설계되었으므로 파일을 함께 묶으면 처리하고 갱신하는 데 시간이 더 걸리는 더 크고 복잡한 파일이 생성되므로 실제로 성능이 저하 될 수 있습니다.

HTTP/2는 SEO에 어떤 영향을 미칩니 까?

http/2는 웹 사이트 속도와 성능을 향상시킬 수 있기 때문에 SEO에 긍정적 인 영향을 줄 수 있습니다. 페이지 로딩 속도가 순위 요인이기 때문에 더 빠른 사이트는 검색 엔진 결과에서 높은 순위를 차지하는 경향이 있습니다. 또한 HTTP/2의 멀티플렉싱 및 서버 푸시 기능은 사용자 경험을 향상시켜 SEO를 향상시키는 데 도움이됩니다.

HTTP/2에서 보안을 향상시키는 방법은 무엇입니까?

http/2는 클라이언트와 서버간에 전송 된 데이터를 암호화하는 HTTPS 사용을 지원하여 보안을 향상시킵니다. 이것은 전송 중에 민감한 정보가 가로 채기 또는 변조되는 것을 방지합니다. 또한 HTTP/2의 이진 프레임 메커니즘은 HTTP/1 프로토콜에 대한 공격을 방지 할 수 있습니다.

HTTP/2는 모바일 브라우징에 어떤 영향을 미칩니 까?

HTTP/2는 대기 시간을 줄이고 웹 애플리케이션의 속도를 높여 모바일 브라우징을 크게 향상시킬 수 있습니다. 이것은 종종 느린 인터넷 연결을 사용하는 모바일 사용자에게 특히 유리합니다. HTTP/2의 멀티플렉싱 및 서버 푸시 기능은 모바일 애플리케이션의 성능을 향상시킬 수 있습니다.

이전 브라우저에서 http/2를 사용할 수 있습니까?

대부분의 최신 브라우저는 HTTP/2를 지원하지만 이전 브라우저는 그렇지 않을 수 있습니다. 클라이언트가 HTTP/2를 지원하지 않으면 서버는 일반적으로 HTTP/1을 사용하는 것으로 다시 떨어집니다. HTTP/2에는 많은 이점이 있지만 좋은 코딩 관행을 대체하지 않으며 더 넓은 성과 전략의 일부로 사용해야합니다.

내 웹 사이트가 http/2를 사용하고 있는지 확인하는 방법은 무엇입니까?

웹 사이트가 HTTP/2 테스트와 같은 HTTP/2를 사용하고 있는지 확인하는 온라인 도구가 있습니다. 브라우저 개발자 도구에서 네트워크 프로토콜을 확인하여 수동으로 확인할 수도 있습니다. 웹 사이트가 HTTP/2를 사용하지 않는 경우 서버 소프트웨어 또는 구성을 업데이트해야 할 수도 있습니다.

위 내용은 파일 번들링 및 HTTP/2 : 모범 사례를 다시 생각합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿