js / css 파일을 단일 파일로 결합해야합니까?

두 YSlow에 구글의 페이지 속도 , 추가 기능은 HTTP 요청의 수를 줄이기 위해 각 하나의 파일로 스크립트 (스타일) 파일을 결합하는 것을 권장하고 스크립트 파일은 전체 사이트에 걸쳐 일관성 때 나는 확실히이 점을 볼 수 있습니다 그러나 사이트마다 요구 사항이 다른 웹 응용 프로그램의 경우.

내가 보는 방식에는 몇 가지 옵션이 있습니다.

1. 사이트 전체에서 사용되는 모든 파일을 결합하면 모든 페이지가 동일한 결합 파일을 얻습니다. 단점은 사용하지 않는 콘텐츠로 인해 스크립트가 복잡해집니다 (더 많은 첫 번째로드 (구성 요소 스크립트가 변경 될 때 다시로드)).

2. 페이지 단위로 파일을 결합하십시오-단점은 요구 사항이 다른 각 페이지마다 다른 결합 파일을 갖습니다 (각 페이지 유형에 대해 첫 번째로드가 많음)

3. 권장 사항에 대한 엄격한 '하나의 파일 만'해석을 무시하고 적절한 경우 여러 개의 파일로 페이지를로드하여 캐싱을하여 일반적인 경우에 HTTP 요청 수를 무시합니다. 단점은 각 페이지의 HTTP 요청 수입니다

생각?

옵션 2가 최악입니다. 필요한 JS 스크립트를 다르게 조합 한 모든 페이지는 HTTP 요청을하게됩니다. 성능이 훨씬 나빠질 것입니다.

옵션 1이 최고입니다. 결국 대부분의 사용자는 웹 사이트의 대부분의 페이지 "유형"을 방문하므로 거의 방문하지 않는 페이지에 필요한 큰 JS 파일을 제외하고 모든 것을 단일 파일로 결합하는 것이 유리합니다.

첫 번째 페이지 적중은 다른 파일보다 느릴 수 있지만 다른 모든 페이지 적중이 캐시 된 글로벌 JS를 사용하므로 여전히 가치가 있습니다.

한 가지 팁; 아직 없으면 자동으로 병합하십시오!

필자는 일반적으로 "전역 자바 스크립트"(jQuery 및 공통 플러그인)를 단일 파일로 결합한 다음 필요할 때 별도의 파일로 추가 플러그인을 제공합니다.

예를 들어, 많은 페이지를 실행하는 한 사이트에는 데이터 테이블이 있으므로 global.jsjQuery, DataTables 및 SuperFish (내 메뉴 용)가 있습니다. 사이트에 "라이트 박스"를 사용하는 두 페이지가 있으므로이 두 페이지에 대해 별도의 스크립트가 있습니다.

CSS의 경우 전체 사이트에 단일 파일을 제공하고 CSS를 가능한 한 일반적으로 만들려고 노력합니다. 대부분의 페이지에는 몇 가지 고유 한 CSS 요소 만 있습니다.

가능한 적은 파일을 사용하는 것이 권장되지만 페이지로드에 필요한 기능과 비동기식로드를 통해 지연 될 수있는 기능이 분리되어있을 수 있습니다.

JS를 충분히 두 번째 범주로 푸시 할 수 있으면 페이지의 초기로드 속도를 향상시켜 사용자에게 더 나은 경험을 제공 할 수 있습니다.

나는 그것들을 모두 결합하는 것을 제안하지 않을 것입니다. 공통 라이브러리를 사용하는 경우 CDN을 활용하여 자바 스크립트를 제공 할 수 있습니다. 그런 다음 브라우저 캐싱 (다른 사이트에서 동일한 CDN을 사용한다고 가정) 및 분산 전송을 활용할 수 있습니다. Microsoft 와 Google에는 각각 솔루션이 있으며 (정직하게 사용하지는 않았지만 확실히 시작할 것입니다) 다른 솔루션이있을 수 있습니다. 관련 메모에서 SO에는 다음과 같은 질문이 있습니다.

브라우저는 언제 JavaScript 캐시를 자동으로 지웁니까?

첫 번째 대답은 순금입니다.