JS gói nhỏ gọn và các thư viện bên ngoài

Question

Tôi muốn giảm yêu cầu HTTP trên trang web của mình càng nhiều càng tốt.

Có ổn không khi rút gọn tất cả JS trong một tệp được rút gọn lớn, bao gồm các thư viện bên ngoài như jQuery?

Answer 1

Có; điều này là hoàn toàn tốt đẹp và thông lệ.

Tuy nhiên, bạn có thể muốn tải jQuery từ CDN của Google thay vì bao gồm nó trong gói.
Điều này tiết kiệm thời gian cho những người đã có jQuery của Google trong bộ nhớ cache của họ.

Answer 2

Nó thường xuyên được thực hiện. Chỉ cần cẩn thận rằng toàn bộ đội ngũ dev biết cái gì là gì, và cái gì không, trong tập tin js của bạn. Tôi không thể nói cho bạn biết bao nhiêu lần tôi thấy một trang web của khách hàng chứa hai hoặc ba hoặc nhiều trường hợp của jQuery, đôi khi bởi vì ai đó quên rằng nó đã có trong một tệp chủ đã được rút gọn.

Answer 3

Tôi đồng ý với câu trả lời khác ở đây rằng đây là tốt nhưng sẽ thêm những nhận xét:

• Như SLaks đề cập, tôi nghĩ rằng đó là thích hợp hơn để sử dụng google CDN cho jquery. Jquery là khoảng 60k và tôi cảm thấy tự tin rằng hầu hết có bộ nhớ cache này trên trình duyệt của họ từ google. Nếu bạn sử dụng CDN này, một phần lớn người dùng của bạn sẽ không cần tải xuống điều này. Ngoài ra, nếu bạn không phục vụ từ bản thân CDN, bạn sẽ nhận được lợi ích bổ sung của CDN.

• Tôi giả định rằng bạn dự định tải JS đơn này, từ đầu. Đó thường là một ý tưởng tồi. Javascript trong đầu sẽ chặn tải nội dung. Bạn muốn giới hạn javascript trong phần Đầu đến số tiền tối thiểu cần thiết để các tập lệnh khác trong trang của bạn có thể phụ thuộc vào. Điều này thường bao gồm Jquery. Vì vậy, ngay cả khi nó có nghĩa là một yêu cầu thêm, tôi mạnh mẽ tin rằng nó là tốt hơn để có một kịch bản ở đầu với kịch bản có chứa phụ thuộc để dựng hình cơ thể của bạn và sau đó một kịch bản lớn thứ hai ở cuối có chứa tất cả mọi thứ khác. Hoặc thậm chí tốt hơn một kịch bản ở cuối tạo ra một thẻ kịch bản được tạo động ở đầu tải phần còn lại của JS của bạn một cách không đồng bộ.

Dưới đây là một ví dụ về điều đó cuối của kịch bản trang:

<script type="text/javascript"> 

    (function() { 

     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.async = true; 
     script.src = 'http://mysite/js/mybigminifiedandmergedscript.js'; 
     var s = document.getElementsByTagName('script')[0]; 
     s.parentNode.insertBefore(script, s); 
    })(); 

</script> 

• Nếu bạn có nhiều kịch bản mà nếu không được tải ở tất cả sẽ không can thiệp vào kinh nghiệm người dùng của trang web, Tôi sẽ đặt nó trong một kịch bản thứ ba được tải giống như kịch bản ở trên nhưng hoãn lại cho đến khi hoàn thành tài liệu. Bằng cách này, tập lệnh đó sẽ không ảnh hưởng đến hiệu suất "được nhận thức" của trang. Nó tải âm thầm mà không có biểu tượng trình duyệt quay hoặc thanh tiến trình.

• Nếu bạn đang sử dụng .net, tôi khuyến khích bạn sử dụng OSS RequestReduce để rút gọn và hợp nhất css và javascript cũng như sprites và tối ưu hóa hình ảnh khi đang di chuyển. Tất cả mà không cần phải thay đổi mã của bạn. Có sẵn trên Nuget và RequestReduce.com.

Answer 4

Như thường lệ - tùy thuộc vào ứng dụng. Trong khi tôi đồng ý với tất cả các điểm trên, một phương pháp tiếp cận kỹ thuật thời trang cũ sẽ khiến bạn phải bực bội khi tạo ra sự phụ thuộc của việc luôn được kết nối với internet để tối ưu hóa một chút.

Chúng tôi có một ứng dụng trình duyệt yêu cầu jquery, jquery ui, d3js, css liên quan của chúng và tất nhiên mã của chúng tôi hoạt động. Hơn nữa, khách hàng cần có khả năng chỉnh sửa html nguồn để tạo bố cục biến thể.

Vì vậy, chúng tôi đã chọn một dòng đơn giản "không chạm" trong đó tất cả phép thuật js và css đều nằm. Chúng tôi cũng đã chọn không tham gia phương pháp CDN để html có thể được chỉnh sửa ngoại tuyến

Do đó, chúng tôi có giải pháp mạnh mẽ hơn ở mức giá hiệu suất tối thiểu.

Bến