Web Assets - Tipps für eine bessere Organisation und Leistung

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Erinnern Sie sich noch an die Zeit, als wir viel Zeit damit verbringen mussten, die Ressourcen unseres Projekts (Bilder, CSS usw.) zu optimieren? Heute haben Benutzer eine viel schnellere Internetverbindung und es scheint, dass wir es uns leisten können, größere Bilder oder größere Flash-Dateien mit vielen Videos und Bildern zu verwenden. Mit dem Aufstieg der mobilen Entwicklung sind wir jedoch wieder in der gleichen Situation. Es ist äußerst wichtig, gut optimierte Websites zu erstellen, damit wir schnellere Anwendungen haben, die weniger Inhalte herunterladen und sofort reagieren.

Bilder

Servieren Sie die richtige Größe

Oft verwenden wir dieselben Bilder für verschiedene Teile unserer Websites. In einem Online-Shop haben alle Produkte ein Übersichtsbild. Angenommen, wir haben drei Seiten, auf denen wir diese Bilder anzeigen müssen - eine Seite zum Auflisten der Produkte, eine andere Seite zum Anzeigen der Produktdetails und eine dritte Seite, auf der nur das Bild in seiner Originalgröße angezeigt wird.

Wir benötigen also drei verschiedene Bildgrößen. Wenn wir dieselbe Datei für alle drei verschiedenen Stellen verwenden, lädt der Browser das Bild in voller Größe auch für die Listingseite herunter, auf der wir möglicherweise nur ein 200x200-Bild benötigen. Wenn die Originaldatei ungefähr 1 MB groß ist und wir zehn Produkte pro Seite haben, würde der Benutzer 10 MB herunterladen. Das ist keine sehr gute Idee. Wenn Sie versuchen können, unterschiedliche Bilder für die verschiedenen Teile Ihrer Website zu generieren, werden Ihren Benutzern viele KBs gespart. Es ist eine gute Idee, die aktuelle Bildschirmauflösung zu berücksichtigen. Wenn jemand Ihre Website auf seinem iPhone öffnet, muss das riesige Header-Bild, das Sie normalerweise verwenden, nicht bereitgestellt werden. Mithilfe von CSS-Medienabfragen können Sie ein Bild mit einer kleineren Größe senden:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .header {
        background-image: url(../images/background_400x200.jpg);
    }
}

Kompression

Das Senden eines Bildes mit genau den richtigen Abmessungen reicht nicht immer aus. Einige Dateiformate können stark komprimiert werden, ohne ihre Qualität zu verlieren. Es gibt viele Programme, die Ihnen helfen können. Zum Beispiel bietet Photoshop eine nette Funktion namens Save for Web and Devices:

In diesem Dialogfeld gibt es viele Optionen, aber eine der wichtigsten ist die Quality. Wenn Sie den Wert auf etwa 80% einstellen, kann sich die Dateigröße erheblich verringern.

Natürlich können Sie Code zum Komprimieren der Dateien verwenden, aber ich persönlich bevorzuge Photoshop und verwende es, wann immer es möglich ist. Hier ist ein einfaches Beispiel in PHP geschrieben:

function compressImage($source, $destination, $quality) {
    $info = getimagesize($source);
    switch($info['mime']) {
        case "image/jpeg":
            $image = imagecreatefromjpeg($source);
            imagejpeg($image, $destination, $quality);
        break;
        case "image/gif":
            $image = imagecreatefromgif($source);
            imagegif($image, $destination, $quality);
        break;
        case "image/png":
            $image = imagecreatefrompng($source);
            imagepng($image, $destination, $quality);
        break;
    }
}
compressImage('source.png', 'destination.png', 85);

Sprites

Um die Leistung Ihrer Anwendung zu steigern, können Sie unter anderem die Anzahl der Anforderungen an den Server verringern. Jedes neue Bild bedeutet also eine neue Anfrage. Es ist eine gute Idee, Ihre Bilder zu einem zu kombinieren. Das resultierende Bild wird als sprite bezeichnet. Wenn Sie den CSS-Stil für die background-position ändern, können Sie nur den Teil des Bildes anzeigen, den Sie benötigen. Beispielsweise verwendet Twitter Bootstrap Sprites für seine internen Symbole:

Im CSS können Sie dann Folgendes machen, um den gewünschten Teil des Sprites anzuzeigen:

1	.icon-edit {
2	background-image: url("../img/glyphicons-halflings-white.png");
3	background-position: -96px -72px;
4	}

Caching

Der Caching-Mechanismus des Browsers ist Ihr Freund. Ja, manchmal kann es während der Entwicklung zu sehr lustigen Situationen kommen, aber es hilft wirklich, die Leistung Ihrer Website zu verbessern. Jeder Browser speichert Inhalte wie Bilder, JavaScript oder CSS zwischen. Es gibt verschiedene Möglichkeiten, das Caching zu steuern. Ich empfehle Ihnen, diesen großartigen Artikel zu lesen, um eine detaillierte Übersicht zu erhalten. Im Allgemeinen können Sie den Prozess steuern, indem Sie folgende Überschriften festlegen:

1	$expire = 60 * 60 * 24 * 1;// seconds, minutes, hours, days
2	header('Cache-Control: maxage='.$expire);
3	header('Expires: '.gmdate('D, d M Y H:i:s', time() + $expire).' GMT');
4	header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');

Prefetching

HTML5 entwickelt sich jeden Tag weiter. Es gibt eine nette Funktion namens Prefetching, die dem Browser mitteilt, dass Sie in naher Zukunft eine Ressource benötigen, die jetzt im Voraus heruntergeladen werden sollte. Zum Beispiel:

1	<link rel="prefetch" href="/images/background.jpg">

Daten-URI-Schema / Inline-Bilder

Vor ein paar Jahren musste ich eine einfache Webseite entwickeln, die eigentlich nur eine HTML-Datei sein sollte. Natürlich gab es mehrere Bilder, die ich einschließen musste. Daten-URI-Schemata halfen mir, das Problem zu lösen. Die Idee ist, Ihre Bilder in eine Base64-codierte Zeichenfolge zu konvertieren und sie im src-Attribut des img-Tags zu platzieren. Zum Beispiel:

1	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

Mit diesem Ansatz befindet sich Ihr Bild tatsächlich im HTML-Code und Sie speichern eine HTTP-Anforderung. Wenn Sie ein großes Bild haben, ist die Zeichenfolge natürlich sehr lang. Hier ist ein einfaches PHP-Skript, das Bilder in base64-Zeichenfolgen konvertiert:

$picture = fread($fp,filesize($file));
fclose($fp);
// base64 encode the binary data, then break it
// into chunks according to RFC 2045 semantics
$base64 = base64_encode($picture);
$tag = '<img src="data:image/jpg;base64,'.$base64.'" alt="" />';
$css = 'url(data:image/jpg;base64,'.str_replace("\n", "", $base64).'); ';

In einigen Fällen kann dies hilfreich sein, aber denken Sie daran, dass es im IE nicht sehr gut funktioniert.

CSS

Ich denke gerne, dass das Schreiben von CSS wie das Schreiben von Code ist. Sie müssen Ihre Stile noch organisieren, um verschiedene Blöcke und die Beziehung zwischen ihnen zu definieren. Deshalb denke ich, dass CSS-Management wirklich wichtig ist. Jeder Teil der Anwendung sollte seine eigenen Stile haben und gut voneinander getrennt sein. Das Speichern aller Dateien in verschiedenen Dateien bietet eine gute Organisation, bringt jedoch auch eigene Probleme mit sich.

Wir alle wissen, dass die Verwendung der @import-Anweisung keine sehr gute Idee ist. Das liegt daran, dass jeder neue @import eine neue Anfrage an den Server bedeutet. Wenn Sie 20 verschiedene .css-Dateien haben, bedeutet dies, dass der Browser 20 Anfragen stellt. Und der Browser rendert / zeigt die Seite nicht, bevor alle Stile heruntergeladen wurden. Wenn einige Ihrer .css-Dateien fehlen oder sehr groß sind, tritt eine große Verzögerung auf, bevor etwas auf dem Bildschirm angezeigt wird.

Verwenden Sie CSS-Präprozessoren

CSS-Präprozessoren lösen alle oben genannten Probleme. Sie teilen Ihre Stile immer noch in verschiedene Dateien auf, aber am Ende kompiliert der Präprozessor alles in eine einzige .css-Datei. Sie bieten tatsächlich eine Reihe cooler Funktionen wie Variablen, verschachtelte Blöcke, Mixins und Vererbung. Der Code sieht immer noch wie CSS aus, ist aber gut formatiert / strukturiert. Es gibt nur wenige beliebte Präprozessoren, die es wert sind, überprüft zu werden - Sass, LESS und Stylus. Hier ist ein einfaches Beispiel in LESS geschrieben:

.position(@top: 0, @left: 0) {
    position: absolute;
    top: @top;
    left: @left;
    text-align: left;
    font-size: 24px;
}
.header {
    .position(20px, 30px);
    .tips {
        .position(10px, -20px);
    }
    .logo {
        .position(10px, 20px);  
    }
}

Das wird erstellt

.header {
    position: absolute;
    top: 20px;
    left: 30px;
    text-align: left;
    font-size: 24px;
}
.header .tips {
    position: absolute;
    top: 10px;
    left: -20px;
    text-align: left;
    font-size: 24px;
}
.header .logo {
    position: absolute;
    top: 10px;
    left: 20px;
    text-align: left;
    font-size: 24px;
}

Wenn Sie ein Styling für eine Schaltfläche haben und dieselbe Schaltfläche mit einer anderen Farbe für den Text erstellen möchten, können Sie das machen:

.button {
    border: solid 1px #000;
    padding: 10px;
    background: #9f0;
    color: #0029FF;
}
.active-button {
    .button();
    color: #FFF;
}

Effizientes CSS

Gewöhnlich denken die meisten Entwickler nicht an effizientes CSS. Die Effizienz des CSS spiegelt sich in der Darstellung der Seite wider. Wenn Ihre Stile ineffizient sind, wird Ihre Anwendung von den Browsern langsam gerendert. Eine interessante Tatsache ist, dass Browser die CSS-Selektoren von rechts nach links analysieren. Was bedeutet, dass der folgende Code:

1	body ul li a {
2	color: #F000;
3	text-decoration: none;
4	}

... ist überhaupt nicht effizient. Dies liegt daran, dass die Engine alle <a> -Tags erhält und jedes der übergeordneten Elemente auswerten muss, um schließlich den erforderlichen Stil zu erfassen. Sie sollten auch wissen, dass die Selektoren in Bezug auf die Effizienz in der folgenden Reihenfolge angeordnet sind: ID, Klasse, Tag und Universal. Dies bedeutet, dass ein Element mit einer festgelegten ID schneller gerendert wird als ein Element mit nur einer Tag-Auswahl. Natürlich macht es keinen Sinn, IDs für alle Elemente im DOM-Baum hinzuzufügen, aber Sie sollten Ihren Code auf jeden Fall überprüfen und ihn nach Möglichkeit verbessern. Zum Beispiel, wenn Sie so etwas haben:

1	ul #navigation li {
2	background: #ff0232;
3	}

Sie müssen den ul-Teil entfernen, da Sie nur ein #navigation-Element auf der Seite haben. Oder in der folgenden Auswahl:

1	body .content p {
2	font-size: 20px;
3	}

Es ist klar, dass das Element .content ein untergeordnetes Element des body-Tags ist. Alle Elemente sind tatsächlich untergeordnete Elemente dieses Elements.

Hier sind zwei hilfreiche Links zu diesem Thema: developer.google.com und css-tricks.com

Dateigröße

Wie oben erwähnt, ist es gut, so wenig Code wie möglich zu haben, da der Browser die Seite vor dem Herunterladen des CSS nicht rendert. Hier sind einige Tipps zum Reduzieren der Dateigröße.

Kombinieren Sie ähnliche Stile:

.header {
    font-size: 24px;
}
.content {
    font-size: 24px;
}

... transformieren Sie in:

1	.header, .content {
2	font-size: 24px;
3	}

Verwenden Sie Abkürzungen. Anstatt von:

.header {
    background-color: #999999;
    background-image: url(../images/header.jpg);
    background-position: top right;
}

Schreiben Sie es so:

1	.header {
2	background: #999 url(../images/header.jpg) top right;
3	}

Minimieren Sie Ihren CSS-Code. Sie können dies tun, indem Sie ein Werkzeug verwenden, das im Allgemeinen alle Leerzeichen und neuen Linien entfernt. Zum Beispiel CSSOptimiser oder Minifycss. Es ist üblich, solche Instrumente auf der Serverseite der Anwendung zu verwenden, d. H. Etwas, das in der Sprache des Backends geschrieben ist. Normalerweise minimieren diese Komponenten Ihren Code und stellen ihn dem Benutzer zur Verfügung.

Fügen Sie Ihre CSS-Dateien in das `<head>` -Tag ein

Es wird empfohlen, Ihre .css-Dateien in das head-Tag aufzunehmen, damit der Browser sie zuerst herunterlädt.

JavaScript

Reduzieren Sie die Anzahl der HTTP-Anforderungen

Wie bei Ihrem CSS ist es gut, die Anzahl der an den Server zu sendenden Anforderungen zu reduzieren. In den meisten Fällen stoppt das Laden der JavaScript-Dateien das Rendern der Seite nicht, macht jedoch einige Teile der Seite funktionsunfähig.

Minimieren Sie Ihren Code

Es gibt eine Reihe von Bibliotheken, die JavaScript-Minimierung durchführen. Dies reduziert die Dateigröße. Beachten Sie jedoch, dass es in einer Entwicklungsumgebung gut ist, den Code sauber zu halten. Die meisten dieser Tools ändern den Namen Ihrer Variablen und konvertieren alles in eine einzeilige Zeichenfolge, was den Debugging-Prozess fast unmöglich macht.

CommonJS, AMD, RequireJS - Probieren Sie es aus

JavaScript verfügt nativ nicht über einen Mechanismus zum Verwalten von Modulen. All diese Dinge wurden erfunden, um dieses Problem zu lösen. Sie bieten eine API, mit der Sie Module definieren und verwenden können. Hier ist zum Beispiel ein Beispiel aus http://requirejs.org/:

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

In main.js können Sie require() verwenden, um andere Skripte zu laden, die Sie benötigen:

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

Verwenden Sie Namesräume

Wenn wir über Code-Organisation sprechen, können wir den Teil über Namesräume nicht überspringen. Nativ gibt es in JavaScript keine solche Funktion, aber mit ein wenig Code können Sie dasselbe erreichen. Wenn Sie Ihr eigenes MVC-Framework erstellen möchten, verfügen Sie wahrscheinlich über die folgenden Klassen:

1	var model = function() { ... };
2	var view = function() { ... };
3	var controller = function() { ... };

Wenn Sie die Dinge so belassen, wie sie im obigen Code enthalten sind, werden sie öffentlich und es besteht eine größere Wahrscheinlichkeit, dass Konflikte mit anderen Bibliotheken in Ihrem Projekt entstehen. Wenn Sie sie in einem unabhängigen Objekt (Namespace) gruppieren, wird das Framework geschützt:

var MyAwesomeFramework = {
    model: function() { ... },
    view: function() { ... },
    controller: function() { ... }
}

Befolgen Sie die Entwurfsmuster

Das Rad muss nicht neu erfunden werden. JavasScript wurde sehr beliebt und es gibt viele gute Praktiken. Entwurfsmuster sind wiederverwendbare Lösungen für häufig auftretende Programmierprobleme. Das Befolgen einiger davon hilft Ihnen beim Erstellen einer guten Anwendung. Wenn ich jedoch versuche, sie alle hier zu behandeln, müsste ich ein Buch schreiben. Hier sind nur einige davon:

Konstruktormuster

Verwenden Sie dieses Muster, um eine Instanz eines bestimmten Objekttyps zu erstellen. Hier ist ein Beispiel:

var Class = function(param1, param2) {
    this.var1 = param1;
    this.var2 = param2;
}
Class.prototype = {
    method:function() {
        alert(this.var1 + "/" + this.var2);
    }
};

Oder Sie können dies versuchen:

function Class(param1, param2) {
    this.var1 = param1;
    this.var2 = param2;
    this.method = function() {
        alert(param1 + "/" + param2);
    };
};

var instance = new Class("value1", "value2");

Modulmuster

Das Modulmuster gibt uns die Möglichkeit, private und öffentliche Methoden zu erstellen. Im folgenden Code sind die Variable _index und die Methode privateMethod privat. increment und getIndex sind öffentlich.

var Module = (function() {
    var _index = 0;
    var privateMethod = function() {
        return _index * 10;
    }
    return {
        increment: function() {
            _index += 1;
        },
        getIndex: function() {
            return _index;
        }
    };      
})();

Beobachtermuster

Überall dort, wo Sie Abonnements oder das Versenden von Ereignissen sehen, wird dieses Muster wahrscheinlich angezeigt. Es gibt Beobachter, die sich für etwas interessieren, das mit einem bestimmten Objekt zusammenhängt. Sobald die Aktion ausgeführt wurde, benachrichtigt das Objekt die Beobachter. Das folgende Beispiel zeigt, wie wir dem Users-Objekt einen Beobachter hinzufügen können:

var Users = {
    list: [],
    listeners: {},
    add: function(name) {
        this.list.push({name: name});
        this.dispatch("user-added");
    },
    on: function(eventName, listener) {
        if(!this.listeners[eventName]) this.listeners[eventName] = [];
        this.listeners[eventName].push(listener);
    },
    dispatch: function(eventName) {
        if(this.listeners[eventName]) {
            for(var i=0; i&lt;this.listeners[eventName].length; i++) {
                this.listeners[eventName][i](this);
            }
        }
    },
    numOfAddedUsers: function() {
        return this.list.length;
    }
}

Users.on("user-added", function() {
    alert(Users.numOfAddedUsers());
});

Users.add("Krasimir");
Users.add("Tsonev");

Funktionsverkettungsmuster

Dieses Muster ist eine gute Möglichkeit, die öffentliche Schnittstelle Ihres Moduls zu organisieren. Das spart Zeit und verbessert die Lesbarkeit:

var User = {
    profile: {},
    name: function(value) {
        this.profile.name = value;
        return this;
    },
    job: function(value) {
        this.profile.job = value;
        return this;
    },
    getProfile: function() {
        return this.profile;
    }
};

var profile = User.name("Krasimir Tsonev").job("web developer").getProfile();
console.log(profile);

Ich empfehle dringend, dieses Buch von Addy Osmani zu lesen. Es ist eine der besten Ressourcen, die Sie über Entwurfsmuster in JavaScript finden können.

Assets-Pack

Jetzt, da wir uns dem Ende dieses Artikels nähern, möchte ich einige Gedanken zur Verwaltung von CSS- und JavaScript-Code auf dem Server teilen. Es ist eine sehr verbreitete Technik, der Logik der Anwendung das Zusammenführen, Minimieren und Kompilieren hinzuzufügen. Oft gibt es eine Art Caching-Mechanismus, aber alle Dinge passieren zur Laufzeit. Sie haben also wahrscheinlich eine Codelogik, die die Anforderung von .js- oder .css-Dateien verarbeitet und den richtigen Inhalt bereitstellt. Hinter diesem Prozess steht die Kompilierung, Minimierung oder was auch immer Sie zum Packen Ihrer Assets verwenden.

In meinen letzten Projekten habe ich ein Tool namens Assets-Pack verwendet. Es ist wirklich hilfreich und ich werde im Detail erklären, was genau es tut, aber der interessantere Teil ist, wie ich es verwendet habe. Diese Bibliothek darf nur im Entwicklungsmodus verwendet werden. Sie verbleibt nicht in Ihrer Codebasis und sollte nicht auf Ihrem Produktionsserver bereitgestellt werden.

Die Idee ist, den Packer nur zu verwenden, während Sie an den Assets (CSS, JS) arbeiten. Es sucht tatsächlich nach Änderungen in bestimmten Verzeichnissen und kompiliert / packt den Code in eine einzelne Datei. Bei Verwendung dieses Ansatzes müssen Sie nicht über die Minimierung oder Kompilierung nachdenken. Sie müssen lediglich die kompilierte statische Datei an den Benutzer senden. Dies erhöht die Leistung Ihrer Anwendung, da nur statische Dateien bereitgestellt werden und die Dinge natürlich einfacher werden. Sie müssen nichts auf Ihrem Server einstellen oder unnötige Logik implementieren.

Hier erfahren Sie, wie Sie das Assets-Pack einrichten und verwenden können.

Installation

Dieses Tool ist ein Nodejs-Modul, daher sollte Node bereits installiert sein. Wenn Sie dies nicht tun, gehen Sie einfach zu nodejs.org/download und holen Sie sich das Paket für Ihr Betriebssystem. Danach:

1	npm install -g assetspack

Verwendung

Das Modul arbeitet mit der JSON-Konfiguration. Wenn es über die Befehlszeile verwendet wird, sollten Sie Ihre Einstellungen in einer .json-Datei ablegen.

Über die Kommandozeile

Erstellen Sie eine Datei assets.json und führen Sie den folgenden Befehl im selben Verzeichnis aus:

1	assetspack

Wenn Ihre Konfigurationsdatei einen anderen Namen verwendet oder sich in einem anderen Verzeichnis befindet, verwenden Sie:

1	assetspack --config [path to json file]

In Code

var AssetsPack = require("assetspack");
var config = [
    {
        type: "css",
        watch: ["css/src"],
        output: "tests/packed/styles.css",
        minify: true,
        exclude: ["custom.css"]
    }
];
var pack = new AssetsPack(config, function() {
    console.log("AssetsPack is watching");
});
pack.onPack(function() {
    console.log("AssetsPack did the job"); 
});

Aufbau

Die Konfiguration sollte eine gültige JSON-Datei / ein gültiges JSON-Objekt sein. Es ist nur eine Reihe von Objekten:

[
    (asset object),
    (asset object),
    (asset object),
    ...
]

Asset-Objekt

Die Grundstruktur des Asset-Objekts sieht folgendermaßen aus:

{
    type: (file type /string, could be css, js or less for example),
    watch: (directory or directories for watching /string or array of strings/),
    pack: (directory or directories for packing /string or array of strings/. ),
    output: (path to output file /string/),
    minify: /boolean/,
    exclude: (array of file names)
}

Die pack-Eigenschaft ist nicht obligatorisch. Wenn Sie es verpassen, ist sein Wert gleich zu watch. minify ist standardmäßig false.

Hier einige Beispiele:

CSS-Packung

{
    type: "css",
    watch: ["tests/data/css", "tests/data/css2"],
    pack: ["tests/data/css", "tests/data/css2"],
    output: "tests/packed/styles.css",
    minify: true,
    exclude: ["header.css"]
}

JavaScript-Packung

{
    type: "js",
    watch: "tests/data/js",
    pack: ["tests/data/js"],
    output: "tests/packed/scripts.js",
    minify: true,
    exclude: ["A.js"]
}

`.less`-Dateien -Packung

Das Packen von .less-Dateien ist etwas anders. Die pack-Eigenschaft ist obligatorisch und im Grunde Ihr Einstiegspunkt. Sie sollten dort alle anderen .less-Dateien importieren. Die Eigenschaft exclude ist hier nicht verfügbar.

{
    type: "less",
    watch: ["tests/data/less"],
    pack: "tests/data/less/index.less",
    output: "tests/packed/styles-less.css",
    minify: true
}

Wenn Sie Probleme finden, überprüfen Sie bitte die Datei tests/packing-less.spec.js des Repositorys in GitHub.

Andere Dateiformate packen

assets-pack funktioniert mit jedem Dateiformat. Zum Beispiel können wir HTML-Vorlagen zu einer einzigen Datei kombinieren, indem wir Folgendes tun:

{
    type: "html",
    watch: ["tests/data/tpl"],
    output: "tests/packed/template.html",
    exclude: ["admin.html"]
}

Das einzige, was Sie wissen müssen, ist, dass es keine Minimierung gibt.

Abschluss

Als Front-End-Webentwickler müssen wir versuchen, unseren Benutzern die bestmögliche Leistung zu bieten. Die obigen Tipps sollen nicht alle Aspekte der Organisation und Leistung von Assets abdecken, aber sie sind diejenigen, mit denen ich mich während meiner täglichen Arbeit persönlich befasst habe. Bitte zögern Sie nicht, einige Ihrer Tipps unten in den Kommentaren zu teilen.