Questa azione riduce il numero di richieste al server, velocizzando così il sito. Ciò è particolarmente vero per HTTP1.1 e per le pagine che richiedono più di 20 richieste. Inoltre, aggiunge punti nel test (che è la cosa più importante per molti).

Come combinare i file Javascript in WordPress in un unico file: il metodo senza plug-in

In generale, ci sono plugin per questa attività, ma solo nei commenti a quei plugin ci sono molte recensioni nello spirito di "non funziona".

Se lo fai "completamente manualmente", dovrai prendere tutte le pile di codice con le mani e copiarle in un unico file. Questo metodo non è raccomandato in quanto presenta molti svantaggi come:

1.) È difficile trovare il nome dell'handle di un file javascript, questo è in contrasto con i file CSS dove possiamo trovare il nome dell'handle dell'attributo id. Questo handle è importante perché ne abbiamo bisogno per annullare la registrazione degli script dopo il completamento del processo di unione.

2.) Mancanza di flessibilità. Se c'è un'aggiunta o una sottrazione di un file javascript, dobbiamo ricombinare quel file manualmente.

3.) Non vi è alcuna garanzia che i pezzi di codice combinati non entrino in conflitto. Ciò ha a che fare con la sequenza delle chiamate di funzione e gli ambiti delle variabili javascript.

Come combinare i file Javascript in WordPress in un unico file - automaticamente

Per unire automaticamente i file javascript in WordPress, devi prima raccogliere i percorsi dei file javascript insieme ai loro nomi descrittori (simile al metodo manuale, solo automaticamente).

Possiamo trovare tutte le informazioni sui file javascript caricati su Pagina wordpress nell'oggetto WP_Script.

Questo oggetto è memorizzato in una variabile $wp_script e sono chiamati in sezioni di template come wp_head, wp_print_scripts (wp_enqueue_scripts), wp_footer, init. Ecco un paio dei casi più comuni.

Una volta. In testa (tag ) possiamo determinarlo usando l'hook wp_head.

Dvas. Nel seminterrato (prima del tag) possiamo determinarlo usando l'hook wp_footer.

Apri il file functions.php per la modifica, che si trova nella cartella del tema che viene utilizzato, e aggiungi il codice lì:

Codice: add_action("wp_head", "show_head_scripts", 9999);
add_action("wp_footer", "show_footer_scripts", 9999);

// Apparire in alto, prima di aprire il corpo
funzione show_head_scripts()(
globale $wp_scripts;
eco "

"; print_r($wp_scripts->fatto); echo "

"; print_r($wp_scripts->fatto); echo "

Ora apriamo la pagina, guardiamo la sua fonte e vediamo lì gli elenchi dei percorsi dei file JS (nella parte superiore e inferiore della pagina).

Combinazione di file javascript in un unico file in WordPress

Per unire, è necessario raccogliere i percorsi dei file, che possono essere rilevati automaticamente prima che il contenuto venga visualizzato. L'hook wp_enqueue_scripts è adatto a questo. Ci sono alcuni inconvenienti qui (descritti di seguito), ma questo è l'unico trucco che possiamo usare automaticamente.

Come è fatto (descrizione della logica del codice):

1.) Copia il descrittore del file javascript in base alla sua dipendenza in modo che dopo l'unione possa funzionare senza errori. Possiamo farlo chiamando il metodo all_deps sull'oggetto WP_Scripts($wp_scripts->all_deps($wp_scripts->queue));

2.) Ottenere il codice nei file javascript (utilizzando file_get_contents) e combinarlo con il resto. Compreso lo script di localizzazione wp_localize_script (se presente). Questo script può essere trovato in $ wp_scripts-> register ["handle"] -> extra ["data"]

3.) Scrivere il codice combinato in un file (usando file_put_contents) e caricarlo usando la funzione wp_enqueue_scripts.

4.) Annullare la registrazione di tutti gli script/handle che sono stati uniti, questo viene fatto dopo aver completato il processo descritto nell'ultimo paragrafo (se annulliamo la registrazione di uno script, anche lo script dipendente verrà annullato).

Affinché il motore possa eseguire tutte queste attività, incolla il seguente codice nel tuo file functions.php:

Codice: add_action("wp_enqueue_scripts", "merge_all_scripts", 9999);
funzione unisci_tutti_script()
{
globale $wp_scripts;

/*
#uno. Riordina le maniglie in base alla sua dipendenza,
Il risultato verrà salvato nella proprietà to_do ($wp_scripts->to_do)
*/
$wp_scripts->all_deps($wp_scripts->queue);

// Nuovo percorso file: E:xampp\htdocs\wordpresswp-content\theme\wdc\merged-script.js
$merged_file_location = get_stylesheet_directory() . DIRECTORY_SEPARATOR . "script-unito.js";

$merged_script = "";

// Ciclo dei file javascript e salvataggio nella variabile $merged_script
foreach($wp_scripts->to_do come $handle)
{
/*
Pulisci l'URL, ad esempio wp-content/themes/wdc/main.js?v=1.2.4
diventa wp-content/themes/wdc/main.js
*/
$src = strtok($wp_scripts->registered[$handle]->src, "?");

/**
#2. Combina file javascript.
*/
// Se src è l'url http / https
if (strpos($src, "http") !== falso)
{
// Ottieni l'URL del nostro sito, ad esempio: http://webdevzoom.com/wordpress
$site_url = site_url();

/*
Se siamo sul server locale, cambia l'URL in percorso relativo,
per esempio. http://webdevzoom.com/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
diventare: /wp-content/plugins/wpnewsman/css/menuicon.css,
questo è per riutilizzare la richiesta HTTP

In caso contrario, ad es. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
quindi lascia così com'è (lo salteremo)
*/
if (strpos($src, $site_url) !== falso)
$js_file_path = str_replace($site_url, "", $src);
altro
$js_file_path = $src;

/*
Per poter utilizzare la funzione file_get_contents dobbiamo rimuovere la barra,
per esempio. /wp-content/plugins/wpnewsman/css/menuicon.css
diventa wp-content/plugins/wpnewsman/css/menuicon.css
*/
$js_file_path = ltrim($js_file_path, "/");
}
altro
{
$js_file_path = ltrim($src, "/");
}

// Controlla che il file esista più tardi, quindi unisci
se (file_esiste($js_file_path))
{
// #3. Controlla wp_localize_script
$localizzare = "";
if (@key_exists("data", $wp_scripts->registered[$handle]->extra)) (
$localize = $obj->extra["dati"] . ";";
}
$merged_script .= $localizza . file_get_contents($js_file_path) . ";";
}
}

// scrive lo script unito nella directory del tema corrente
file_put_contents($merged_file_location , $merged_script);

// #quattro. Carica l'URL del file unito
wp_enqueue_script("merged-script", get_stylesheet_directory_uri() . "/merged-script.js");

// 5. Annulla la registrazione degli handle
foreach($wp_scripts->to_do come $handle)
{
wp_deregister_script($handle);
}
}

Verificare che l'unione abbia avuto successo

Andiamo alla pagina del blog, apriamo la fonte e cerchiamo il file incluso in essa merged-script.js

Quindi assicurati che non ci siano errori nello script unito aprendo gli "strumenti per sviluppatori" del tuo browser (premi F12 in Google Chrome) e seleziona la scheda Console.

La console mostra il testo dell'errore e fa riferimento alla posizione in cui si è verificato. Se non ci sono curses sul file merged-script.js, allora va tutto bene.

Verificare la funzionalità di altri script che non hanno partecipato all'unione.

Articolo originale in inglese che hai letto lì.

77

Sto cercando di ottimizzare le prestazioni del sito consolidando e comprimendo i file CSS e JS. La mia domanda è più correlata ai passaggi (concreti) su come raggiungere questo obiettivo, data la situazione attuale che sto affrontando (sebbene questo dovrebbe essere comune anche per altri sviluppatori).

Per una versione del prodotto, vorrei unire 3 file CSS in uno e minimizzarlo usando ad esempio YUI Compressor. Ma poi avrei bisogno di aggiornare tutte le pagine che necessitano di quei 3 file per fare riferimento al CSS appena modificato. Sembra essere soggetto a errori (ad esempio, elimini e aggiungi alcune righe in molti file). Qualche altro approccio meno rischioso? Stesso problema per i file JS.

• 13 risposte

Ordinamento:

Attività

12

Puoi eseguirlo in un'attività ant e quindi includerlo nei tuoi messaggi/ganci pre-commit se stai usando svn/git.

AGGIORNARE: Attualmente sto usando Grunt con contributi CONCAT, downplay e mutilate. Puoi usarlo con un osservatore in modo che crei nuovi minifile sfondo ogni volta che la fonte cambia. uglify contrib non solo interrompe i log della console, ma rimuove anche le funzioni e le proprietà inutilizzate.

19

Dovrò aggiornare tutte le pagine che necessitano di questi 3 file per fare riferimento al CSS appena rootato.

Innanzitutto, direi che dovresti avere un titolo generale. Pertanto, quando è necessario, non è necessario modificare tutte le intestazioni. Buona pratica- avere un'intestazione o 2-3. Poiché la tua pagina è necessaria, puoi cambiare il titolo. Quindi, quando vuoi estendere la tua applicazione web, sarà meno rischioso e noioso.

Non hai menzionato il tuo ambiente di sviluppo. Puoi vedere che ci sono molti strumenti di compressione elencati per diversi ambienti. E tu usi buon strumento cioè compressore YUI.

6

Non ti vedo menzionare il sistema di gestione dei contenuti (Wordpress, Joomla, Drupal, ecc.) Ma se stai utilizzando un CMS popolare hanno tutti i plugin/moduli disponibili (opzioni gratuite) che minimizzeranno e memorizzeranno nella cache i tuoi css e js.

L'utilizzo di un plug-in ti dà la possibilità di mantenere modificabili le versioni non compresse e quindi, quando apporti modifiche, il plug-in include automaticamente le modifiche e ricomprime il file. Assicurati solo di scegliere un plug-in che ti consenta di escludere i file (ad esempio, file personalizzato js) se rompe qualcosa.

Ho provato in passato a conservare questi file a mano e si trasforma sempre in un incubo di manutenzione. Buona fortuna, spero che questo abbia aiutato.

3

Se stai eseguendo la pre-elaborazione sui file che stai servendo, probabilmente vorrai impostare un sistema di compilazione adeguato (come un Makefile). In questo modo hai file sorgente senza duplicazioni e ogni volta che apporti modifiche esegui "make" e aggiorni tutti i file generati automaticamente. Se il sistema di compilazione è già installato, scopri come funziona e come lo utilizza. In caso contrario, è necessario aggiungerlo.

Quindi, prima scopri come unire e minimizzare i tuoi file da riga di comando(nella documentazione di YUICompressor). Designa una directory per le cose generate automaticamente, separata dalle cose su cui stai lavorando ma disponibile per il server web, e genera l'output lì, come gen/scripts/combination.js. Metti i comandi che hai usato nel Makefile e ripeti "make" ogni volta che hai apportato una modifica e vuoi che abbia effetto. Quindi aggiorna le intestazioni negli altri file in modo che puntino ai file combo e mini.

5

Per le persone che desiderano qualcosa di un po' più leggero e flessibile, ho creato js.sh oggi per risolvere questo problema. È un semplice strumento da riga di comando destinato ai file JS che può essere facilmente modificato per occuparsi dei file CSS. Vantaggi:

• facilmente configurabile per l'utilizzo da parte di più sviluppatori su un progetto
• Combina i file JS nell'ordine specificato in script_order.txt
• li comprime con il Closure Compiler di Google
• Divide JS in< 25kb куски где возможно, так как iPhone не будет кэшировать что-либо большее, чем 25kb.
• Crea un piccolo File PHP Insieme a