내 웹 사이트는 jQuery, jQuery UI, prefixfree, 몇 가지 jQuery 플러그인 및 내 자체 자바 스크립트 코드와 같은 약 10 개의 타사 자바 스크립트 라이브러리를 사용합니다. 현재 저는 Google CDN 및 cloudflare와 같은 CDN에서 외부 라이브러리를 가져옵니다. 더 나은 접근 방식이 무엇인지 궁금합니다.
- CDN에서 외부 라이브러리 가져 오기 (오늘처럼)
- 모든 파일을 단일 js 및 단일 css 파일로 결합하고 로컬에 저장합니다.
설명이있는 한 모든 의견을 환영합니다. 감사 🙂
답변
CDN의 가치는 사용자가 해당 CDN에서 동일한 파일을 호출하는 다른 사이트를 이미 방문했을 가능성에 있으며 파일 크기에 따라 점점 더 가치가 높아집니다. 요청 된 파일의 편재성 및 CDN의 인기에 따라 이러한 경우가 발생할 가능성이 높아집니다.
이를 염두에두고 인기있는 CDN에서 비교적 크고 인기있는 파일을 가져 오는 것은 절대적으로 의미가 있습니다. jQuery와 jQuery UI가이 법안에 적합합니다.
한편, 파일을 연결하는 것은 많이 변경되지 않을 것 같은 작은 파일에 대해 의미가 있습니다. 일반적으로 사용되는 플러그인이이 청구서에 맞을 것이지만 핵심 애플리케이션 별 코드는 그렇지 않을 것입니다. 매주 변경 될 수 있습니다. 다른 모든 파일과 다시 연결하면 사용자가 모든 것을 다시 다운로드하도록 강제해야합니다.
HTML5 상용구 는 이에 대한 일반적인 솔루션을 제공하는 데 매우 효과적입니다.
- Modernizr는 머리에서 로컬에서로드됩니다. 매우 작고 인스턴스마다 상당히 다르므로 CDN에서 소스를 가져 오는 것은 이치에 맞지 않으며 사용자에게 너무 많은 피해를주지 않습니다. 섬기는 사람. CSS가 그것을 사용할 수 있기 때문에 머리에 놓이게되므로 본문이 렌더링되기 전에 효과가 알려지기를 원합니다. 그 밖의 모든 것은로드 및 실행 중에 렌더링을 차단하는 무거운 스크립트를 중지하기 위해 맨 아래로 이동합니다.
- 거의 모든 사람들이 CDN의 jQuery를 사용하고 상당히 무겁습니다. 사용자는 사이트를 방문하기 전에 이미 캐시 된 상태 일 것입니다.이 경우 캐시에서 즉시로드합니다.
- 많이 변경되지 않는 모든 작은 타사 종속성 및 코드 스 니펫은
plugins.js
자체 서버에서로드 된 파일 로 연결됩니다 . 사용자가 처음 방문 할 때 먼 만료 헤더와 함께 캐시되고 후속 방문시 캐시에서로드됩니다. - 핵심 코드는
main.js애플리케이션 로직이 매주 또는 매월 변경 될 수 있다는 사실을 설명하기 위해 더 가까운 만료 헤더와 함께으로 이동합니다. 이렇게하면 버그를 수정했거나 사용자가 지금부터 2 주 후에 새로운 기능을 도입했을 때 위의 모든 콘텐츠를 캐시에서 가져올 수있는 동안 새로로드 될 수 있습니다.
다른 주요 라이브러리의 경우 개별적으로 살펴보고 jQuery의 리드를 따라야하는지, 자체 서버에서 개별적으로로드해야하는지 또는 연결해야하는지 스스로에게 물어봐야합니다. 이러한 결정을 내릴 수있는 방법의 예 :
- Angular는 매우 인기가 많고 매우 큽니다. CDN에서 가져옵니다.
- Twitter Bootstrap은 비슷한 수준의 인기를 얻었지만 구성 요소 선택이 비교적 적으며 사용자가 아직 가지고 있지 않다면 전체를 다운로드 할 가치가 없을 수도 있습니다. 하지만 코드의 나머지 부분에 맞는 방식은 매우 본질적이며 전체 사이트를 다시 빌드하지 않고는 변경하지 않을 것입니다. 따라서 로컬에서 호스팅 된 상태로 유지하고 메인
plugins.js. 이렇게plugins.js하면 사용자가 모든 Bootstrap 코어를 다운로드하지 않고도 항상 Bootstrap 확장으로 업데이트 할 수 있습니다 .
그러나 반드시 필요한 것은 없습니다. 마일리지가 다를 수 있습니다.
