Tôi có nên kết hợp các tệp js / css thành một tệp không?

Cả hai tiện ích bổ sung Tốc độ trang của YSlow và Google đều khuyên bạn nên kết hợp các tệp tập lệnh (và kiểu) vào một tệp để giảm số lượng yêu cầu HTTP và tôi chắc chắn có thể thấy điểm này khi các tệp tập lệnh thống nhất trên toàn bộ trang web, nhưng đối với một ứng dụng web có các yêu cầu khác nhau trên trang web.

Cách tôi nhìn thấy nó có một vài lựa chọn:

1. Kết hợp tất cả các tệp được sử dụng trên trang web và mọi trang đều có cùng một tệp kết hợp - nhược điểm là nội dung không được sử dụng làm lộn xộn tập lệnh (và tải đầu tiên nặng hơn (cũng tải lại khi có bất kỳ tập lệnh thành phần nào thay đổi))

2. Kết hợp các tệp trên cơ sở mỗi trang - nhược điểm là mỗi trang có các yêu cầu khác nhau sẽ nhận được một tệp kết hợp khác nhau (tải đầu tiên nặng hơn cho từng loại trang)

3. Bỏ qua cách giải thích 'chỉ một tệp' nghiêm ngặt đối với các đề xuất và tải trang ở nhiều tệp là phù hợp, với bộ đệm hy vọng sẽ phủ nhận số lượng yêu cầu HTTP trong trường hợp chung - nhược điểm là số lượng yêu cầu HTTP trên mỗi trang

Suy nghĩ?

Lựa chọn 2 là tồi tệ nhất; điều đó có nghĩa là mỗi trang có sự kết hợp khác nhau của các tập lệnh JS cần thiết sẽ dẫn đến một yêu cầu HTTP. Nó sẽ làm cho hiệu suất tồi tệ hơn nhiều .

Lựa chọn 1 là tốt nhất. Cuối cùng, hầu hết người dùng sẽ truy cập vào hầu hết các "loại" trang của trang web của bạn, do đó, vẫn thuận lợi khi kết hợp mọi thứ vào một tệp duy nhất, ngoại trừ các tệp JS lớn cần thiết trong một vài trang, hiếm khi được truy cập.

Lần truy cập trang đầu tiên có thể chậm hơn so với các tệp khác nhau, nhưng vẫn đáng thực hiện vì mọi lần truy cập trang khác sẽ sử dụng mã toàn cầu được lưu trong bộ nhớ cache.

Một mẹo mặc dù; hợp nhất chúng tự động nếu bạn chưa có!

Tôi thường kết hợp "Javascript toàn cầu" - jQuery và các plugin phổ biến - vào một tệp duy nhất và sau đó phân phát các plugin bổ sung dưới dạng các tệp riêng biệt khi được yêu cầu.

Ví dụ: một trang web tôi chạy nhiều trang có bảng dữ liệu trên đó để tôi có một global.jsjQuery, DataTables và SuperFish (cho menu của tôi). Có hai trang trên trang web sử dụng "hộp đèn" để tôi có một tập lệnh riêng cho hai trang đó.

Đối với CSS, tôi chỉ cung cấp một tệp duy nhất cho toàn bộ trang web và cố gắng làm cho CSS càng chung càng tốt - hầu hết các trang chỉ có một vài yếu tố CSS duy nhất.

Mặc dù chắc chắn nên sử dụng càng ít tệp càng tốt, bạn có thể thấy rằng bạn có sự phân chia giữa các chức năng được yêu cầu khi tải trang và chức năng có thể được hoãn lại thông qua tải không đồng bộ.

Nếu đủ số JS của bạn có thể được đẩy vào danh mục thứ hai, bạn có thể cải thiện tốc độ tải ban đầu của trang, tạo trải nghiệm tốt hơn cho người dùng của bạn.

Tôi sẽ không đề nghị kết hợp tất cả chúng. Nếu bạn đang sử dụng một thư viện chung, bạn có thể tận dụng CDN để phân phối javascripts của mình. Sau đó, bạn có thể tận dụng bộ nhớ đệm của trình duyệt (giả sử các trang web khác đang sử dụng cùng CDN) và phân phối phân phối. Microsoft và Google đều có giải pháp (tôi cũng không sử dụng một cách trung thực, nhưng tôi chắc chắn sẽ bắt đầu) và có thể có những giải pháp khác. Về một lưu ý liên quan, SO có câu hỏi này:

Khi trình duyệt tự động xóa bộ đệm JavaScript?

và câu trả lời đầu tiên là vàng nguyên khối.