Giá trị của CDN nằm ở khả năng người dùng đã truy cập vào một trang web khác gọi cùng một tệp từ CDN đó và ngày càng trở nên có giá trị tùy thuộc vào kích thước của tệp. Khả năng xảy ra trường hợp này tăng lên với sự phổ biến của tệp được yêu cầu và mức độ phổ biến của CDN.
Với suy nghĩ này, việc kéo một tệp tương đối lớn và phổ biến từ một CDN phổ biến hoàn toàn có ý nghĩa. jQuery và ở một mức độ thấp hơn, jQuery UI, phù hợp với dự luật này.
Trong khi đó, việc nối các tệp có ý nghĩa đối với các tệp nhỏ hơn không có khả năng thay đổi nhiều - các plugin thường được sử dụng của bạn sẽ phù hợp với hóa đơn này, nhưng mã dành riêng cho ứng dụng cốt lõi của bạn có thể không: nó có thể thay đổi từ tuần này sang tuần khác và nếu bạn ' đang nối nó với tất cả các tệp khác của bạn, bạn phải buộc người dùng tải xuống tất cả mọi thứ lại.
Bản soạn thảo HTML5 thực hiện khá tốt công việc cung cấp giải pháp chung cho việc này:
- Modernizr được tải từ cục bộ trong đầu: nó rất nhỏ và khác nhau khá nhiều tùy từng trường hợp, vì vậy sẽ không hợp lý khi lấy nguồn từ CDN và sẽ không làm người dùng bị ảnh hưởng quá nhiều khi tải nó từ người phục vụ. Nó được đặt trong đầu vì CSS có thể đang tận dụng nó, vì vậy bạn muốn các hiệu ứng của nó được biết đến trước khi nội dung hiển thị. Mọi thứ khác nằm ở phía dưới, để ngăn các tập lệnh nặng hơn của bạn chặn hiển thị trong khi chúng tải và thực thi.
- jQuery từ CDN, vì hầu hết mọi người đều sử dụng nó và nó khá nặng. Người dùng có thể đã có bộ nhớ cache này trước khi họ truy cập trang web của bạn, trong trường hợp đó, họ sẽ tải nó từ bộ nhớ cache ngay lập tức.
- Tất cả các đoạn mã phụ thuộc bên thứ 3 nhỏ hơn của bạn và các đoạn mã không có khả năng thay đổi nhiều sẽ được nối vào một
plugins.js
tệp được tải từ máy chủ của riêng bạn. Điều này sẽ được lưu vào bộ nhớ cache với tiêu đề hết hạn ở xa trong lần đầu tiên người dùng truy cập và tải từ bộ nhớ cache trong những lần truy cập tiếp theo.
- Mã cốt lõi của bạn đi vào
main.js, với tiêu đề hết hạn gần hơn để giải thích rằng logic ứng dụng của bạn có thể thay đổi từ tuần này sang tuần khác hoặc tháng này sang tháng khác. Bằng cách này khi bạn đã sửa lỗi hoặc giới thiệu chức năng mới khi người dùng truy cập vào hai tuần kể từ bây giờ, điều này có thể được tải mới trong khi tất cả nội dung ở trên có thể được đưa vào từ bộ nhớ cache.
Đối với các thư viện lớn khác của bạn, bạn nên xem xét chúng riêng lẻ và tự hỏi bản thân xem chúng có nên tuân theo hướng dẫn của jQuery, được tải riêng lẻ từ máy chủ của riêng bạn hay được nối với nhau. Một ví dụ về cách bạn có thể đi đến những quyết định đó:
- Angular cực kỳ phổ biến và rất lớn. Lấy nó từ CDN.
- Twitter Bootstrap có mức độ phổ biến tương tự, nhưng bạn đã có một lựa chọn tương đối mỏng về các thành phần của nó và nếu người dùng chưa có nó thì có thể không đáng để họ tải xuống toàn bộ. Phải nói rằng, cách nó phù hợp với phần còn lại của mã của bạn là khá nội tại và bạn không có khả năng thay đổi nó mà không xây dựng lại toàn bộ trang web - vì vậy bạn có thể muốn giữ nó được lưu trữ cục bộ nhưng giữ các tệp riêng biệt với chính
plugins.js. Bằng cách này, bạn luôn có thể cập nhật các plugins.jsphần mở rộng Bootstrap của mình mà không buộc người dùng tải xuống tất cả lõi Bootstrap.
Nhưng không có gì bắt buộc - số dặm của bạn có thể thay đổi.