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 concerne davantage les étapes (concrètes) sur la manière de réaliser cela, étant donné la situation réelle à laquelle je faisais face (cela devrait cependant être typique des autres développeurs).
Ma page fait référence à plusieurs fichiers CSS et JS tels que:
<!--
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 à l'aide, par exemple, de Compresseur YUI . Mais alors, je devrais mettre à jour toutes les pages qui ont besoin de ces 3 fichiers pour faire référence au CSS nouvellement modifié. Cela semble 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.
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 d'un fichier; car il surveille les actifs CSS/JS respectifs. Une fois que je les ai bien combinés, par exemple 1 fichier CSS et 1 fichier JS, tous les autres fichiers peuvent simplement se référer à ces 2.
Vous pouvez même demander à CodeKit de faire de la 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 cela a été un excellent outil dans mon processus de développement. Il comporte également de bonnes mises à jour depuis ma première utilisation il y a plus d'un an.
Check out 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'utilisons depuis des années et il fait un excellent travail et le fait à la volée (nul besoin de modifier des fichiers).
Je pense que le YUI Compressor est le meilleur qui soit. Il minimise JS et CSS et supprime même les instructions console.log utilisées par les utilisateurs pour le débogage JavaScript de bas niveau.
Découvrez à quel point il est facile .
Vous pouvez le lancer dans une tâche ant et donc l'inclure dans vos hooks post/pre commit si vous utilisez svn/git.
UPDATE: De nos jours, j’utilise Grunt avec le concat, minimise et alourdit les contributions. Vous pouvez l’utiliser avec un observateur pour créer de nouveaux fichiers minifués en arrière-plan chaque fois que vous modifiez votre source .
Voir ce tutoriel pour un bref aperçu.
UPDATE: De nos jours, les gens prennent du recul face à son prédécesseur "gulp" et utilisent npm comme outil de construction. Lisez dessus ici .
J'aurais besoin de mettre à jour toutes les pages qui ont besoin de ces 3 fichiers pour faire référence au CSS nouvellement modifié.
Premièrement, je dirais que vous devriez avoir un en-tête commun. Donc, il n’aura pas besoin de changer tous les en-têtes à tout moment si nécessaire. C'est une bonne pratique d'avoir un en-tête simple ou 2-3. Donc, si votre page a besoin, vous pouvez changer votre en-tête. Donc, chaque fois que vous souhaitez étendre votre application Web, cela sera moins risqué et fastidieux.
Vous n'avez pas mentionné vos environnements de développement. Vous pouvez voir qu'il y a de nombreux outils de compression répertoriés pour différents environnements . Et vous utilisez un bon outil i.e.YUI Compressor.
C'est 2015 année dans la rue et la meilleure façon imo utilise gulp - http://gulpjs.com/ . Réduire le code en utilisant gulp-uglify pour les scripts js et gulp-minify -css pour css est très simple .Gulp vaut vraiment la peine d'essayer
Astuce pour les utilisateurs de Windows, si vous voulez seulement concaténer des fichiers:
Ouvrez une cmd à l’endroit désiré, et dirigez 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 this dans un fichier chauve-souris 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
Je ne vois pas que vous mentionniez un système de gestion de contenu (Wordpress, Joomla, Drupal, etc.), mais si vous utilisez un système de gestion de contenu populaire, ils disposent tous de plugins/modules disponibles (options gratuites également) qui minifient et mettent en cache vos fichiers CSS et js.
L'utilisation d'un plug-in vous permet de conserver les versions non compressées à des fins d'édition. Lorsque des modifications sont apportées, le plug-in inclut automatiquement vos modifications et recompresse le fichier. Assurez-vous simplement de choisir un plug-in qui vous permettra d'exclure des fichiers (tels qu'un fichier js personnalisé) en cas de casse.
Dans le passé, j’ai essayé de conserver manuellement ces fichiers et c’est toujours un cauchemar pour la 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. Il s’agit d’un simple outil de ligne de commande destiné aux fichiers JS. Il peut être facilement modifié pour s’occuper des 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
- Séparer JS en morceaux de moins de 25 Ko, dans la mesure du possible, car l'iPhone ne mettra pas en cache les fichiers supérieurs à 25 Ko.
- Génère un petit fichier PHP avec les balises
<script>que vous pouvez inclure, le cas échéant. - Utilisation:
js.sh -u yourname
Certaines améliorations pourraient être apportées, mais cela vaut mieux pour mon cas d'utilisation que pour 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 à la fois. Prend en charge tous les types de fichiers CSS, JS, less, sass, etc.)
OU solution ancienne école:
1) En général, 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 requêtes multiples à CSS statique seront remplacées par une seule requête.
2) Problème de plusieurs JS que vous pouvez résoudre en utilisant CDN (ou les bibliothèques hébergées de Google) afin que les demandes soient adressées à un autre serveur que le vôtre. De cette façon, le serveur n'attend pas que la requête précédente soit terminée avant d'envoyer la requête suivante.
3) Si vous avez votre propre JavaScript stocké localement, minimisez chaque fichier en utilisant Brackets plugin "Compress JavaScript". C'est en gros un clic pour compresser JavsScript. Brackets est un éditeur gratuit conçu pour CSS et JS mais pouvant ê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 faire toutes ces commandes (jusqu'à présent multiples). Btw, Brackets a remplacé mon très cher Dreamweaver;)
3) Essayez d’utiliser des outils tels que Sass , Compass, less pour vous minimiser les CSS.
Remarque: Même sans utiliser SASS mixage ou les variables, votre CSS sera compressé (une simple utilisation de CSS pur et la commande Compass "watch" le compresseront pour vous).
J'espère que ça aide!
Si vous effectuez un traitement préalable sur les fichiers que vous servez, vous souhaiterez probablement configurer un système de construction approprié (par exemple, un fichier Makefile). De cette façon, vous avez des fichiers source sans duplication, et chaque fois que vous apportez une modification, vous exécutez «make» et met à jour tous les fichiers générés automatiquement. Si un système de construction est déjà en place, découvrez son fonctionnement et utilisez-le. Sinon, vous devrez en ajouter un.
Commencez donc par comprendre comment combiner et réduire vos fichiers à partir de la ligne de commande (la documentation de YUICompressor couvre cela). Désignez un répertoire pour les éléments générés automatiquement, distincts de ceux sur lesquels vous travaillez mais accessibles pour le serveur Web, ainsi que leur sortie, par exemple gen/scripts/combination.js. Mettez les commandes que vous avez utilisées dans un Makefile et relancez «make» à chaque fois que vous apportez un changement et que vous souhaitez qu'il prenne effet. Puis mettez à jour les en-têtes des autres fichiers pour qu'ils pointent vers les fichiers combinés et minifiés.
Vous pouvez utiliser le module cssmin node 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);
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 dev 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.
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