Inclure des fichiers dans un document via une syntaxe serveur

Inclure des fichiers dans un document via une syntaxe serveur

Html5, CSS3, Javascript Tutoriels

Dans la course à l’optimisation des performances d’affichage des pages Web, on essaie en général de réduire au maximum le nombre de requêtes Http.

Une des méthodes les plus utilisées consiste à « compiler » toutes vos ressources d’un même type dans un seul et unique fichier.
Pour y arriver, on fait souvant appel à des scripts qui vous concatène vos fichiers mais savez-vous qu’il est possible de le faire nativement via une simple directive serveur ?

Le méchanisme

L’inclusion « serveur » des fichiers se fait en utilisant la syntaxe suivante au sein de vos documents :

<!--#include file="monfichier.js" -->

Pour rendre accessible cette fonctionnalité, vous devez utiliser le module include d’Apache. Si cela n’est pas déjà le cas, utilisez la commande suivante pour l’activer :

a2enmod include

Ensuite, votre fichier .htaccess doit accueillir ces quelques lignes :

<FilesMatch "\.global\.js$">
   Options +Includes
   SetOutputFilter INCLUDES
</FilesMatch>

Ces lignes ont pour objectif de rendre possible l’inclusion de fichiers dans un type de fichier en particulier. Dans notre exemple, les inclusions seront possibles à partir des fichiers dont les nom se finissent par .global.js.

Enfin, il ne vous reste plus qu’à inclure vos fichiers dans ceux définis par l’extension ci-dessus.

Exemple

Imaginez que vous souhaitez inclure vos plugins jQuery dans un seul et unique fichier. Il suffit de créer le fichier plugins.global.js et d’y inclure les fichiers que vous souhaitez ajouter :

<!--#include file="jquery.caroussel.js" -->
<!--#include file="jquery.parallaxe.js" -->
<!--#include file="jquery.preload.js" -->

Il ne vous reste plus qu’à inclure le fichier dans votre page Html et le tour est joué :

<script src="js/plugins.global.js"></script>

A propos de l'auteur

Commentaires

  • GeekPress le 23/04/2013 à 16:46

    Pas mal du tout ! C'est une alternative intéréssante qu'on a la main sur le code, au lieu de passer par PHP et tout le tralala.

  • Julio Potier de Sécurité WordPress le 23/04/2013 à 21:29

    Bonsoir

    L'idée est louable mais en tant que Consultant en Sécurité je ne peux que m'opposer à l'activation et à l'utilisation de cette façon d'inclure. Pourquoi n'est ce pas activé par défaut ? A votre avis ? Car l'inclusion de fichier est alors trop simple et encore plus difficile à détecter.
    Aussi cela ouvre la faille SSI : http://secu.boiteaweb.fr/mylab/glossaire/?mot=SSI A la lecture ça devrai vous donner envie de ne pas activer ça.
    Désolé de casser l'ambiance :p
    - Signé Mr Parano ;)

  • Sébastien Decamme le 24/04/2013 à 8:36

    Il est vrai que ce n'est pas forcément une bonne pratique.
    C'est d'ailleurs pour cela qu'en géneral, on limite cet usage aux fichiers JS et CSS (comme le fait Boilerplate). Mais même avec les JS, je trouve ça limite.
    Ceci dit, pour les CSS, je pense qu'il ne devrait pas y avoir trop de problème mais je me trompe peut-être.

  • Julio Potier le 24/04/2013 à 15:14

    Il n'y en a pas mais si la porte est ouverte pour les CSS mais que js/exec peuvent être lancés ... là évitons simplement.

* KeywordLuv ! Entrez VotreNom@VosMotsClés dans le champ "Nom" pour bénéficier d'un mot-clef ciblé.