Al fusionar CSS o JS, se genera un nuevo archivo para cada tipo de página

15

Tenemos muchos archivos CSS y JS pequeños y permitir la fusión parece ser una buena opción.

Muchos de los archivos CSS y JS se utilizan en cada página (página de inicio, página de categoría, página de detalles del producto).

Cada vez que vemos que un archivo fusionado diferente se carga nuevamente en cada página, incluso el CSS contenido debe superponerse.

¿Cómo podemos evitar esto y reutilizar más datos?

css javascript frontend

— Alex
fuente

Alex, ¿estás incluyendo diferentes archivos css y js en diferentes páginas? ¿Tiene un enlace o alguna información que confirme que esta compilación / fusión adicional está ocurriendo? Vi algo al respecto el otro día y me gustaría saber más. Hemos tenido problemas para que nuestro JS se compile / fusione recientemente.

— Mark Weston el

No tienes un enlace público. Pero por ejemplo en las páginas de productos Tengo un poco adicional .cssy .jsarchivos. En una instalación predeterminada de Magento, los .cssarchivos son prácticamente iguales en todo el mundo, por lo que el archivo combinado tiene un hash idéntico. Pero .jsesto difiere mucho, por lo que hay un archivo recientemente combinado para las páginas de productos y para las páginas de categoría, etc., que siempre incluye la versión completa del prototipo.

— Alex

Estaba buscando la función "Fusionar archivos Javascript", para ayudar con la eliminación de caché. Esperemos que este comentario actualice el motor de búsqueda y evite dups.

— Ray Foss

14

Respuesta corta: nunca habilite la función de fusión JS / CSS de Magento. En general, es peor para el rendimiento a lo largo del ciclo de vida de una compra típica que enviar cada activo individualmente.

Respuesta larga: solo debe servir un archivo CSS a los usuarios. Varios archivos bloquean la representación hasta que se descargue todo el CSS. A menos que esté sirviendo una gran cantidad de CSS, es ventajoso enviarlo todo de una vez, entonces el navegador lo tiene en caché. El uso de un preprocesador como Sass o LESS puede llevar este paso a su proceso de compilación en lugar de dejar que Magento lo haga de manera ineficiente.

Para JS, idealmente no debería combinar estos del lado del servidor. Los cargadores de scripts del lado del cliente como AMD / RequireJS son mejores opciones y ayudan a administrar las dependencias, lo que no hace el XML de diseño de Magento. Sin embargo, en el mundo real, Magento cae en los scripts en varios puntos del flujo de pago. Todavía es mejor tomar la carga de la página inicial de múltiples solicitudes y tener activos separados pero en caché después.

La extensión Fooman Speedster Advanced es su mejor opción para combinar de manera inteligente los activos sin duplicación (hoy).

Usted está algo limitado por la arquitectura Magento 1.x que comienza con un montón de malas prácticas para el rendimiento de la interfaz. No es realista cambiar el curso de ese barco. Contribuir a Magento 2.

— Brendan Falkowski
fuente

1

"Contribuye a Magento 2."

— Benmarks

6

Hemos estado usando la extensión Fooman Speedster Magento . Es una extensión maravillosa que maneja la fusión de archivos CSS y JS para aumentar el rendimiento de su página.

De la página:

Acelere su tienda combinando, comprimiendo y almacenando en caché los archivos Javascript y CSS. Fooman Speedster combina múltiples archivos Javascript y CSS en un solo archivo Javascript y un solo archivo CSS, para permitir tiempos de carga de página más rápidos.

— Kenny
fuente

44

Gracias por la mención Me gustaría señalar mi otra extensión gratuita de Speedster (Speedster Advanced) que viene con un optimizador de tema para reducir las duplicaciones en los archivos Javascript combinados. Consulte mi presentación en la Ibiza Developer Conference 2012 aquí magento-developers-paradise.com / wp-content / uploads / ... para más detalles.

— Kristof en Fooman el

Hice muchas pruebas. No elimina todas las redundancias, pero elimina algunas. Y no es el mejor minificador, pero la eliminación de redundancia compensa lo que podría hacer por su cuenta con un script de shell. @KristofatFooman Si pudiera usar el sistema uglifyjs --compressy manejar mejor los comentarios, podría obtener una mejora adicional de aproximadamente un 4% más pequeño con mi código. Estoy usando uglifyjs v3 del nodo.

— Ray Foss