Lors de la fusion de CSS ou JS, un nouveau fichier est généré pour chaque type de page

15

Nous avons beaucoup de petits fichiers CSS et JS et l'activation de la fusion semble être un bon choix.

De nombreux fichiers CSS et JS sont utilisés sur chaque page (page d'accueil, page de catégorie, page de détail du produit).

Chaque fois que nous avons vu qu'un fichier fusionné différent est à nouveau chargé sur chaque page, même le CSS contenu doit se chevaucher.

Comment éviter cela et réutiliser plus de données?

css javascript frontend

— Alex
source

Alex, incluez-vous différents fichiers css et js sur différentes pages? Avez-vous un lien ou des informations confirmant que cette compilation / fusion supplémentaire se produit? J'ai vu quelque chose à ce sujet l'autre jour et j'aimerais en savoir plus. Nous avons récemment rencontré des problèmes pour compiler / fusionner notre JS.

— Mark Weston

N'ont pas de lien public. Mais par exemple sur les pages de ce produit , j'ai un peu supplémentaire .csset les .jsfichiers. Dans une installation par défaut de Magento, les .cssfichiers sont globalement les mêmes, donc le fichier fusionné a un hachage identique. Mais .jscela diffère beaucoup - il y a donc un fichier nouvellement combiné pour les pages de produits et pour les pages de catégorie et ainsi de suite - comprenant toujours la bibliothèque complète du prototype.

— Alex

Je cherchais la fonctionnalité "Fusionner les fichiers Javascript" pour aider à la suppression du cache. Espérons que ce commentaire met à jour le moteur de recherche et empêche les doublons.

— Ray Foss

14

Réponse courte: n'activez jamais la fonction de fusion JS / CSS de Magento. Dans l'ensemble, les performances sont moins bonnes tout au long du cycle de vie d'un paiement classique que l'envoi de chaque élément individuellement.

Réponse longue: vous ne devez servir qu'un seul fichier CSS aux utilisateurs. Plusieurs fichiers bloquent le rendu jusqu'à ce que tous les CSS soient téléchargés. À moins que vous ne serviez une énorme quantité de CSS, il est avantageux de tout envoyer en même temps, le navigateur le met en cache. L'utilisation d'un pré-processeur comme Sass ou LESS peut intégrer cette étape dans votre processus de construction au lieu de laisser Magento le faire de manière inefficace.

Pour JS, idéalement, vous ne devriez pas combiner ces éléments côté serveur. Les chargeurs de script côté client comme AMD / RequireJS sont de meilleurs choix et aident à gérer les dépendances, ce que le Layout XML de Magento ne fait pas. Dans le monde réel, bien que Magento tombe dans les scripts à plusieurs moments du flux de paiement. Vous feriez mieux de prendre le hit de chargement de page initial de plusieurs demandes et d'avoir des actifs séparés mais mis en cache par la suite.

L'extension Fooman Speedster Advanced est votre meilleur pari pour combiner intelligemment les actifs sans duplication (aujourd'hui).

Vous êtes quelque peu limité par l'architecture Magento 1.x qui commence par un tas de mauvaises pratiques pour les performances frontales. Il n'est pas réaliste de changer le cap de ce navire. Contribuez à Magento 2.

— Brendan Falkowski
source

1

"Contribuez à Magento 2."

— benmarks

6

Nous utilisons l' extension Fooman Speedster Magento . C'est une merveilleuse extension qui gère la fusion des fichiers CSS et JS pour augmenter les performances de votre page.

Depuis la page:

Accélérez votre boutique en combinant, compressant et mettant en cache des fichiers Javascript et CSS. Fooman Speedster combine plusieurs fichiers Javascript et CSS en un seul fichier Javascript et un seul fichier CSS, pour accélérer les temps de chargement des pages.

— Kenny
source

4

Merci pour la mention. Je voudrais souligner mon autre extension gratuite Speedster (Speedster Advanced) qui est livrée avec un optimiseur de thème pour réduire les doublons dans les fichiers Javascript fusionnés - Veuillez consulter ma présentation à la Ibiza Developer Conference 2012 ici magento-developers-paradise.com / wp-content / uploads /… pour plus de détails.

— Kristof au Fooman le

J'ai fait beaucoup de tests. Il ne supprime pas toutes les redondances, mais il en supprime certaines. Et ce n'est pas le meilleur minificateur, mais la suppression de la redondance compense ce que vous pourriez faire vous-même avec un script shell. @KristofatFooman Si vous pouviez utiliser le système uglifyjs --compresset mieux gérer les commentaires, vous pourriez obtenir une amélioration supplémentaire d'environ 4% plus petite avec mon code. im en utilisant uglifyjs v3 à partir du nœud.

— Ray Foss