Hầu hết mọi người đều phản đối khi tôi nói với họ rằng việc hợp nhất tất cả các tệp Javascript của bạn [ngay cả khi Google và Yahoo cũng nói với bạn] không phải là một ý kiến hay nhưng thành thật mà nói, đó thực sự không phải là một ý kiến hay nếu bạn muốn có một trang web Magento nhanh
Hợp nhất Javascript là xấu, bạn nói gì?
Vâng, tôi thực sự đã nói nó. Hợp nhất các tệp Javascript thành một tệp sẽ không làm cho trang web của bạn nhanh hơn [mặc dù các báo cáo tốc độ trực tuyến có thể cho bạn biết cách khác] và thực sự sẽ buộc khách hàng của bạn tải xuống cùng một nội dung JS nhiều lần
Giả sử trên trang chủ của bạn, bạn có file1. js và tệp2. js. Các tệp này được hợp nhất thành tệp1-2. js và khách hàng - hãy gọi anh ta là John - tải cái này xuống và trình duyệt của anh ta lưu trữ nó. Nếu anh ấy cố tải xuống lại tệp này, trình duyệt sẽ bỏ qua quá trình tải xuống và tải bản sao đã lưu trong bộ nhớ cache. Điều này thật tuyệt vì John chỉ phải tải xuống một tệp duy nhất, điều này chắc chắn sẽ nhanh hơn tải xuống hai tệp riêng lẻ
Sau khi truy cập trang chủ, John nhấp vào liên kết đưa anh đến trang sản phẩm. Trên trang sản phẩm này, bao gồm hai tệp giống nhau từ trang chủ [tệp1. js và tệp2. js] nhưng cũng có một phần ba [file3. js] và thứ tư [file4. js] được bao gồm để xử lý javascript của sản phẩm và chỉ được bao gồm trên trang sản phẩm. Trang web của bạn kết hợp bốn tệp này thành một tệp mới có tên là tệp1-2-3-4. js và John tải xuống tệp này. Bạn có thấy những gì đã xảy ra ở đó? . js và tệp2. js mà John đã tải xuống và lưu vào bộ nhớ cache trong trình duyệt của anh ấy. Kết quả là John lãng phí thời gian tải xuống nội dung mà anh ấy đã có
Đây là một ví dụ phổ biến đang xảy ra trên mọi trang web Magento sử dụng tính năng Hợp nhất Javascript của Magento. May mắn thay, nó khá dễ dàng để khắc phục vấn đề này
Hợp nhất Javascript nâng cao
Hợp nhất Javascript không tệ nhưng hợp nhất tất cả Javascript thành một tệp là xấu. Cách tốt hơn để hợp nhất các tệp JS của bạn là hợp nhất chúng dựa trên mức độ sử dụng của chúng. Tất cả các tệp JS được bao gồm trên mỗi trang phải được hợp nhất thành một tệp duy nhất. Sau đó, bạn có thể bắt đầu hợp nhất phần còn lại của tệp dựa trên vị trí chúng được đưa vào. Ví dụ: bạn có thể hợp nhất tất cả các tệp JS trên mọi trang sản phẩm thành một tệp JS duy nhất và bao gồm tệp đó. Hãy thử logic đó khi xem ví dụ của chúng tôi với John
Giống như lần trước John tải xuống tệp1-2. js [được tạo thành từ file1. js và tệp2. js] khi truy cập trang chủ của trang web của chúng tôi. Tệp này được lưu trong bộ nhớ cache và nếu anh ấy gặp lại tệp cụ thể này, trình duyệt của anh ấy sẽ bỏ qua quá trình tải xuống và sử dụng bản sao đã lưu trong bộ nhớ cache
Sau đó, John đi tới trang sản phẩm nơi anh ấy tìm thấy hai tệp Javascript. tập tin1-2. js và tệp3-4. js. Tệp đầu tiên [file1-2. js] đã được tải xuống và lưu vào bộ đệm để trình duyệt của anh ấy bỏ qua phần tải xuống này và tiết kiệm thời gian. Tệp thứ hai [file3-4. js] là một tệp mới mà John chưa từng thấy trước đây nên trình duyệt của anh ấy sẽ tải xuống và lưu vào bộ đệm tệp này
Sử dụng phương pháp này, mỗi mục Javascript chỉ được tải xuống một lần duy nhất và John không bao giờ lãng phí thời gian tải xuống nội dung đã có trên máy tính của mình
Triển khai hợp nhất Javascript nâng cao trong Magento
Có thể hợp nhất Javascript thông minh trong Magento và khá dễ dàng. Để làm điều đó, chúng tôi tạo khối mới loại 'page/html_head'. Vị trí này có thể ở bất kỳ vị trí nào trong bố cục của bạn [ngay cả ở chân trang nếu bạn muốn đặt JS ở cuối trang của mình] nhưng tôi sẽ thêm nó làm phần tử con của khối 'đầu' hiện có
Tiếp theo, chúng ta cần tạo trang/html/head/js-merge. mẫu phtml trong chủ đề tùy chỉnh của chúng tôi
Mẫu này chỉ cần chứa một dòng ở trên
Cuối cùng, chúng ta có thể bắt đầu thêm các tệp JS vào nó bằng phương thức bố cục XML thông thường
varien/product.js
JS sản phẩm Magento riêng biệt
Hãy xem một ví dụ thực tế. XML sau đây cho biết cách thiết lập điều này cho sản phẩm Magento bằng cài đặt Magento mặc định với các tệp Magento JS mặc định được tải. Nếu bạn đã tải các tệp JS tùy chỉnh trên trang sản phẩm của mình, bạn sẽ cần điều chỉnh cho phù hợp
Bạn nên lưu ý rằng vì các tệp JS tôi đang thêm vào khối tùy chỉnh đã được thêm vào khối Head mặc định, nên trước tiên chúng phải được xóa. Nếu chúng tôi không xóa chúng, các tệp sẽ được đưa vào hai lần
js
varien/product.js
js
varien/configurable.js
js
calendar/calendar.js
js
calendar/calendar-setup.js
varien/product.js
varien/configurable.js
js
calendar/calendar.js
js
calendar/calendar-setup.js
Sau này, bạn cần đảm bảo rằng bạn đã tạo trang/html/head/js-merge. phtml mẫu [có thể tìm thấy một dòng mã bạn cần cho tệp này ở trên]. Nếu bạn kích hoạt hợp nhất trong Magento, hai bộ tệp JS sẽ được hợp nhất riêng biệt và bạn sẽ chỉ yêu cầu khách hàng tải xuống từng phần os mã Javascript một lần
Là một lưu ý phụ, bạn có thể xóa lịch. js và thiết lập lịch. js hoàn toàn vì chúng hiếm khi được yêu cầu để cài đặt Magento