Saat menggabungkan CSS atau JS, file baru dihasilkan untuk setiap jenis halaman

15

Kami memiliki banyak file CSS dan JS kecil dan mengaktifkan penggabungan tampaknya menjadi pilihan yang baik.

Banyak file CSS dan JS digunakan pada setiap halaman (halaman rumah, halaman kategori, halaman detail produk).

Setiap kali kami melihat bahwa file gabungan berbeda dimuat lagi pada setiap halaman, bahkan CSS yang terkandung harus tumpang tindih.

Bagaimana kita bisa menghindari ini dan menggunakan kembali lebih banyak data?

css javascript frontend

— Alex
sumber

Alex apakah Anda termasuk file css dan js berbeda pada halaman yang berbeda? Apakah Anda memiliki tautan atau info apa pun yang mengonfirmasi bahwa kompilasi / penggabungan ekstra ini terjadi? Saya melihat beberapa hal tentang itu hari yang lalu dan saya ingin tahu lebih banyak. Kami mengalami masalah saat membuat JS kami untuk dikompilasi / digabungkan baru-baru ini.

— Mark Weston

Tidak memiliki tautan publik. Tapi misalnya pada halaman produk saya punya beberapa file .cssdan tambahan .js. Dalam instalasi default Magento sebenarnya .cssfile-file tersebut secara global hampir sama, sehingga file yang digabungkan memiliki hash yang identik. Tetapi untuk .jsini sangat berbeda - jadi ada file yang baru digabungkan untuk halaman produk dan untuk halaman kategori dan seterusnya - selalu termasuk lib prototipe lengkap.

— Alex

Saya sedang mencari fitur "Gabung File Javascript", untuk membantu dengan penghilang cache. Semoga komentar ini memperbarui mesin pencari dan mencegah dups.

— Ray Foss

14

Jawaban singkat: tidak pernah mengaktifkan fungsi penggabungan JS / CSS Magento. Secara keseluruhan, ini lebih buruk untuk kinerja sepanjang siklus checkout yang khas daripada mengirim setiap aset secara individual.

Jawaban panjang: Anda seharusnya hanya melayani satu file CSS untuk pengguna. Banyak file memblokir rendering hingga semua CSS diunduh. Jika Anda tidak menyediakan CSS dalam jumlah besar, maka mengirimnya sekaligus menguntungkan, maka peramban menyimpannya dalam cache. Menggunakan pra-prosesor seperti Sass atau LESS dapat membawa langkah ini ke dalam proses build Anda alih-alih membiarkan Magento melakukannya dengan tidak efisien.

Untuk JS, idealnya Anda tidak harus menggabungkan sisi server ini. Loader skrip sisi klien seperti AMD / RequireJS adalah pilihan yang lebih baik dan membantu mengelola dependensi, yang tidak dimiliki oleh Layout XML Magento. Di dunia nyata meskipun Magento menjatuhkan skrip di beberapa titik dalam aliran checkout. Anda masih lebih baik mengambil hit pemuatan halaman awal dari beberapa permintaan dan memiliki aset yang terpisah tetapi di-cache setelahnya.

Ekstensi Fooman Speedster Advanced adalah taruhan terbaik Anda untuk menggabungkan aset secara cerdas tanpa duplikasi (hari ini).

Anda agak dibatasi oleh arsitektur Magento 1.x yang dimulai dengan tumpukan praktik buruk untuk kinerja frontend. Tidak realistis untuk mengubah arah kapal itu. Berkontribusi pada Magento 2.

— Brendan Falkowski
sumber

1

"Berkontribusi pada Magento 2."

— patokan

6

Kami telah menggunakan Ekstensi Magento Fooman Speedster . Ini adalah ekstensi luar biasa yang menangani penggabungan file CSS dan JS untuk meningkatkan kinerja halaman Anda.

Dari halaman:

Percepat toko Anda dengan menggabungkan, mengompresi, dan menyimpan file Javascript dan CSS. Fooman Speedster menggabungkan beberapa file Javascript dan CSS ke dalam satu file Javascript dan file CSS tunggal, untuk memungkinkan waktu pemuatan halaman yang lebih cepat.

— Kenny
sumber

4

Terima kasih untuk menyebutkannya. Saya ingin menunjukkan ekstensi Speedster gratis saya yang lain (Speedster Advanced) yang dilengkapi dengan pengoptimal tema untuk mengurangi dua kali lipat dalam file Javascript yang digabung - Silakan lihat presentasi saya di Ibiza Developer Conference 2012 di sini magento-developers-paradise.com / wp-content / uploads / ... untuk detailnya.

— Kristof di Fooman

Saya melakukan banyak pengujian. Itu tidak menghilangkan semua redudansi, tetapi itu menghilangkan beberapa. Dan itu bukan minifier terbaik, tetapi penghapusan redundansi mengkompensasi apa yang bisa Anda lakukan sendiri dengan skrip shell. @KristofatFooman Jika Anda dapat menggunakan sistem uglifyjs --compressdan menangani komentar dengan lebih baik, Anda bisa mendapatkan peningkatan tambahan sekitar 4% lebih kecil dengan kode saya. Saya menggunakan uglifyjs v3 dari node.

— Ray Foss