Combinez et réduisez plusieurs fichiers CSS / JS

J'essaie d'optimiser les performances d'un site en consolidant et en compressant les fichiers CSS et JS. Ma question porte davantage sur les étapes (concrètes) pour y parvenir, étant donné une situation réelle à laquelle je faisais face (cela devrait être typique chez d'autres développeurs, cependant).

Ma page fait référence à plusieurs fichiers CSS et JS comme les suivants:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

Pour la version de production, j'aimerais combiner les 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 faire référence au CSS nouvellement minifié. Cela semble sujet aux erreurs (par exemple, vous supprimez et ajoutez des lignes dans de nombreux fichiers). Une autre approche moins risquée? Le même problème pour les fichiers JS.

Vérifiez minify - il vous permet de combiner plusieurs fichiers js, css en un seul en les empilant dans une URL, par exemple

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

Nous l'avons utilisé pendant des années et il fait un excellent travail et le fait à la volée (pas besoin d'éditer les fichiers).

Je pense que le compresseur YUI est le meilleur qui soit. Il minimise JS et CSS et supprime même les console.logdéclarations que les gens utilisent pour le débogage JavaScript de bas niveau.

Découvrez à quel point c'est facile .

Vous pouvez le démarrer dans une tâche ant et donc l'inclure dans vos hooks de post / pré-commit si vous utilisez svn / git.

MISE À JOUR: De nos jours, j'utilise grunt avec les contributions concat, minify & uglify. Vous pouvez l'utiliser avec un observateur afin de créer de nouveaux fichiers minifiés en arrière-plan chaque fois que vous modifiez votre source. La contribution uglify supprime non seulement les journaux de la console, mais également les fonctions et propriétés inutilisées.

Consultez ce didacticiel pour un bref aperçu.

MISE À JOUR: Aujourd'hui, les gens prennent du recul par rapport à grunt et à son prédécesseur "gulp" et utilisent npm comme outil de construction. Lisez-le ici .

MISE À JOUR: Alors maintenant, les gens utilisent du fil pour exécuter npm. Pas étonnant; l'icône de fils est un chat. La plupart des frameworks actuels utilisent webpack pour regrouper les ressources dans des packages, qui s'occupent également de la minification .

J'aurais besoin de mettre à jour toutes les pages qui ont besoin de ces 3 fichiers pour faire référence au CSS nouvellement minifié.

Tout d'abord, je dirais que vous devriez avoir un en-tête commun. Il ne sera donc pas nécessaire de changer tous les en-têtes à tout moment chaque fois que nécessaire. C'est une bonne pratique d'avoir un seul en-tête ou 2-3. Ainsi, selon vos besoins, vous pouvez modifier votre en-tête. Ainsi, chaque fois que vous souhaitez étendre votre application Web, ce sera moins risqué et fastidieux.

Vous n'avez pas mentionné vos environnements de développement. Vous pouvez voir qu'il existe de nombreux outils de compression répertoriés pour différents environnements . Et vous utilisez un bon outil ieYUI Compressor.

J'ai fini par utiliser CodeKit pour concaténer mes fichiers CSS et JS. La fonctionnalité que je trouve vraiment utile est la possibilité de faire la concaténation lors de la sauvegarde du fichier; car il surveille les actifs CSS / JS respectifs. Une fois que je les ai correctement combinés, par exemple à 1 fichiers CSS et 1 JS, tous les autres fichiers peuvent simplement faire référence à ces 2.

Vous pouvez même demander à CodeKit d'effectuer une minification / compression à la volée.

Clause de non-responsabilité: je ne suis en aucun cas affilié à CodeKit. Je l'ai trouvé au hasard sur le Web et il a été un excellent outil dans mon processus de développement. Il est également livré avec de bonnes mises à jour depuis que je l'ai utilisé pour la première fois il y a plus d'un an.

Astuce rapide pour les utilisateurs de Windows, si vous souhaitez uniquement concater des fichiers:

Ouvrez une cmd à l'endroit souhaité et dirigez simplement vos fichiers vers un fichier en utilisant " type "

ex:

type .\scripts\*.js >> .\combined.js

Si l'ordre de vos scripts est important, vous devez taper explicitement les fichiers, dans l'ordre souhaité .

J'utilise ceci dans un fichier bat pour mes projets angular / bootstrap

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

C'est l'année 2015 dans la rue et le moyen le plus simple pour imo est d'utiliser gulp - http://gulpjs.com/ . La réduction du code à l'aide de gulp-uglify pour les scripts js et de gulp-minify-css pour le css est très simple. Gulp vaut vraiment la peine d'essayer

Je ne vois pas que vous mentionnez un système de gestion de contenu (Wordpress, Joomla, Drupal, etc.) mais si vous utilisez un CMS populaire, ils ont tous des plugins / modules disponibles (options gratuites également) qui minifieront et mettront en cache vos css et js.

L'utilisation d'un plugin vous donne la possibilité de garder les versions non compressées disponibles pour l'édition, puis lorsque des modifications sont apportées, le plugin inclut automatiquement vos modifications et recompresse le fichier. Assurez-vous simplement de choisir un plugin qui vous permettra d'exclure des fichiers (comme un fichier js personnalisé) au cas où il casse quoi que ce soit.

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

Pour les personnes qui veulent quelque chose d'un peu plus léger et flexible, j'ai créé js.sh aujourd'hui pour résoudre ce problème. C'est un simple outil de ligne de commande ciblé vers les fichiers JS qui pourrait facilement être modifié pour prendre également 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 morceaux de <25 Ko lorsque cela est possible, car l'iPhone ne mettra rien en cache de plus de 25 Ko
• Génère un petit fichier PHP avec des <script>balises que vous pouvez inclure le cas échéant
• Usage: js.sh -u yourname

Cela pourrait nécessiter des améliorations, mais c'est mieux pour mon cas d'utilisation que toutes les autres solutions que j'ai vues jusqu'à présent.

La première étape de l'optimisation est la minimisation des fichiers. (Je recommande fortement GULP pour la minimisation et l'optimisation. Sa solution de surveillance simple, son installation et tous les fichiers sont compressés en même temps. Prend en charge tous les CSS, JS, less, sass, etc ...)

OU Solution old school:

1) En général, en tant que processus d'optimisation, pour optimiser les performances d'un site, essayez de fusionner tous les CSS dans un seul fichier et de compresser le fichier à l'aide de Compass . De cette façon, vos multiples requêtes au CSS statique seront remplacées par une seule.

2) Problème de plusieurs JS que vous pouvez résoudre en utilisant CDN (ou Google Hosted Libraries) afin que les demandes soient transmises à un autre serveur pas le vôtre. De cette façon, le serveur n'attend pas que la requête précédente se termine avant d'envoyer la prochaine.

3) Si vous avez votre propre JavaScript stocké localement, réduisez chaque fichier en utilisant le plugin Brackets "Compresser JavaScript". Il s'agit essentiellement d'un clic pour compresser JavsScript. Brackets est un éditeur gratuit conçu pour CSS et JS, mais peut être utilisé pour PHP et d'autres langages. Il y a beaucoup de plugins à choisir pour les développeurs front-end et back-end. En général, "un clic" pour exécuter toutes ces commandes (jusqu'à présent multiples). Btw, Brackets a remplacé mon très cher Dreamweaver;)

3) Essayez d'utiliser des outils comme Sass , Compass, moins pour minimiser votre CSS.

Remarque: même sans utiliser le mixage SASS ou les variables, votre CSS sera compressé (il suffit d'utiliser simplement du CSS pur et la commande "watch" de Compass le compressera pour vous).

J'espère que ça aide!

Si vous faites un prétraitement sur les fichiers que vous servez, vous voudrez probablement mettre en place un système de construction approprié (par exemple un Makefile). De cette façon, vous avez des fichiers source sans duplication, et chaque fois que vous effectuez une modification, vous exécutez «make» et il met à jour tous les fichiers générés automatiquement. S'il existe déjà un système de construction en place, découvrez comment il fonctionne et utilisez-le. Sinon, vous devrez en ajouter un.

Alors tout d'abord, découvrez comment combiner et réduire vos fichiers à partir de la ligne de commande (la documentation YUICompressor couvre cela). Désignez un répertoire pour les éléments générés automatiquement, distinct de ceux sur lesquels vous travaillez mais accessibles au serveur Web, et faites-y la sortie, par exemple gen / scripts / shared.js. Mettez les commandes que vous avez utilisées dans un Makefile et relancez 'make' chaque fois que vous avez fait une modification et que vous voulez qu'elle prenne effet. Ensuite, mettez à jour les en-têtes dans d'autres fichiers pour pointer vers les fichiers combinés et minifiés.

Dans mon projet symfony, je fais quelque chose comme ça

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

Lorsque la version de développement est prête pour la production, j'utilise ce script pour combiner tous les fichiers css et remplacer le contenu de min.css.

Mais cette solution ne fonctionne que si les mêmes fichiers css sont inclus dans toutes les pages.

Vous pouvez utiliser le module de nœud cssmin qui est construit à partir du célèbre compresseur YUI

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);

Tous les utilitaires plus rapides se trouvent ici

http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json