Quando si uniscono CSS o JS, viene generato un nuovo file per ciascun tipo di pagina

15

Abbiamo molti piccoli file CSS e JS e consentire l'unione sembra essere una buona scelta.

Molti dei file CSS e JS vengono utilizzati in ogni pagina (home page, pagina delle categorie, pagina dei dettagli del prodotto).

Ogni volta che abbiamo visto che un diverso file unito viene nuovamente caricato su ogni pagina, anche il CSS contenuto deve essere sovrapposto.

Come possiamo evitarlo e riutilizzare più dati?

css javascript frontend

— alex
fonte

Alex stai includendo diversi file CSS e JS su pagine diverse? Hai un link o qualche informazione che confermi che sta avvenendo questa ulteriore compilazione / fusione? L'altro giorno ne ho visto qualcosa e mi piacerebbe saperne di più. Abbiamo avuto problemi a far compilare / unire il nostro JS di recente.

— Mark Weston,

Non hai un link pubblico. Ma ad esempio sulle pagine dei prodotti ho alcuni file .csse .jsfile aggiuntivi . In un'installazione predefinita di Magento in realtà i .cssfile sono praticamente uguali a livello globale, quindi il file unito ha un hash identico. Ma per .jsquesto differisce molto - quindi c'è un file appena combinato per le pagine dei prodotti e per le pagine delle categorie e così via - includendo sempre la lib prototipo completa.

— Alex

Stavo cercando la funzione "Unisci file Javascript", per aiutare con il busting della cache. Spero che questo commento aggiorni il motore di ricerca e prevenga i duplicati.

— Ray Foss,

14

Risposta breve: non abilitare mai la funzione di fusione JS / CSS di Magento. Nel complesso è peggio per le prestazioni durante l'intero ciclo di vita di un checkout tipico rispetto all'invio di ogni risorsa singolarmente.

Risposta lunga: dovresti offrire agli utenti un solo file CSS. Più file bloccano il rendering fino a quando non viene scaricato tutto il CSS. A meno che tu non stia offrendo una grande quantità di CSS, è vantaggioso inviarlo tutto in una volta, quindi il browser lo ha memorizzato nella cache. L'uso di un pre-processore come Sass o LESS può portare questo passaggio nel tuo processo di generazione invece di lasciare che Magento lo faccia in modo inefficiente.

Per JS, idealmente non dovresti combinare questi lato server. Caricatori di script sul lato client come AMD / RequireJS sono scelte migliori e aiutano a gestire le dipendenze, cosa che non fa l'XML di layout di Magento. Nel mondo reale però Magento rilascia script in diversi punti del flusso di checkout. Stai ancora meglio prendendo l'hit di caricamento della pagina iniziale di più richieste e avendo successivamente risorse separate ma memorizzate nella cache.

L'estensione Fooman Speedster Advanced è la soluzione migliore per combinare in modo intelligente risorse senza duplicazione (oggi).

Sei in qualche modo limitato dall'architettura Magento 1.x che inizia con un mucchio di scarse pratiche per le prestazioni del frontend. Non è realistico cambiare il corso di quella nave. Contribuisci a Magento 2.

— Brendan Falkowski
fonte

1

"Contribuisci a Magento 2."

— benmarks

6

Abbiamo utilizzato l' estensione Magento di Fooman Speedster . È un'estensione meravigliosa che gestisce l'unione di file CSS e JS per aumentare le prestazioni della tua pagina.

Dalla pagina:

Accelera il tuo negozio combinando, comprimendo e memorizzando nella cache file Javascript e CSS. Fooman Speedster combina più file Javascript e CSS in un singolo file Javascript e singolo file CSS, per consentire tempi di caricamento della pagina più rapidi.

— Kenny
fonte

4

Grazie per la menzione. Vorrei sottolineare l'altra mia estensione gratuita di Speedster (Speedster Advanced) che viene fornita con un ottimizzatore di temi per ridurre i raddoppiamenti nei file Javascript uniti - Vedi la mia presentazione alla Ibiza Developer Conference 2012 qui magento-developers-paradise.com / wp-content / uploads / ... per i dettagli.

— Kristof a Fooman il

Ho fatto molti test. Non elimina tutti i licenziamenti, ma ne elimina alcuni. E non è il miglior minimizzatore, ma la rimozione della ridondanza compensa ciò che potresti fare da solo con uno script di shell. @KristofatFooman Se potessi utilizzare il sistema uglifyjs --compresse gestire meglio i commenti, potresti ottenere un ulteriore miglioramento di circa il 4% più piccolo con il mio codice. sto usando uglifyjs v3 dal nodo.

— Ray Foss,