큰 JS 라이브러리를로드하는 비용을 어떻게 줄일 수 있습니까?

내 페이지에 큰 자바 스크립트 라이브러리를 사용하는 경우이 사이트가 사용자의 사이트 사용을 손상시키지 않도록하려면 어떻게해야합니까?

할 수있는 일이 4 가지 있습니다.

1. JS 파일을 축소하십시오. 이렇게하면 모든 주석과 공백이 제거되어 크기가 줄어 듭니다.
2. 파일이 하나만 있도록 각 페이지에 JS 파일을 결합하십시오.
3. 파일을 보낼 때 패키지를 사용하여 파일을 압축하십시오. 이렇게하면 더 작아집니다
4. 페이지 하단에 즉시 필요하지 않은 자바 스크립트를 넣으면 끝에로드됩니다. 이를 통해 사용자는 JS가 완전히로드되기 전에도 페이지를보고 사용할 수 있습니다.

그리고 다른 사람들은 다음과 같이 제안했습니다.

• Apache는 파일 관리를 크게 단순화하는 압축 (및 압축 컨텐츠 캐싱)을 자동으로 처리합니다.
• JavaScript를 캐시 가능하게 만들면 큰 이점이 있습니다.
• 와일드 카드 도메인 (여러 URI가있는)은 더 많은 동시 연결을 허용합니다. 프리 페칭은 이미지 /

(예 : jQuery를, 프로토 타입 또는 도장 등) 공통 라이브러리를 사용하는 경우, 당신은 구글에 파일을 오프로드하고 만들 수 를 제공 , 이것은 당신에게 여러 가지 이점을 제공합니다 :

• 축소 및 압축 등에 대해 걱정할 필요가 없습니다.
• 그것은 당신의 대역폭이 아닙니다
• 이러한 파일은 다른 도메인에서 제공되므로 호스트 이름 당 최대 2 개의 병렬 요청 제한을 해결할 수 있습니다 (적어도 부분적으로).
• 운이 좋으면 사용자는 동일한 공급자의 동일한 라이브러리를 사용하는 다른 사이트를 이미 방문 했으므로 브라우저 캐시에 이미 있습니다.

참고 : 요청한 버전은 캐싱 특성에 큰 영향을 줄 수 있습니다. jQuery 1.4.2를 요청하면 1 년 동안 캐시 될 수있는 파일이 제공되지만 1.4는 1 시간 동안 만 캐시 될 수 있습니다.

전체 라이브러리를 하나의 js 파일에 넣고 파일을 압축 할 수 있습니다. 그러나 실제로는 페이지를 처음로드 할 때만 중요합니다. 이 후 js 파일은 특히 캐시 만료를 충분히 길게 설정 한 경우 브라우저에 캐시됩니다. 따라서 연속 적중은 더 이상 js 파일을로드하지 않습니다.

위의 답변 외에도 Google Closure Compiler 를 사용하여 다른 타사 라이브러리 (jQuery, YUI, mootools 등)와 통합하면서 JS를 자동으로 압축하고 최적화 할 수 있습니다

여러 페이지 요소가 있고 별도의 도메인에 액세스하는 경우 두 번째 도메인에서 큰 JS 파일을 포함하여 모든 정적 파일을 호스팅하는 것을 고려할 수 있습니다.

Steve Souders가 그의 고성능 웹 사이트 블로그에서 언급 한 것처럼 -

... 일부 상황에서는 단일 도메인에서 다운로드되는 많은 리소스를 가져 와서 여러 도메인으로 분할하는 것이 좋습니다. 이 도메인 샤딩이라고합니다. 이렇게하면 더 많은 리소스를 병렬로 다운로드하여 전체 페이지로드 시간을 줄일 수 있습니다.

그가 쓰는 다른 곳 ..

브라우저는 도메인 당 제한된 수의 연결을 엽니 다 ... 한 도메인이 아닌 두 도메인의 요청을 분할 또는 샤딩하면 특히 IE 6 및 7에서 더 빠른 페이지가 생성됩니다.