2013-03-06 44 views
35

Ok, vì vậy tôi có một dự án kích thước hợp lý, nơi tôi đang sử dụng xương sống jquery và một vài thư viện javascript khác. Tôi đã tự hỏi nếu tôi nên có một tập tin cho các thư viện javascript của tôi và một cho mã tùy chỉnh của tôi. Hoặc một loạt các tệp javascript riêng biệt.Một tệp javascript lớn hoặc nhiều tệp nhỏ hơn?

+0

Kết hợp javascripts vào một tệp duy nhất: http://stackoverflow.com/q/2799419/785207 – Sparkup

Trả lời

67

Nói chung, bạn nên có ít yêu cầu HTTP hơn. Vì vậy, bạn nên giảm số lượng tệp nhiều nhất là hợp lý.

sở thích cá nhân của tôi là phải có ba "nhóm" các tập tin JavaScript:

  1. tập tin cốt lõi. Chứa các chức năng được sử dụng hầu như ở mọi nơi và các trang khởi tạo hữu ích khác.
  2. Tệp mô-đun. Chứa mã được sử dụng ở nhiều nơi, nhưng không phải ở mọi nơi. Có thể được giảm xuống để cung cấp chức năng bổ sung. Ví dụ: nếu bạn có tập lệnh để xử lý các mục nhập ngày, bạn có thể bao gồm tập lệnh đó dưới dạng tệp mô-đun và thêm tập lệnh vào các trang có dữ liệu nhập ngày.
  3. Tệp dành riêng cho trang. Những tệp này chứa mã chỉ được sử dụng ở một nơi. Lý do duy nhất chúng được thêm vào dưới dạng các tệp riêng biệt hơn là một phần của trang đó vì lý do bộ nhớ cache.
7

Tốt nhất là tách riêng ra, nhưng không quá hăng hái. Bằng cách đó, bạn có thể sử dụng lại mã thư viện của mình sau. Ngoài ra, mọi người đều thích làm việc với các tệp riêng biệt hơn vì nó giữ mọi thứ được tổ chức tốt hơn.

Điều đó nói rằng, cũng tốt nhất là cung cấp cho người dùng một tệp nén để mọi thứ có thể được lưu vào bộ nhớ một cách dễ dàng và điều này cũng làm giảm số lượng yêu cầu trang. Rails 3 thực hiện điều này tự động trong đường ống nội dung chẳng hạn. Bạn có thể viết một kịch bản để chạy máy nén yêu thích của bạn. Nhưng bạn không nên hy sinh khả năng đọc mã cho điều này - bạn có thể có bánh của bạn và ăn nó quá!

+1

Mọi người đang downvoting vì câu trả lời này không chính xác. Tất nhiên bạn nên chia js của bạn thành các thành phần hợp lý để giữ cho mọi thứ được tổ chức. Nhưng bạn nên kết hợp chúng trước khi gửi chúng cho người dùng, để giữ cho các yêu cầu http xuống. Chỉ chia chúng thành các thành phần bộ nhớ đệm hợp lý với "không bao giờ có khả năng thay đổi", "có khả năng thay đổi" và "thay đổi thường xuyên". –

+1

... đó là câu trả lời của tôi. Bạn chỉ muốn người dùng lưu một tệp lớn. – bchurchill

+0

Ah, bạn đã chỉnh sửa câu trả lời của mình kể từ khi tôi xem nó. (Và để ghi lại, tôi đã không downvote, chỉ cần cố gắng giải thích lý do tại sao các downvotes đến). –

13

Một tệp lớn. Bạn nên giảm bớt mã khi nó đi vào sản xuất và nén nó nếu nó lớn. Bạn muốn thực hiện càng ít yêu cầu đến máy chủ càng tốt để cải thiện hiệu suất trang

+1

Tôi không đồng ý. Bạn nên tách các tệp của bạn trong quá trình phát triển để bạn có thể * đọc * chúng, và sau đó có một kịch bản triển khai gói nó lên và nén nó. Không ai thích đọc mã được rút gọn, nhưng đó là những gì bạn cần cung cấp cho người dùng. – bchurchill

+18

@bchurchill - tôi đã nói trong câu trả lời của tôi "khi nó đi vào sản xuất" - Cách bạn duy trì mã của mình từ khi bắt đầu dự án cho đến khi bạn triển khai rất thoáng qua và không liên quan đến hiệu suất ứng dụng. khả năng đọc trong thời gian chạy có thể là tốt đẹp cho việc giảng dạy nhưng làm việc chống lại hiệu suất. –

+0

Tại sao bạn cần tất cả các tệp JS của bạn được nhúng vào một tệp lớn sẵn sàng khi tải trang ban đầu? Google xếp hạng trang tải ban đầu rất chậm và bạn nên trì hoãn các tệp JS và các hàm mà bạn không cần khi tải trang ban đầu (trang mục nhập). –

0

Theo đề xuất, tốt nhất là làm việc với các tệp nhỏ hơn, nhưng đối với mã sản xuất, quy trình xây dựng của bạn nên bao gồm tối ưu hóa. Một phần của tối ưu hóa đó nên giảm thiểu kích thước tệp và tối ưu hóa lưu lượng mạng, bằng cách kết hợp thành một tệp js duy nhất để giảm các cuộc gọi được thực hiện bởi trình duyệt.

0

Như một quy luật, tôi đi với càng ít càng tốt chỉ đơn giản là để giảm số lượng yêu cầu được thực hiện cho máy chủ.

0

Phụ thuộc vào kích thước ứng dụng của bạn. Nhưng thường tốt hơn là nhóm các tệp javascript của bạn một cách thích hợp để duy trì tốt hơn và khả năng sử dụng lại tốt hơn.

Bạn có thể sử dụng trình tải mô-đun JS như RequireJS để tải JavaScript của mình. Ít nhất các tệp sẽ được sắp xếp. Bạn có thể nâng cao hiệu năng máy chủ bằng cách đảm bảo các tệp này có thể được lưu trong bộ nhớ cache trên trình duyệt của người dùng để chúng chỉ tải xuống chúng một lần.

9

Một tệp lớn hoặc hai tệp: một tệp nhỏ và một tệp lớn. Để rõ ràng, trong quá trình phát triển, tốt nhất là có các tệp riêng biệt - có thể sử dụng một cái gì đó như requireJS. Nhưng khi bạn triển khai nó, nó sẽ nén mọi thứ trong một tệp, để giảm độ trễ và yêu cầu HTTP.

Tôi đã đề cập hai tệp.Trong một số trường hợp, có thể tốt khi có một tệp nhỏ, sẽ xử lý các hoạt động "bootstrap", trong khi đó "tệp lớn" - đặc biệt nếu đó là thực sự là lớn - được tải xuống. Điều này hữu ích đặc biệt cho lần truy cập đầu tiên, bởi vì người dùng chưa có tệp của bạn được lưu trong bộ nhớ cache.

+0

+1, câu trả lời hay, nhưng tôi cũng nói thêm rằng đôi khi bạn có thể ép thêm một chút hiệu suất bằng cách tạo hai hoặc ba "tệp lớn" để tách riêng các thành phần sẽ thay đổi rất thường xuyên (ví dụ như thư viện như jquery) và các thành phần sẽ thay đổi thường xuyên hơn (ứng dụng js). Vì vậy, nếu bạn thực hiện thay đổi ứng dụng, phần đầu tiên sẽ vẫn được lưu vào bộ nhớ cache. Tất nhiên, chi phí là một yêu cầu http nữa, vì vậy YMMV và điểm đó. Trong các ứng dụng của tôi, tôi thường làm điều đó: một tệp để khởi động ứng dụng và yêu cầu những người khác, một cho khung công tác js và một cho ứng dụng js. –

+0

Chắc chắn, nó thực sự phụ thuộc từng trường hợp. Tôi chỉ đưa ra một cái nhìn tổng quan chung. Ý tưởng là bạn không chỉ có hai lựa chọn - một tập tin lớn hoặc giữ tất cả các tập tin riêng biệt - nhưng một thứ ba quá - một tập tin "bootstrap", và sau đó phần còn lại. Bạn có thể điều chỉnh nó dựa trên nhu cầu. – ZER0

+0

Vâng, thực tế là bạn đã đề cập đến một tập tin bootstrap là lý do tại sao tôi nghĩ rằng đây là câu trả lời tốt nhất. –

Các vấn đề liên quan