cách kết hợp khung công cụ webapp widget với các tệp CSS và JS thân thiện với SEO

Question

Tôi đang viết một ứng dụng web bằng cách sử dụng khung công tác Zend và hệ thống tiện ích con homebrew. Mỗi widget đều có một controller và có thể chọn render một trong nhiều view nếu nó chọn. Điều này thực sự giúp chúng tôi mô đun hóa và cấu hình lại và sử dụng lại các tiện ích ở bất kỳ đâu trên trang web.

Vấn đề là chế độ xem của mỗi tiện ích con chứa mã JS và CSS riêng, dẫn đến mã HTML rất lộn xộn khi toàn bộ trang được đặt cùng nhau. Bạn nhận được các phong cách và thẻ tập lệnh ở mọi nơi. Điều này là xấu vì rất nhiều lý do khác nhau như tôi chắc chắn bạn biết, nhưng nó có một ảnh hưởng sâu sắc trên SEO của chúng tôi là tốt.

Một số giải pháp mà tôi đã có thể đưa ra:

1. riêng CSS và JS của mọi quan điểm của mỗi widget vào tập tin riêng của mình - điều này có nhược điểm nghiêm trọng đối với thời gian tải (nhiều tài nguyên hơn phải được tải một cách riêng biệt) và nó làm cho việc viết mã rất khó khăn vì bây giờ bạn phải có 3-4 tệp mở để chỉnh sửa một widget.

2. kết hợp tất cả tiện ích CSS thành một tệp duy nhất (giống với JS) - cũng sẽ dẫn đến tải trọng lớn khi ai đó vào trang web, trộn CSS và JS cho tất cả các tiện ích để khó theo dõi của họ, và các vấn đề khác mà tôi chắc chắn bạn có thể nghĩ đến.

3. Tạo hệ thống sử dụng phương pháp 1 (CSS riêng biệt và JS cho mọi tiện ích), khi phân phối trang, hãy ghép tất cả CSS và JS lại với nhau. Điều này rõ ràng cần thêm thời gian xử lý và tất nhiên việc tạo ra một hệ thống như vậy, vv

Câu hỏi của tôi là những gì các bạn nghĩ về các giải pháp này hoặc nếu có tồn tại trước đó giải pháp mà bạn biết (hoặc bất kỳ công nghệ nào có thể giúp) giải quyết vấn đề này. Tôi thực sự đánh giá cao tất cả suy nghĩ và ý kiến ​​của bạn !!

Thanks guys,

Ali

Answer 1

Tôi chắc chắn sẽ đi cho phương pháp thứ ba. Bạn nhận được sự linh hoạt của sự tách rời được mô tả trong phương pháp đầu tiên, nhưng bạn có được khả năng để finetune hiệu suất của ứng dụng của bạn (như được chỉ ra bởi Pointy ..).

Tất cả những gì bạn cần là một số hệ thống đăng ký trung tâm (một lớp) mà bạn sử dụng để theo dõi những bảng định kiểu nào cần được tải.

Styles::add_sheet('widget_1.css'); 

Ngoài ra, bạn có thể thêm trình kích hoạt (phương thức) vào lớp này để mã xử lý bộ nhớ đệm có thể theo dõi nếu bản định kiểu được ghép nối cần phải xây dựng lại.

if (Styles::cache_needs_update()) { 
    // rebuild (concatenate) stylesheet and save in cache 
} 

Để đi xa hơn nữa, người ta cũng có thể nối stylesheets bởi module hoặc một số loại khác của nhóm criterium. Khi có rất nhiều bảng định kiểu (hoặc các tệp js), các nhóm biểu định kiểu được nối này sau đó có thể được lưu trữ riêng biệt.

Các mẫu mã trên sẽ trở thành một cái gì đó như

Styles::add_sheet('widget_1.css','group_name'); 

if (Styles::cache_needs_update('group_name')) { 
    // rebuild (concatenate) stylesheet for this 'group_name' and save in cache 
} 

Answer 2

Với phương pháp 2, bạn sẽ có thể tận dụng lợi thế của bộ nhớ đệm của trình duyệt. Nếu thích hợp, nếu trang web có trang nhập "cửa trước" có nav, v.v. và không cần thư viện tiện ích, bạn có thể tải trước CSS và JS cho các trang khác sau khi tải trang đích tải xuống.

Nếu bạn chạy JS của bạn thông qua một cái gì đó như YUICompressor và sau đó đảm bảo máy chủ gzips JS và CSS tập tin, bạn đang thực sự không nói về nhiều thứ trừ khi bạn đang mã thực sự nhao. Nếu bạn tận dụng một thư viện được lưu trữ tại một trang web đáng tin cậy như kho lưu trữ API của Google, thì bạn có thể giữ mã của riêng mình nhỏ hơn. (Tôi không biết gì về Zend, vì vậy có thể có hoặc không liên quan.)

Answer 3

Không chắc liệu điều này có thể thực hiện được bằng PHP hay không, nhưng nếu bạn có thể hoãn chuyển trang cho đến khi trang được xử lý;

• có mỗi widget đăng ký đưa nó vào trang bằng cách sử dụng một số phương pháp tĩnh
• nơi một cái móc trong rendering pipeline mà đọc và concatenates tất cả các nguồn lực cần thiết cho các widget bao gồm
• thay đổi để đáp ứng bao gồm tài nguyên
• gửi câu trả lời cho khách hàng