Khi hợp nhất CSS hoặc JS, một tệp mới được tạo cho từng loại trang

15

Chúng tôi có rất nhiều tệp CSS và JS nhỏ và cho phép hợp nhất dường như là một lựa chọn tốt.

Nhiều tệp CSS và JS được sử dụng trên mỗi trang (trang chủ, trang danh mục, trang chi tiết sản phẩm).

Bất cứ khi nào chúng tôi thấy rằng một tệp hợp nhất khác nhau được tải lại trên mỗi trang, ngay cả CSS được chứa cũng phải được chồng lấp.

Làm thế nào chúng ta có thể tránh điều này và tái sử dụng nhiều dữ liệu hơn?

css javascript frontend

— Alex
nguồn

Alex bạn có bao gồm các tệp css và js khác nhau trên các trang khác nhau không? Bạn có một liên kết hoặc bất kỳ thông tin nào xác nhận rằng việc hợp nhất / sáp nhập này đang diễn ra không? Tôi đã thấy một số điều về nó vào một ngày khác và tôi muốn biết thêm. Gần đây chúng tôi đã gặp sự cố khi biên dịch / biên dịch mã hóa của chúng tôi.

— Mark Weston

Không có một liên kết công khai. Nhưng ví dụ trên các trang sản phẩm tôi có một số tệp .cssvà bổ sung .js. Trong cài đặt mặc định của Magento, các .csstệp thực sự giống nhau trên toàn cầu, vì vậy tệp được hợp nhất có hàm băm giống hệt nhau. Nhưng đối với .jsđiều này khác nhau rất nhiều - vì vậy có một tệp mới được kết hợp cho các trang sản phẩm và cho các trang danh mục, v.v. - luôn bao gồm toàn bộ nguyên mẫu lib.

— Alex

Tôi đã tìm kiếm tính năng "Hợp nhất các tệp Javascript", để giúp xóa bộ nhớ cache. Hy vọng bình luận này cập nhật công cụ tìm kiếm và ngăn chặn dups.

— Ray Foss

14

Câu trả lời ngắn: không bao giờ kích hoạt chức năng hợp nhất JS / CSS của Magento. Nhìn chung, hiệu suất trong suốt vòng đời của thanh toán thông thường sẽ tệ hơn so với việc gửi từng tài sản riêng lẻ.

Câu trả lời dài: Bạn chỉ nên phục vụ một tệp CSS cho người dùng. Kết xuất nhiều khối tệp cho đến khi tất cả CSS được tải xuống. Trừ khi bạn đang phục vụ một lượng lớn CSS, thì việc gửi tất cả cùng một lúc là thuận lợi, sau đó trình duyệt đã lưu vào bộ đệm. Sử dụng bộ xử lý trước như Sass hoặc LESS có thể đưa bước này vào quy trình xây dựng của bạn thay vì để Magento làm việc đó không hiệu quả.

Đối với JS, lý tưởng nhất là bạn không nên kết hợp các phía máy chủ này. Các trình tải tập lệnh phía máy khách như AMD / RequireJS là những lựa chọn tốt hơn và giúp quản lý các phụ thuộc, điều mà Bố cục XML của Magento không có. Trong thế giới thực, mặc dù Magento giảm các tập lệnh tại một số điểm trong luồng thanh toán. Bạn vẫn nên thực hiện lần truy cập tải trang ban đầu của nhiều yêu cầu và có các tài sản riêng biệt nhưng được lưu trong bộ nhớ cache sau đó.

Tiện ích mở rộng Fooman Speedster Advanced là lựa chọn tốt nhất của bạn để kết hợp thông minh các tài sản mà không bị trùng lặp (ngày nay).

Bạn bị giới hạn bởi kiến trúc Magento 1.x bắt đầu với hàng đống thực tiễn kém cho hiệu suất frontend. Nó không thực tế để thay đổi quá trình của con tàu đó. Đóng góp cho Magento 2.

— Brendan Falkowski
nguồn

1

"Đóng góp cho Magento 2."

— đánh dấu

6

Chúng tôi đã sử dụng tiện ích mở rộng Fooman Speedster Magento . Đây là một tiện ích mở rộng tuyệt vời xử lý việc hợp nhất tệp CSS và tệp JS để tăng hiệu suất của trang của bạn.

Từ trang:

Tăng tốc cửa hàng của bạn bằng cách kết hợp, nén và lưu trữ các tệp Javascript và CSS. Fooman Speedster kết hợp nhiều tệp Javascript và CSS thành một tệp Javascript và tệp CSS đơn, để cho phép thời gian tải trang nhanh hơn.

— Kenny
nguồn

4

Cảm ơn đã đề cập. Tôi muốn chỉ ra tiện ích mở rộng Speedster miễn phí khác của tôi (Speedster Advanced) đi kèm với trình tối ưu hóa chủ đề để giảm số lần tăng gấp đôi trong các tệp Javascript đã hợp nhất - Vui lòng xem bài trình bày của tôi tại Hội nghị nhà phát triển Ibiza 2012 tại đây magento-developers-paradise.com / wp-content / tải lên / Nhận để biết chi tiết.

— Kristof tại Fooman

Tôi đã làm rất nhiều thử nghiệm. Nó không được loại bỏ tất cả các dư thừa, nhưng nó sẽ loại bỏ một số. Và nó không phải là công cụ khai thác tốt nhất, nhưng việc loại bỏ dư thừa bù đắp cho những gì bạn có thể tự làm với một tập lệnh shell. @KristofatFooman Nếu bạn có thể sử dụng hệ thống uglifyjs --compressvà xử lý các bình luận tốt hơn, bạn có thể nhận được một cải tiến bổ sung nhỏ hơn khoảng 4% với mã của tôi. tôi đang sử dụng uglifyjs v3 từ nút.

— Ray Foss