Javascript - Để kết hợp hoặc không kết hợp, đó là câu hỏi

Question

Ok, vì vậy tôi biết rõ ràng là kết hợp tất cả các trang Javascript thành một tệp bên ngoài duy nhất cho mục đích hiệu quả, nhưng đó không phải là câu hỏi ở đây.

Giả sử tôi có Default.htm với trường tìm kiếm có một chút ma thuật Javascript gắn liền với nó. Sau đó, tôi có Contact.htm với một hình thức liên lạc có một số ma thuật Javascript gắn liền với nó. Và cuối cùng tôi có một FAQ.htm với một số bảng điều khiển jQuery hiển thị các câu trả lời ... bạn sẽ có được hình ảnh.

Về cơ bản, tôi có ba trang tất cả đều có nhu cầu javascript "một số", nhưng không có Javascript nào được sử dụng trên bất kỳ trang nào khác. Có tốt hơn là kết hợp tất cả Javascript đó vào một tệp được rút gọn lớn mà tải một lần và sau đó được lưu trữ trong Cache hoặc tốt hơn là sử dụng tệp Javascript riêng lẻ trên trang Mặc định, nhưng không sử dụng nó trên Liên hệ trang ... vv?

Điều gì hoạt động tốt nhất trong trường hợp này?

Tùy chọn: 1

default.htm
jquery.js
default.js

Contact.htm
jquery.js
contact.js

Faq.htm
jquery.js
faq.js

Tùy chọn: 2

default.htm
jquery-mặc-contact-faq-min.js

Liên hệ.htm
jquery-default- liên hệ-faq-min.js

Faq.htm
jquery-mặc-contact-faq-min.js

PS: cho tất cả các bạn asp.net guys, Tôi đang sử dụng Combres để Kết hợp, Thu nhỏ và Phiên bản các tệp Javascript của tôi

Answer 1

Tôi chắc chắn sẽ bỏ phiếu để kết hợp chúng. Nếu bạn lo ngại về phân tích cú pháp hoặc thời gian thiết lập cho Javascript "không được sử dụng", thì tôi khuyên bạn nên cấu trúc Javascript của bạn với từng tệp trong một đóng và sau đó chạy các đóng bạn cần trên các trang bạn cần chúng. Ví dụ:

// File 1 
window.closures = window.closures || {} 
window.closures["page1"] = (function() { 
    // Javascript for Page 1 
}); 

// File 2 
window.closures = window.closures || {} 
window.closures["page2"] = (function() { 
    // Javascript for Page 2 
});  

// File 3 
window.closures = window.closures || {} 
window.closures["page2"] = (function() { 
    // Javascript for Page 2 
}); 

Sau đó, trong trang của bạn:

<!-- This one combined.js file will be downloaded once and cached //--> 
<script type="text/javascript" src="combined.js"></script> 
<script> 
    // Run the Javascript in your combined.js intended for page2 
    window.closures["page2"]() 
</script> 

Answer 2

kết hợp thành 1 tệp. để cho nó được lưu trữ. nó tải một lần trên bất kỳ trang nào và đối với bất kỳ trang tiếp theo nào, nó có thể sử dụng bản sao được lưu trong bộ nhớ cache.

Answer 3

Nó luôn luôn là một hành động cân bằng số lượng yêu cầu HTTP và hạn chế các byte được chuyển mà không thực sự cần thiết.

Có ba khả năng:

1. kết hợp tất cả mọi thứ trong 1 tập tin
2. có ba tập tin riêng biệt, và tải chúng khi cần thiết
3. có ba tập tin riêng biệt, nạp một cần thiết cho trang đó ngay lập tức và tải trước những người khác (khi thời gian là đúng)

Bạn sẽ chỉ biết điều gì là tốt nhất cho tình huống của mình bằng cách thực hiện một số thử nghiệm tải AB.

Mọi thứ đều phụ thuộc vào kích thước của dữ liệu đã chuyển, chồng chéo chức năng cần thiết và xác suất cần một số chức năng.

Answer 4

Bởi vì nó không có vẻ như có rất nhiều javascript, kết hợp nó thành một tập tin sẽ tốt hơn. Chỉ khi có số lượng javascript đáng kể không cần tải nếu người dùng không truy cập vào trang thì bạn sẽ cân nhắc việc giữ riêng các tệp.

Answer 5

Nếu tệp kết hợp đang được nói, hãy giảm 25kb, sau đó tiếp tục. Nhưng nếu nó là nhiều hơn thế, tôi muốn nói, xác định một trong đó là lớn nhất trong số họ, và để cho rằng một trong những tập tin js được riêng biệt. Kết hợp phần còn lại. Đó là giới hạn 25kb thingy quá không phải là một quy tắc cứng, nó là vào bạn.

Nếu các tệp riêng lẻ của bạn có độ lớn là 30kb, tôi khuyên bạn không nên kết hợp chúng và cho phép các tệp js riêng lẻ được lưu trữ dưới dạng tệp js riêng lẻ.

Hy vọng điều đó sẽ hữu ích.