it-swarm.com.de

Kombinieren und reduzieren Sie mehrere CSS/JS-Dateien

Ich versuche, die Leistung einer Website durch Konsolidierung und Komprimierung der CSS- und JS-Dateien zu optimieren. Meine Frage bezieht sich mehr auf die (konkreten) Schritte, wie dies in einer realen Situation, in der ich mich befand, erreicht wurde (sollte auch bei anderen Entwicklern typisch sein).

Meine Seite verweist auf mehrere CSS- und JS-Dateien wie folgt:

<!--
  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>

Für die Produktionsversion möchte ich die 3 CSS-Dateien zu einer zusammenfassen und diese mit Hilfe von z. YUI-Kompressor . Dann müsste ich jedoch alle Seiten aktualisieren, für die diese 3 Dateien benötigt werden, um auf das kürzlich reduzierte CSS zu verweisen. Dies scheint fehleranfällig zu sein (z. B. entfernen und fügen Sie einige Zeilen in vielen Dateien hinzu). Irgendein anderer, weniger riskanter Ansatz? Dasselbe Problem für die JS-Dateien.

87
moey

Am Ende habe ich CodeKit verwendet, um meine CSS- und JS-Dateien zu verketten. Die Funktion, die ich wirklich nützlich finde, ist die Möglichkeit, die Verkettung beim Speichern der Datei durchzuführen. weil es die jeweiligen CSS/JS-Assets überwacht. Sobald ich sie richtig kombiniert habe, z. CSS-Dateien und 1 JS-Dateien können alle anderen Dateien einfach auf diese 2 verweisen.

Sie können CodeKit sogar zur sofortigen Minifizierung/Komprimierung auffordern.

Haftungsausschluss: Ich bin in keiner Weise mit CodeKit verbunden. Ich habe es zufällig im Web gefunden, und es hat mir in meinem Entwicklungsprozess als großartiges Werkzeug gedient. Es enthält auch gute Updates, seit ich es vor mehr als einem Jahr zum ersten Mal verwendet habe.

12
moey

Check out minify - erlaubt es Ihnen, mehrere js, css-Dateien zu einer einzigen zu kombinieren, indem Sie sie einfach in eine URL stapeln, z.

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

Wir haben es seit Jahren verwendet und es macht einen tollen Job und macht es on the fly (keine Notwendigkeit, Dateien zu bearbeiten).

35
Noodles

Ich denke, der YUI Compressor ist das Beste, was es gibt. Es minimiert JS und CSS und entfernt sogar die console.log-Anweisungen, die Leute für das einfache Debuggen von JavaScript verwenden.

So einfach geht's .

Sie können es in einer Ant-Task starten und daher in Ihren Post/Pre-Commit-Hooks einbinden, wenn Sie svn/git verwenden.

UPDATE: Heutzutage verwende ich grunt mit den concat, minify & uglify Beiträgen. Sie können es mit einem Watcher verwenden, um neue minifed-Dateien im Hintergrund zu erstellen, wenn Sie die Quelle ändern. Der uglify-Beitrag entfernt nicht nur Konsolenprotokolle, sondern auch nicht verwendete Funktionen und Eigenschaften.

Siehe dieses Tutorial für einen kurzen Einblick.

UPDATE: Heutzutage treten die Leute von grunt und seinem Vorgänger "gulp" zurück und verwenden npm als Build-Tool. Lesen Sie weiter hier .

23
Andresch Serj

Ich muss alle Seiten aktualisieren, für die diese 3 Dateien benötigt werden, um auf das neu minimierte CSS zu verweisen.

Erstens würde ich sagen, dass Sie einen gemeinsamen Header haben sollten. Es muss also nicht immer zu jeder Zeit alle Header geändert werden. Es hat sich bewährt, einen einzelnen Header oder 2-3 zu haben. So wie Ihre Seite benötigt wird, können Sie Ihre Kopfzeile ändern. Wann immer Sie Ihre Web-App erweitern möchten, ist sie weniger riskant und langwierig.

Sie haben Ihre Entwicklungsumgebungen nicht erwähnt. Sie können sehen, dass viele Komprimierungswerkzeuge für verschiedene Umgebungen aufgelistet sind . Und Sie verwenden gutes Werkzeug, d.h. YUI Compressor. 

19
Somnath Muluk

Es ist 2015 auf der Straße und die einfachste Art und Weise, wie imo gulp - http://gulpjs.com/ ..__ verwendet. Minimierender Code unter Verwendung von gulp-uglify für js-Skripts und gulp-minify -css für css ist sehr einfach .Gulp ist auf jeden Fall einen Versuch wert

10
aiho

Schneller Tipp für Windows-Benutzer, wenn Sie nur Dateien speichern möchten:

Öffnen Sie an der gewünschten Stelle ein Cmd und leiten Sie Ihre Dateien einfach mit " type " in eine Datei. 

ex:

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

Wenn die Reihenfolge Ihrer Skripte wichtig ist, müssen Sie die Dateien explizit in der gewünschten Reihenfolge eingeben.

Ich verwende this in einer bat-Datei für meine angle/bootstrap-Projekte

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
10
mpx

Ich sehe nicht, dass Sie ein Content-Management-System (Wordpress, Joomla, Drupal usw.) erwähnen, aber wenn Sie ein beliebiges CMS verwenden, verfügen alle über Plugins/Module (auch freie Optionen), die Ihre CSS und JS minimieren und zwischenspeichern.

Wenn Sie ein Plugin verwenden, können Sie die unkomprimierten Versionen für die Bearbeitung verfügbar halten. Wenn Änderungen vorgenommen werden, schließt das Plugin Ihre Änderungen automatisch ein und komprimiert die Datei erneut. Stellen Sie einfach sicher, dass Sie ein Plugin auswählen, mit dem Sie Dateien (z. B. eine benutzerdefinierte JS-Datei) ausschließen können, falls dabei etwas kaputt geht. 

Ich habe in der Vergangenheit versucht, diese Dateien manuell aufzubewahren, und es wird immer zu einem Albtraum der Wartung. Viel Glück, hoffe das hat geholfen.

6
RachelD

Für Menschen, die etwas leichter und flexibler wollen, habe ich heute js.sh erstellt, um dieses Problem anzugehen. Es ist ein einfaches Befehlszeilentool für JS-Dateien, das leicht modifiziert werden kann, um auch CSS-Dateien zu bearbeiten. Leistungen:

  • Einfach konfigurierbar für die Verwendung durch mehrere Entwickler in einem Projekt
  • Kombiniert JS-Dateien in der in script_order.txt angegebenen Reihenfolge
  • Komprimiert sie mit dem Closure Compiler von Google
  • Teilt JS nach Möglichkeit in <25-kb-Blöcke, da das iPhone nichts mehr als 25 kb im Cache speichert
  • Erzeugt eine kleine PHP - Datei mit <script>-Tags, die Sie gegebenenfalls einfügen können
  • Verwendung: js.sh -u yourname

Es könnte einige Verbesserungen erfordern, aber es ist besser für meinen Anwendungsfall als alle anderen Lösungen, die ich bisher gesehen habe.

6
Ben Y

Der erste Schritt der Optimierung ist die Dateiminimierung. (Ich empfehle GULP für die Minimierung und Optimierung. Die einfache Überwachungslösung, die Installation und alle Dateien werden gleichzeitig komprimiert. Unterstützt alle CSS-, JS-, less-, sass-Dateien usw.). 

ODER Old-School-Lösung: 

1) Im Allgemeinen sollten Sie als Optimierungsprozess zur Optimierung der Website-Performance das gesamte CSS in einer Datei zusammenführen und die Datei mit Compass komprimieren. Auf diese Weise werden Ihre mehrfachen Anforderungen an statisches CSS durch einzelne ersetzt. 

2) Problem mit mehreren JS, die Sie lösen können, indem Sie CDN (oder Google Hosted Libraries) verwenden, sodass Anforderungen an einen anderen Server und nicht an Ihren Server gesendet werden. Auf diese Weise wartet der Server nicht auf den Abschluss der vorherigen Anforderung, bevor er das nächste Mal sendet. 

3) Wenn Sie über ein eigenes, vor Ort gespeichertes JavaScript verfügen, minimieren Sie jede Datei mit Klammern plugin "JavaScript komprimieren". Es ist im Grunde ein Klick zum Komprimieren von JavsScript. Brackets ist ein kostenloser Editor für CSS und JS, kann aber für PHP und andere Sprachen verwendet werden. Es gibt viele Plugins für Front-End- und Back-End-Entwickler. Im Allgemeinen "ein Klick", um alle diese (bisher mehrere) Befehle auszuführen. Übrigens, Brackets ersetzten meinen sehr teuren Dreamweaver;) 

3) Verwenden Sie Tools wie Sass , Compass, less , um Ihr CSS zu minimieren. 

Hinweis: Auch ohne die Verwendung von SASS oder von Variablen wird Ihr CSS komprimiert (verwenden Sie einfach reines CSS und Compass "watch" - Befehl, um es zu komprimieren).

Ich hoffe das hilft!

4
StefaDesign

Wenn Sie eine Vorverarbeitung der von Ihnen bereitgestellten Dateien vornehmen, möchten Sie wahrscheinlich ein ordnungsgemäßes Build-System (z. B. ein Makefile) einrichten. Auf diese Weise haben Sie einige Quelldateien ohne Duplizierung, und wenn Sie eine Änderung vornehmen, führen Sie 'make' aus und bringen alle automatisch generierten Dateien auf den neuesten Stand. Wenn bereits ein Build-System vorhanden ist, erfahren Sie, wie es funktioniert und verwenden Sie es. Wenn nicht, müssen Sie einen hinzufügen.

Überlegen Sie sich zunächst, wie Sie Ihre Dateien über die Befehlszeile kombinieren und minimieren können (dies wird in der YUICompressor-Dokumentation beschrieben). Legen Sie ein Verzeichnis für automatisch generierte Elemente fest, getrennt von dem, an dem Sie arbeiten, aber für den Webserver zugänglich ist und dort ausgegeben wird, z. Fügen Sie die von Ihnen verwendeten Befehle in ein Makefile ein, und führen Sie jedes Mal, wenn Sie eine Änderung vorgenommen haben, "make" aus, damit die Änderungen wirksam werden. Aktualisieren Sie dann die Header in anderen Dateien, um auf die kombinierten und minimierten Dateien zu verweisen.

3
jimrandomh

Sie können das Modul cssmin node verwenden, das aus dem bekannten YUI-Kompressor erstellt wird

$ 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);
1
sdc

In meinem Symfony-Projekt mache ich so etwas

{# 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 %}

Wenn die dev-Version produktionsbereit ist, verwende ich dieses Skript , um alle CSS-Dateien zu kombinieren und den Inhalt von min.css zu ersetzen.

Diese Lösung funktioniert jedoch nur, wenn auf allen Seiten die gleichen CSS-Dateien enthalten sind.

1
moldcraft

Alle schnelleren Dienstprogramme finden Sie hier 

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
0
SIbghat