Cette action réduit le nombre de requêtes au serveur, accélérant ainsi le site. Cela est particulièrement vrai pour HTTP1.1 et les pages qui nécessitent plus de 20 requêtes. De plus, cela ajoute des points dans le test (ce qui est la chose la plus importante pour beaucoup).

Comment combiner des fichiers Javascript dans WordPress en un seul fichier - La méthode sans plugin

En général, il existe des plugins pour cette tâche, mais ce n'est que dans les commentaires de ces plugins qu'il y a beaucoup de critiques dans l'esprit de "ça ne marche pas".

Si vous le faites "entièrement manuellement", vous devrez alors prendre toutes les piles de code avec vos mains et les copier dans un seul fichier. Cette méthode est déconseillée car elle présente de nombreux inconvénients tels que :

1.) Il est difficile de trouver le nom du handle d'un fichier javascript, contrairement aux fichiers CSS où l'on peut trouver le nom du handle de l'attribut id. Ce descripteur est important car nous en avons besoin pour désinscrire les scripts une fois le processus de fusion terminé.

2.) Manque de souplesse. S'il y a une addition ou une soustraction d'un fichier javascript, nous devons recombiner ce fichier manuellement.

3.) Il n'y a aucune garantie que les morceaux de code combinés ne seront pas en conflit. Cela a à voir avec la séquence des appels de fonction et les étendues de variables javascript.

Comment combiner des fichiers Javascript dans WordPress en un seul fichier - automatiquement

Pour fusionner automatiquement des fichiers javascript dans WordPress, vous devez d'abord collecter les chemins d'accès aux fichiers javascript ainsi que leurs noms de descripteurs (similaire à la méthode manuelle, uniquement automatiquement).

Nous pouvons trouver toutes les informations sur les fichiers javascript téléchargés sur Page Wordpress dans l'objet WP_Scripts.

Cet objet est stocké dans une variable $wp_scripts et sont appelés dans les sections de modèle telles que wp_head, wp_print_scripts (wp_enqueue_scripts), wp_footer, init. Voici quelques-uns des cas les plus courants.

Une fois que. En tête (tag ), nous pouvons le déterminer en utilisant le crochet wp_head.

Dvas. Au sous-sol (avant le tag) nous pouvons le déterminer en utilisant le crochet wp_footer.

Ouvrez le fichier functions.php pour modification, situé dans le dossier du thème utilisé, et ajoutez-y le code :

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

// Apparaissent en haut, avant d'ouvrir le corps
fonction show_head_scripts() ()
global $wp_scripts ;
écho "

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

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

Maintenant, nous ouvrons la page, regardons sa source et voyons les listes de chemins vers les fichiers JS (en haut et en bas de la page).

Combiner des fichiers javascript en un seul fichier dans WordPress

Pour fusionner, vous devez collecter les chemins d'accès aux fichiers, qui peuvent être détectés automatiquement avant l'affichage du contenu. Le crochet wp_enqueue_scripts convient à cela. Il y a quelques inconvénients ici (décrits ci-dessous), mais c'est la seule astuce que nous pouvons utiliser automatiquement.

Comment c'est fait (description logique du code):

1.) Copie le descripteur de fichier javascript en fonction de sa dépendance afin qu'après la fusion, il puisse fonctionner sans erreur. Nous pouvons le faire en appelant la méthode all_deps sur l'objet WP_Scripts($wp_scripts->all_deps($wp_scripts->queue));

2.) Obtenir du code dans des fichiers javascript (en utilisant file_get_contents) et combiner avec le reste. Y compris le script de localisation wp_localize_script (le cas échéant). Ce script peut être trouvé dans $ wp_scripts-> enregistré ["handle"] -> extra ["data"]

3.) Écrire le code combiné dans un fichier (à l'aide de file_put_contents) et le charger à l'aide de la fonction wp_enqueue_scripts.

4.) Désenregistrer tous les scripts/handles qui ont été fusionnés, cela se fait après avoir terminé le processus décrit dans le dernier paragraphe (si nous désenregistrons un script, son script dépendant sera également désenregistré).

Pour que le moteur effectue toutes ces tâches, collez le code suivant dans votre fichier functions.php :

Code : add_action("wp_enqueue_scripts", "merge_all_scripts", 9999);
fonction merge_all_scripts()
{
global $wp_scripts ;

/*
#une. Réorganiser les poignées en fonction de sa dépendance,
Le résultat sera enregistré dans la propriété to_do ($wp_scripts->to_do)
*/
$wp_scripts->all_deps($wp_scripts->queue);

// Nouvel emplacement du fichier : E:xampp\htdocs\wordpresswp-content\theme\wdc\merged-script.js
$merged_file_location = get_stylesheet_directory() . DIRECTORY_SEPARATOR . "merged-script.js" ;

$merged_script = "" ;

// Boucle les fichiers javascript et enregistre dans la variable $merged_script
foreach($wp_scripts->to_do as $handle)
{
/*
Nettoyer l'URL, par exemple wp-content/themes/wdc/main.js?v=1.2.4
devenir wp-content/themes/wdc/main.js
*/
$src = strtok($wp_scripts->registered[$handle]->src, "?");

/**
#2. Combinez le fichier javascript.
*/
// Si src est l'url http / https
si (strpos($src, "http") !== faux)
{
// Récupère l'url de notre site, par exemple : http://webdevzoom.com/wordpress
$site_url = site_url();

/*
Si nous sommes sur un serveur local, changez l'URL en chemin relatif,
par exemple. http://webdevzoom.com/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
devient : /wp-content/plugins/wpnewsman/css/menuicon.css,
c'est pour réutiliser la requête HTTP

Sinon, par ex. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
puis laissez tel quel (nous allons le sauter)
*/
si (strpos($src, $site_url) !== false)
$js_file_path = str_replace($site_url, "", $src);
autre
$js_file_path = $src ;

/*
Pour pouvoir utiliser la fonction file_get_contents, nous devons supprimer la barre oblique,
par exemple. /wp-content/plugins/wpnewsman/css/menuicon.css
devenir wp-content/plugins/wpnewsman/css/menuicon.css
*/
$js_file_path = ltrim($js_file_path, "/");
}
autre
{
$js_file_path = ltrim($src, "/");
}

// Vérifier que le fichier ultérieur existe puis fusionner
si (file_exists($js_file_path))
{
// #3. Vérifiez wp_localize_script
$localiser = "" ;
if (@key_exists("data", $wp_scripts->registered[$handle]->extra)) (
$localize = $obj->extra["data"] . ";";
}
$merged_script .= $localize . file_get_contents($js_file_path) . ";";
}
}

// écrit le script fusionné dans le répertoire du thème courant
file_put_contents($merged_file_location , $merged_script);

// #quatre. Charger l'URL du fichier fusionné
wp_enqueue_script("merged-script", get_stylesheet_directory_uri() . "/merged-script.js");

// 5. Désenregistrer les poignées
foreach($wp_scripts->to_do as $handle)
{
wp_deregister_script($handle);
}
}

Vérifier que la fusion a réussi

Nous allons sur la page du blog, ouvrons la source et recherchons le fichier inclus merged-script.js

Assurez-vous ensuite qu'il n'y a pas d'erreurs dans le script fusionné en ouvrant les "outils de développement" de votre navigateur (appuyez sur F12 dans Google Chrome) et sélectionnez l'onglet Console.

La console affiche le texte de l'erreur et fait référence à l'emplacement où elle s'est produite. S'il n'y a pas de malédictions sur le fichier merged-script.js, alors tout va bien.

Vérifiez la fonctionnalité des autres scripts qui n'ont pas participé à la fusion.

Article original en anglais que votre chat a lu là-bas.

77

J'essaie d'optimiser les performances du site en consolidant et en compressant les fichiers CSS et JS. Ma question est plus liée aux étapes (concrètes) sur la façon d'y parvenir, compte tenu de la situation réelle à laquelle je suis confronté (bien que cela devrait également être commun aux autres développeurs).

Pour une version de produit, j'aimerais fusionner 3 fichiers CSS en un seul et le réduire en utilisant par exemple YUI Compressor. Mais alors je devrais mettre à jour toutes les pages qui ont besoin de ces 3 fichiers pour référencer le CSS nouvellement modifié. Il semble être sujet aux erreurs (par exemple, vous supprimez et ajoutez des lignes dans de nombreux fichiers). Une autre approche moins risquée ? Même problème pour les fichiers JS.

• 13 réponses

Tri:

Activité

12

Vous pouvez l'exécuter dans une tâche ant et donc l'inclure dans vos messages/hooks pré-commit si vous utilisez svn/git.

METTRE À JOUR: Actuellement, j'utilise grunt avec CONCAT, minimiser et mutiler les contributions. Vous pouvez l'utiliser avec un observateur pour qu'il crée de nouveaux minifichiers dans Contexte chaque fois que la source change. uglify contrib casse non seulement les journaux de la console, mais supprime également les fonctions et propriétés inutilisées.

19

Je devrai mettre à jour toutes les pages qui ont besoin de ces 3 fichiers pour référencer le CSS nouvellement enraciné.

Tout d'abord, je dirais que vous devriez avoir un titre général. Par conséquent, lorsque cela est nécessaire, il n'est pas nécessaire de modifier tous les en-têtes. Bonnes pratiques- avoir un titre ou 2-3. Puisque votre page est nécessaire, vous pouvez changer votre titre. Ainsi lorsque vous souhaiterez étendre votre application web, ce sera moins risqué et fastidieux.

Vous n'avez pas mentionné votre environnement de développement. Vous pouvez voir qu'il existe de nombreux outils de compression répertoriés pour différents environnements. Et tu utilises bon outil c'est-à-dire le compresseur YUI.

6

Je ne vous vois pas mentionner le système de gestion de contenu (Wordpress, Joomla, Drupal, etc.), mais si vous utilisez un CMS populaire, tous les plugins/modules sont disponibles (options gratuites) qui réduiront et mettront en cache vos css et js.

L'utilisation d'un plugin vous donne la possibilité de garder les versions non compressées modifiables, puis lorsque vous apportez des modifications, le plugin inclut automatiquement vos modifications et recompresse le fichier. Assurez-vous simplement de choisir un plugin qui vous permettra d'exclure des fichiers (par exemple, fichier personnalisé js) s'il casse quelque chose.

J'ai essayé dans le passé de garder ces fichiers à la main et cela se transforme toujours en cauchemar de maintenance. Bonne chance, j'espère que ça t'a aidé.

3

Si vous effectuez un prétraitement sur les fichiers que vous servez, vous souhaiterez probablement configurer un système de construction approprié (comme un Makefile). De cette façon, vous avez des fichiers source sans duplication et chaque fois que vous apportez des modifications, vous exécutez "make" et mettez à jour tous les fichiers générés automatiquement. Si le système de construction est déjà installé, découvrez comment il fonctionne et l'utilise. Si ce n'est pas le cas, vous devez l'ajouter.

Alors commencez par comprendre comment fusionner et minifier vos fichiers à partir de ligne de commande(dans la documentation de YUICompressor). Désignez un répertoire pour les éléments générés automatiquement, distinct des éléments sur lesquels vous travaillez mais disponible pour le serveur Web, et affichez-le, comme gen/scripts/combination.js. Mettez les commandes que vous avez utilisées dans le Makefile et répétez "make" à chaque fois que vous faites un changement et que vous voulez qu'il prenne effet. Ensuite, mettez à jour les en-têtes des autres fichiers pour qu'ils pointent vers les fichiers combo et mini.

5

Pour les personnes qui veulent quelque chose d'un peu plus léger et plus flexible, j'ai créé js.sh aujourd'hui pour résoudre ce problème. C'est un simple outil de ligne de commande ciblant les fichiers JS qui peut être facilement modifié pour prendre en charge les fichiers CSS. Avantages :

• facilement configurable pour une utilisation par plusieurs développeurs sur un projet
• Combine les fichiers JS dans l'ordre spécifié dans script_order.txt
• les compresse avec le compilateur de fermeture de Google
• Divise JS en< 25kb куски где возможно, так как iPhone не будет кэшировать что-либо большее, чем 25kb.
• Crée un petit Fichier PHP Avec