HTML5-Tutorium: JavaScript: Hello World 05: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
(44 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} | {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} | ||
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/ | '''Musterlösung'''<br/> | ||
v03a: [https://glossar.hs-augsburg.de/beispiel/tutorium/2023/wk_hello_world/wk_hello_world_05/web_v03a/index.html <code>index.html</code>]<br/> | |||
v03b: [https://glossar.hs-augsburg.de/beispiel/tutorium/2023/wk_hello_world/wk_hello_world_05/web_v03b/index.html <code>index.html</code>]<br/> | |||
v04a: [https://glossar.hs-augsburg.de/beispiel/tutorium/2023/wk_hello_world/wk_hello_world_05/web_v04a/index.html <code>index.html</code>]<br/> | |||
v04b: [https://glossar.hs-augsburg.de/beispiel/tutorium/2023/wk_hello_world/wk_hello_world_05/web_v04b/index.html <code>index.html</code>]<br/> | |||
v05: [https://glossar.hs-augsburg.de/beispiel/tutorium/2023/wk_hello_world/wk_hello_world_05/web_v05/index.html <code>index.html</code>] (Modularisierung von <code>greet.js</code> analog zu [[HTML5-Tutorium: JavaScript: Hello World 04|Hello World 04]] v02)<br/> | |||
v06: [https://glossar.hs-augsburg.de/beispiel/tutorium/2023/wk_hello_world/wk_hello_world_05/web_v06/index.html <code>index.html</code>] (Konfiguration mittels JSON analog zu [[HTML5-Tutorium: JavaScript: Hello World 04|Hello World 04]] v03)<br/> | |||
[{{Git-Server}}/kowa/wk_hello_world_05.git Git-Repository] | |||
==Anwendungsfälle (Use Cases)== | ==Anwendungsfälle (Use Cases)== | ||
Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]] | Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten (und dem vierten) Teil des Tutoriums]] | ||
ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor. | ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor. | ||
In diesem Teil des Tutoriums geht es darum, die Anwendung mittels [[Vite]]<ref name="vite">[https://vitejs.dev/ Vite-Homepage]</ref> automatisch für den Server-Betrieb zu optimieren, sodass möglichst wenige, möglichst kleine Dateien zum Client übertragen werden | In diesem Teil des Tutoriums geht es darum, die Anwendung mittels [[Vite|Vite 4]]<ref name="vite">[https://vitejs.dev/ Vite-Homepage]</ref> automatisch für den Server-Betrieb zu optimieren, sodass möglichst wenige, möglichst kleine Dateien zum Client übertragen werden. | ||
==JavaScript Module Bundlers== | ==JavaScript Module Bundlers== | ||
Zeile 37: | Zeile 41: | ||
</source> | </source> | ||
Öffnen Sie das Projekt in VSC und öffnen Sie in VSC ein zugehöriges Terminal (für den neuen Projektordner). | Öffnen Sie das Projekt in Visual Studio Code (VSC) und öffnen Sie in VSC ein zugehöriges Terminal (für den neuen Projektordner). | ||
Führen Sie folgende Befehle aus: | Führen Sie folgende Befehle aus: | ||
Zeile 78: | Zeile 82: | ||
export default | export default | ||
{ root: 'src', | { root: 'src', | ||
publicDir: '../public', | publicDir: '../public', | ||
base: '', | |||
build: | build: | ||
{ outDir: '../web', | { outDir: '../web', | ||
minify: true | minify: true, | ||
} | } | ||
} | } | ||
Zeile 87: | Zeile 92: | ||
Diese legt Folgendes fest: | Diese legt Folgendes fest: | ||
* Der Root-Ordner des Projekts befindet sich im Unterordner <code>src</code> des Projektordners. Dort hinein kommen die ganzen HTML-/CSS-/JS-Dateien und Medien, die unter Kontrolle von Vite stehen sollen. | * Der Root-Ordner des Projekts befindet sich im Unterordner <code>src</code> des Projektordners. Dort hinein kommen die ganzen HTML-/CSS-/JS-Dateien und Medien, die unter Kontrolle von Vite stehen sollen. | ||
* Der Ordner <code>public</code>, in dem alle Dateien enthalten sind, die von Vite '''nicht''' verändert werden, befindet sich weiterhin im Unterordner <code>public</code> des Projektordners. Vom Projektordner <code>src</code> aus gesehen, | * Der Ordner <code>public</code>, in dem alle Dateien enthalten sind, die von Vite '''nicht''' verändert werden, befindet sich weiterhin im Unterordner <code>public</code> des Projektordners. Vom Projektordner <code>src</code> aus gesehen, liegt er außerhalb von <code>src</code> eine Ebene höher. Das heißt, er befindet sich in der Ordnerhierarchie auf derselben Ebene wie <code>src</code> selbst. | ||
* Die Option <code>base</code> enthält einen String, der vor jeden Asset-Pfad (<code>.css</code>, <code>.js</code>, <code>.jpg</code> ...) eingefügt wird. Standardmäßig lautet der Wert <code>'/'</code>. Das heißt, die zugehörigen Assetpfade sind absolut. Sie beginnen stets beim Top-Level-Verzeichnis der Web-App. Mit der Option <code>base: ''</code> legt man fest, dass die Pfade relativ sind. Das hat den Vorteil, dass man die Web-App in einen Unterordner einer anderen Web-App legen kann. Beispielsweise liegen die Musterlösungen dieser Aufgabe in Underordnern des Glossars: [https://glossar.hs-augsburg.de/beispiel/tutorium/2023/wk_hello_world/wk_hello_world_05/web/index.html <code>index.html</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2023/wk_hello_world/wk_hello_world_05/web_v03a/index.html <code>index.html (v03a)</code>] etc. | |||
* Wenn Sie das Projekt mittels <code>npm run build</code> für den Produktivbetrieb erstellen lassen, wird das Ergebnis in den Ordner <code>web</code> geschrieben. Dieser Ordner liegt ebenfalls auf derselben Ebene wie <code>src</code>. | * Wenn Sie das Projekt mittels <code>npm run build</code> für den Produktivbetrieb erstellen lassen, wird das Ergebnis in den Ordner <code>web</code> geschrieben. Dieser Ordner liegt ebenfalls auf derselben Ebene wie <code>src</code>. | ||
* Durch <code>npm run build</code> wird komprimierter (minimized) Code erzeugt. Das gilt allerdings nicht für HTML-Dateien, sondern nur für CSS-, | * Durch <code>npm run build</code> wird komprimierter (minimized) Code erzeugt. Das gilt allerdings nicht für HTML-Dateien, sondern nur für CSS-, JavaScript-/TypeScript- und SVG-Dateien. | ||
Sie sollten in der Datei <code>package.json</code> im Skript <code>build</code> auch noch die Option <code>--emptyOutDir</code> ergänzen, | Sie sollten in der Datei <code>package.json</code> im Skript <code>build</code> auch noch die Option <code>--emptyOutDir</code> ergänzen, | ||
damit der Web-Ordner vor jedem Rebuild geleert wird. Ohne diese Option | damit der Web-Ordner vor jedem Rebuild geleert wird. Ohne diese Option sammeln sich im Web-Ordner im Laufe der Zeit Dateileichen an. | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Zeile 100: | Zeile 106: | ||
=== Restrukturierung des Projekts === | === Restrukturierung des Projekts === | ||
Wenn man nun das Projekt mittels <code>npm run dev</code> startet, wird man nichts sehen. Der Grund ist, dass der Browser keine Datei <code>index.html</code> findet | Wenn man nun das Projekt mittels <code>npm run dev</code> startet, wird man nichts sehen. Der Grund ist, dass der Browser keine Datei <code>index.html</code> findet, da der Vite-Server nun den Inhalt des Ordners <code>src</code> ausliefert. Diesen gibt es aber noch gar nicht. | ||
Die Ordnerstruktur des Projekts muss an die Konfigurationsdatei angepasst werden. | Die Ordnerstruktur des Projekts muss an die Konfigurationsdatei angepasst werden. | ||
Zeile 127: | Zeile 133: | ||
</pre> | </pre> | ||
Das Ergebnis ist, dass Sie Fehlermeldungen erhalten, | Das Ergebnis ist, dass Sie Fehlermeldungen erhalten, weil bestimmte Dateien nicht gefunden werden. | ||
Das liegt daran, dass sich die Ordnerstruktur aus Sicht der Dateien im <code>src</code>-Ordner geändert haben. | Das liegt daran, dass sich die Ordnerstruktur aus Sicht der Dateien im <code>src</code>-Ordner geändert haben. | ||
Die Pfade innerhalb der Dateien in diesem Ordner müssen daher angepasst werden. | Die Pfade innerhalb der Dateien in diesem Ordner müssen daher angepasst werden. | ||
Zeile 133: | Zeile 139: | ||
Die Pfade zu Dateien im <code>public</code>-Ordner bleiben gleich. Aus Sicht der Dateien im <code>src</code>-Ordner | Die Pfade zu Dateien im <code>public</code>-Ordner bleiben gleich. Aus Sicht der Dateien im <code>src</code>-Ordner | ||
befinden sie sich in der Root des Web-Auftritts. Im <code>public</code>-Ordner liegt in diesem Beispiel nur die Datei | befinden sie sich in der Root des Web-Auftritts. Im <code>public</code>-Ordner liegt in diesem Beispiel nur die Datei | ||
<code>vite.svg</code>. Deren Pfade | <code>vite.svg</code>. Deren Pfade ändern sich nicht, daher bleiben in den Dateien <code>src/index.html</code> und <code>src/js/main.js</code> die Zeilen | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Zeile 139: | Zeile 145: | ||
</source> | </source> | ||
bzw. | |||
<source lang="javascript"> | <source lang="javascript"> | ||
Zeile 158: | Zeile 164: | ||
Nehmen Sie geeignete Änderungen vor (sofern sie von VSC nicht automatisch durchgeführt wurden). | Nehmen Sie geeignete Änderungen vor (sofern sie von VSC nicht automatisch durchgeführt wurden). | ||
Modifizieren und testen Sie die App mit Hilfe von <code>npm run dev</code> solange, bis sie fehlerfrei läuft. | |||
== Packen der Web-Anwendung (Build, [https://gitlab.multimedia.hs-augsburg.de/kowa/wk_hello_world_05/-/tree/v02 Version 02]) == | |||
Bislang zeigt sich der Vorteil von Vite noch nicht wirklich. | |||
Der einzige Vorteil ist, dass CSS-Dateien auch in JavaScript-Dateien importiert werden können. | |||
Das ist im HTML-Standard nicht vorgesehen. | |||
Seine Stärke spielt Vite aus, wenn wir das Projekt packen. Das bedeutet, dass die Anzahl der Dateien | |||
reduziert wird und überflüssige Leerzeichen, Zeilenumbrüche, Kommentare etc. entfernt werden. | |||
Dadurch reduziert sich die Anzahl der Bytes, die zu einem Client (Browser) übertragen werden müssen, erheblich. | |||
Insbesondere für Smartphones mit einem geringen Datenvolumen profitieren davon. | |||
Intelligente Frameworks wie [[Vue]], [[Svelte]] oder [[React]] oder React gehen sogar noch einen Schritt weiter | |||
und laden nur die Teile einer Web-Seite (nicht Web-Site!) nach, die sich geändert haben. JavaScript-Bibliotheken werden so definiert, | |||
dass sie für eine ganze Web-Site nur einmal geladen werden müssen und für verschiedene Seiten wiederverwendet werden können. | |||
Hier spielen Web-Frameworks ihre Stärken aus. Sie stützen sich dabei auf Bundler wie Vite oder Webpack. | |||
Führen Sie folgenden Befehl aus: | |||
<source lang="bash"> | |||
npm run build | |||
</source> | |||
Durch diesen Befehl wird die Web-App gepackt und im Ordner <code>web</code> abgelegt. | |||
Öffnen Sie die Datei <code>web/index.html</code> mit Hilfe des Live-Server-Plugins und sehen Sie sich das Ergebnis an. | |||
Schauen Sie sich auch die generierten Dateien im Ordner <code>web</code> an. | |||
Testen Sie die Web-App dann, indem Sie entweder <code>web/index.html</code> mit dem Live Server von VSC starten | Testen Sie die Web-App dann, indem Sie entweder <code>web/index.html</code> mit dem Live Server von VSC starten | ||
Zeile 174: | Zeile 200: | ||
Wenn Sie die Produktivversion mittels <code>npm run build</code> erstellen möchten, muss es eine Datei <code>index.html</code> geben. | Wenn Sie die Produktivversion mittels <code>npm run build</code> erstellen möchten, muss es eine Datei <code>index.html</code> geben. | ||
Defaultmäßig wird nur diese in den Ordner <code> | Defaultmäßig wird nur diese in den Ordner <code>build</code> übernommen. Das heißt, wenn man beispielsweise die [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_HelloWorld04/-/tree/master/web Musterlösung von von WK_HelloWorld04] in den (zuvor geleerten) Ordner <code>src</code> kopiert, | ||
funktioniert diese Anwendung zwar im Developermoduls (<code>npm run dev</code>), aber nicht im Produktivmodus. Wenn man (für dieses Beispiel) | funktioniert diese Anwendung zwar im Developermoduls (<code>npm run dev</code>), aber nicht im Produktivmodus. Wenn man (für dieses Beispiel) | ||
<code>npm run build</code> ausführt, erhält man die Fehlermeldung | <code>npm run build</code> ausführt, erhält man die Fehlermeldung | ||
Zeile 182: | Zeile 208: | ||
</source> | </source> | ||
Die Lösung ist in diesem Fall ganz einfach. | Das Problem ist, dass es keine Datei <code>index.html</code> gibt. | ||
Die Lösung ist in diesem Fall ganz einfach. Nennen Sie eine der drei Dateien <code>index0.html</code>, <code>index1.html</code> oder <code>index2.html</code> in <code>index.html</code> um. Im Ordner <code>web</code> wird dann durch <code>npm run build</code> auch nur eine HTML-Datei namens <code>index.html</code> erzeugt. Das ist für unsere Zwecke in Ordnung, da wir mit Hilfe von Vue eine Single-Page-Anwendung erstellen werden. | |||
Die Inhalte einer derartigen Anwendung werden per JavaScript nachgeladen. Man benötigt also tatsächlich nur eine HTML-Datei. | Die Inhalte einer derartigen Anwendung werden per JavaScript nachgeladen. Man benötigt also tatsächlich nur eine HTML-Datei. | ||
Zeile 193: | Zeile 220: | ||
* https://rollupjs.org/configuration-options/#input | * https://rollupjs.org/configuration-options/#input | ||
== | == Verbesserungen ([https://gitlab.multimedia.hs-augsburg.de/kowa/wk_hello_world_05/-/tree/v04 Version 04]) == | ||
=== <code>head.css</code> inline und <code>body.css</code> dynamisch laden === | |||
Zur Erinnerung: | |||
* In <code>head.css</code> stehen möglichst wenig CSS-Anweisungen. Sie sollten ausreichen, um die aktuelle Seite “above the fold” („über dem Zeitungsknick“) fehlerfrei zu rendern. Das heißt, es sollte alles korrekt gerendert werden, was nach dem Laden im größtmöglichen Browserfenster sichtbar ist. | |||
* Der Inhalt der <code>head.css</code> sollte mittels des Style-Tags direkt in den Head-Bereich der HTML-Seite eingefügt werden. | |||
* Die restlichen CSS-Anweisungen werden in die Datei <code>body.css</code> eingetragen. | |||
* Dies Datei sollte asynchron, {{dh}} parallel zum Body-Element geladen werden. | |||
Verwenden Sie im Style-Tag die Import-Anweisung, um die Datei <code>css/head.css</code> einzubinden. Dadurch wird erreicht, dass der Inhalt dieser Datei beim Bündeln direkt in die HTML-Datei eingebunden wurde (inline) und der Browser diese Datei nicht zusätzlich zu laden braucht. | |||
<source lang="javascript"> | <source lang="javascript"> | ||
<style> | |||
@import url("css/head.css"); | |||
</style> | |||
</source> | </source> | ||
Der Hack, der im [[HTML5-Tutorium: JavaScript: Hello World 04|Teil 4]] zu asynchronen Laden von <code>body.css</code> angewendet wurde, funktioniert leider nicht mehr, da Vite das Element folgendermaßen transformiert. | |||
<source lang="javascript"> | <source lang="javascript"> | ||
<link rel="stylesheet" href="data:text/css;base64,LyoNCiAqIEBhdXRob3IgICAgV29s...==" | |||
media="none" onload="this.media='all'" | |||
/> | |||
</source> | </source> | ||
Das heißt, der Inhalt der Datei <code>body.css</code> wird Base64-enkodiert und direkt in das Link-Element eingefügt. Der ganze Inhalt der CSS-Datei ist jetzt Bestandteil der Datei <code>index.html</code> und wird vor den Body-Inhalten geladen. Ziel des Hack war es ja gerade, dies zu vermeiden. | |||
In Vite gibt es jedoch eine andere Möglichkeit, CSS-Dateien dynamisch zu laden. Man kann sie mittels JavaScript laden (vgl. [[https://gitlab.multimedia.hs-augsburg.de/kowa/wk_hello_world_05/-/blob/v02/src/js/main.js <code>main.js</code> der Vite-App]]). | |||
</ | |||
Wenn man das Vite-Plugin <code>cssInjectedByJsPlugin</code> verwendet, werden die CSS-Dateien von Vite nicht statisch in die HTML-Datei eingefügt, sondern in der JavaScript-Datei dynamisch zur Laufzeit im Browser geladen und erst im Browser in die HTML-Datei eingefügt. Das zugehörige NPM-Package müssen Sie zunächst installieren: | |||
<source lang=" | <source lang="bash"> | ||
npm i -D vite-plugin-css-injected-by-js | |||
</source> | </source> | ||
Anschließend wird das Plugin in <code>vite.config.js</code> konfiguriert. | |||
<source lang="javascript"> | <source lang="javascript"> | ||
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' | |||
export default | |||
{ root: 'src', | |||
publicDir: '../public', | |||
base: '', | |||
{ .. | build: | ||
{ outDir: '../web', | |||
minify: true, | |||
}, | }, | ||
plugins: | |||
[ cssInjectedByJsPlugin(), | |||
] | |||
} | |||
} | |||
</source> | </source> | ||
Schreiben Sie die Hello-World-App entsprechend um. | |||
=== HTML komprimieren === | |||
Wenn man sich die Dateien im Web-Ordner ansieht, bemerkt man, dass nur die JavaScript- und CSS-Dateien gebündelt und verkleinert werden. Die HTML wurde dagegen nicht komprimiert. Um dies zu erreichen, benötigt man ein weitere Vite-Plugin. Das zugehörige NPM-Package wird ebenfalls installiert: | |||
<source lang="bash"> | <source lang="bash"> | ||
npm i -D vite-plugin-html | |||
npm i -D | |||
</source> | </source> | ||
Anschließend muss das Plugin wieder in <code>vite.config.js</code> konfiguriert werden, in dem es zunächst importiert wird: | |||
<source lang="javascript"> | <source lang="javascript"> | ||
import { createHtmlPlugin } from "vite-plugin-html" | |||
</source> | </source> | ||
wird | Anschließend wird der Initialisierungsbefehl in das Array <code>plugins</code> eingefügt. Diesmal wird allerdings zusätzlich ein | ||
Konfigurationsparameter übergeben, der die Komprimierung der HTML-Datei veranlasst: | |||
<source lang="javascript"> | <source lang="javascript"> | ||
createHtmlPlugin({ minify: true }) | |||
</source> | </source> | ||
Der HTML-Minimizer komprimiert auch CSS-Anweisungen, die im HTML-Code enthalten sind. In unseren Fall ist das der Inhalt der Datei | |||
<code>head.css</code>, der wegen des <code>@import</code>-Befehls von Vite direkt in die HTML-Datei eingefügt wird. | |||
=== Lizenzkommentare entfernen === | |||
Ein Problem besteht noch. Die Lizenzkommentare werden in die komprimierten CSS- und JavaScript-Dateien eingefügt. Das kann gewünscht sein, kostet aber Platz. Das Problem kann man zumindest für JavaScript-Dateien beheben, indem man den Minimizer <code>terser</code> verwendet. Dieser bietet zahlreiche Konfigurationsmöglichkeiten an (ist allerdings beim Komprimieren wesentlich langsamer als der Standard-Minimizer). Schreiben Sie in der Datei | |||
<code>vite.config.js</code> an Stelle von | |||
<source lang="javascript"> | <source lang="javascript"> | ||
minify: true, | |||
</source> | </source> | ||
folgende Konfigurationsanweisungen: | |||
<source lang="javascript"> | <source lang="javascript"> | ||
minify: 'terser', | |||
terserOptions: | |||
{ output: { comments: false } }, | |||
}, | |||
</source> | </source> | ||
Für den CSS-Minimizer habe ich bislang keine entsprechenden Optionen gefunden. Schade. | |||
Aber das Problem lässt sich ganz einfach beheben, indem man in CSS-Dateien keine [[JSDoc]]-Kommentare verwendet (was ja durchaus auch sinnvoll ist, da CSS keinen JavaScript-Code enthält). Anstelle von | |||
<source lang="css"> | |||
/** | |||
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de> | |||
* @copyright 2016-2023 | |||
* @license MIT | |||
*/ | |||
<source lang=" | |||
</source> | </source> | ||
können Sie beispielsweise | |||
<source lang="css"> | |||
/* | |||
<source lang=" | * author Wolfgang Kowarschick <kowa@hs-augsburg.de> | ||
* copyright 2016-2023 | |||
* license MIT | |||
*/ | |||
</source> | </source> | ||
schreiben. | |||
== Google PageSpeed Insights == | |||
Überprüfen Sie IHre eigenen Lösungen oder die Musterlösungen wieder mit [https://developers.google.com/speed/pagespeed/insights/ Google PageSpeed Insights]. | |||
* Google PageSpeed Insights [https://pagespeed.web.dev/report?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2023%2Fwk_hello_world%2Fwk_hello_world_05%2Fweb_v03b%2Findex.html Version 03b]: Ressourcen beseitigen, die das Rendering blockieren: <code>…assets/index-91faa27d.css</code> | |||
</ | |||
* Google PageSpeed Insights [https://pagespeed.web.dev/report?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2023%2Fwk_hello_world%2Fwk_hello_world_05%2Fweb_v04b%2Findex.html Version 04b]: Es werden noch SEO-Probleme gemeldet. Das Dokument enthält keine Meta-Beschreibungen und die dynamisch eingelesenen CSS-Anweisungen können von Google nicht analysiert werden. Außerdem wird weiteres Optimierungspotential genannt (siehe nachfolgenden Abschnitt). | |||
=== Weiteres Optimierungspotenzial === | === Weiteres Optimierungspotenzial === | ||
Google PageSpeed Insights [https:// | Google PageSpeed Insights ist mit [https://pagespeed.web.dev/report?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2023%2Fwk_hello_world%2Fwk_hello_world_05%2Fweb_v04b%2Findex.html Version 04b] ist immer noch nicht ganz zufrieden. | ||
Zum einen sollten die Anzahl der Dateien (zwei) und die Dateigrößen weiter reduziert werden, was aber schwierig ist. | Zum einen sollten die Anzahl der Dateien (zwei) und die Dateigrößen weiter reduziert werden, was aber schwierig ist. | ||
Man könnte eine Datei <code>budget.json</code> definieren, die Google mitteilt, welche Dateianzahl und welche Dateigrößen man | Man könnte eine Datei <code>budget.json</code> definieren, die Google mitteilt, welche Dateianzahl und welche Dateigrößen man | ||
für akzeptabel hält. | für akzeptabel hält. Dann erhält man erst ab diesen Werten eine Warnung. | ||
Zum anderen teilt einen Google das größte Element in der HTML-Seite mit. Hier gibt es tatsächlich noch Optimierungspotenzial, gerade bei | Zum anderen teilt einen Google das größte Element in der HTML-Seite mit. Hier gibt es tatsächlich noch Optimierungspotenzial, gerade bei | ||
Zeile 583: | Zeile 361: | ||
der Inhalt „above the fold“ („über dem Zeitungsknick“) in der HTML-Seite enthalten ist. Das ist der Bereich, den der Benutzer nach dem Laden der Seite | der Inhalt „above the fold“ („über dem Zeitungsknick“) in der HTML-Seite enthalten ist. Das ist der Bereich, den der Benutzer nach dem Laden der Seite | ||
ohne Scrollen sieht. Bei der Hello-World-Anwendung wäre das die Section mit der ID <code>section_form</code>. Alle übrigen Bestandteile | ohne Scrollen sieht. Bei der Hello-World-Anwendung wäre das die Section mit der ID <code>section_form</code>. Alle übrigen Bestandteile | ||
der HTML-Seite könnten dynamisch nachgeladen werden, sobald sie benötigt werden. Genauso funktioniert Google Maps: Es werden nur die Kacheln der Erdoberfläche in der Auflösung geladen, die momentan benötigt werden. Um Verzögerungen, die durch das Nachladen entstehen, | der HTML-Seite könnten dynamisch nachgeladen werden, sobald sie benötigt werden. Genauso funktioniert Google Maps: Es werden nur die Kacheln der Erdoberfläche in der Auflösung geladen, die momentan benötigt werden. Um Verzögerungen, die durch das Nachladen entstehen, gering zu halten, werden | ||
Randkacheln und Kacheln in benachbarter Auflösung schon mal im Voraus geladen, während der Benutzer die aktuellen Karte betrachtet. Es ist natürlich | Randkacheln und Kacheln in benachbarter Auflösung schon mal im Voraus geladen, während der Benutzer die aktuellen Karte betrachtet. Es ist natürlich | ||
nicht sichergestellt, dass die Kacheln tatsächlich irgendwann angezeigt werden müssen. Aber es ist wahrscheinlich. Und daher wird der potenziell | nicht sichergestellt, dass die Kacheln tatsächlich irgendwann angezeigt werden müssen. Aber es ist wahrscheinlich. Und daher wird der potenziell | ||
unnötige Datenverkehr in Kauf genommen. Hier kommt es auf die Abwägung zwischen User Experience (möglichst kurze Wartezeiten) | unnötige Datenverkehr in Kauf genommen. Hier kommt es auf die Abwägung zwischen User Experience (möglichst kurze Wartezeiten) | ||
und Energie- und Kosteneffizienz (möglichst geringes Transfervolumen) an. | und Energie- und Kosteneffizienz (möglichst geringes Transfervolumen) an. | ||
In den späteren Tutorien wird [[Vue]] zum Erstellen von Web-Anwendungen verwendet. Hier werden, da es sich um Single-Page-Anwendungen handelt, Seiteninhalte automatisch dynamisch nachgeladen. Das heißt, man kann die Forderung, Seiten klein zu halten, sehr einfach erfüllen. | |||
Das Transfervolumen kann weiter reduziert werden, indem die Dateien vor dem Ausliefern vom Server mittels [[gzip]] weiter komprimiert werden. Der Client muss sie dann erst wieder entpacken, bevor er sie verarbeiten kann. | Das Transfervolumen kann weiter reduziert werden, indem die Dateien vor dem Ausliefern vom Server mittels [[gzip]] weiter komprimiert werden. Der Client muss sie dann erst wieder entpacken, bevor er sie verarbeiten kann. | ||
Dies ist aber eine Server-Optimierung, die nicht mit | Dies ist aber eine Server-Optimierung, die üblicherweise nicht mit Vite oder einen vergleichbaren Tool realisiert wird. | ||
==Fortsetzung des Tutoriums== | ==Fortsetzung des Tutoriums== | ||
Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World 06|Teil 6 des Tutoriums]] bearbeiten. | Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World 06|Teil 6 des Tutoriums]] bearbeiten. | ||
In diesem Teil des Tutoriums wird ausgenutzt, dass | In diesem Teil des Tutoriums wird ausgenutzt, dass von Vite SCSS, LESS etc. unterstützt wird. Damit kann man das Prinzip “[[don't repeat yourself|<strong>D</strong>on't <strong>R</strong>epeat <strong>Y</strong>ourself]]” (DRY) auch für CSS-Dateien umsetzen. | ||
==Quellen== | ==Quellen== | ||
<references/> | <references/> | ||
<ol> | <ol> | ||
<li value=" | <li value="4"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li> | ||
</ol> | </ol> | ||
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude> | <noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude> |
Version vom 21. April 2023, 17:57 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 3 (wichtige Quellen vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 3 (gut) |
Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6
Musterlösung
v03a: index.html
v03b: index.html
v04a: index.html
v04b: index.html
v05: index.html
(Modularisierung von greet.js
analog zu Hello World 04 v02)
v06: index.html
(Konfiguration mittels JSON analog zu Hello World 04 v03)
Git-Repository
Anwendungsfälle (Use Cases)
Gegenüber dem dritten (und dem vierten) Teil des Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.
In diesem Teil des Tutoriums geht es darum, die Anwendung mittels Vite 4[1] automatisch für den Server-Betrieb zu optimieren, sodass möglichst wenige, möglichst kleine Dateien zum Client übertragen werden.
JavaScript Module Bundlers
Um Module einer Web-Anwendung für die Auslieferung zum Client zu komprimieren, zu bündeln und anderweitig zu optimieren, gibt es zahlreiche Werkzeuge. Für Node.js gibt es die sogenannten “JavaScript Module Bundlers”, wie z. B. Vite[1], Webpack[2] oder Browserify[3].
Üblicherweise optimieren die Bundlers nicht nur JavaScript-Dateien, sondern auch HTML-, CSS-, JSON- und andere Dateien.
Erstellen eines neuen Vite-Projekts (Version 00)
Erstellen Sie ein neues Vite-Projekt hello_world_05
:
cd /webprog # Ordner, in dem Ihre Projekte liegen
npm create vite@latest
Geben Sie für Vite folgende Optionen an:
Project name: hello_world_05
Select a framework: Vanilla
Select a variant: JavaScript
Öffnen Sie das Projekt in Visual Studio Code (VSC) und öffnen Sie in VSC ein zugehöriges Terminal (für den neuen Projektordner). Führen Sie folgende Befehle aus:
npm i
npm run dev
Nun wird ein Server gestartet und eine URL angezeigt, die Sie in einem Browser öffnen können. Make it so!
Stellen Sie anschließend das Projekt unter Git-Kontrolle und speichern Sie es wieder in Gitlab.
Zur Erinnerung: .gitignore
Achtung: Bevor Sie einen Commit durchführen, müssen Sie im selben Ordner, in dem sich die Datei package.json
befindet, eine Datei namens .gitignore
anlegen, in dem eine Zeile mit dem Wort node_modules
enthalten ist. (Der Punkt zu Beginn des Dateinamens darf nicht fehlen!)
Glücklicherweise hat dies das Vite-Setup für Sie übernommen.
Diese Datei ist extrem wichtig. Wie Sie bereits im Node.js-Tutorium gesehen haben, enthält der
Ordner node_modules
sehr schnell sehr viele Dateien (mehrere Zehntausend).
Wenn Sie diese im Repository speichern, bläht sich dieses extrem stark auf. Die Git-Push- und -Pull-Befehle werden dadurch sehr langsam.
Die Datei .gitignore
dient dazu, dies zu verhindern. In jeder Zeile steht ein Dateiname oder ein Dateipattern (wie zum Beispiel *.log
, das alle Dateien mit der Dateiextension log
beschreibt), um zu verhindern, dass die zugehörigen Dateien ins Git-Repository eingefügt werden.
Wenn Sie dafür sorgen, die Dateien package.json
und package-lock.json
ins Repository eingefügt werden, kann ein anderer Benutzer, der Ihr Git-Repository auf seinen Rechner lädt, die fehlenden Node.js-Module jederzeit ganz einfach restaurieren:
npm i
Konfigurieren des Vite-Projekts Version 01
Das neu angelegte Projekt enthält keine Vite-Konfigurationsdatei. Defaultmäßig werden alle Dateien des Web-Projekts im Root-Ordner hello_world_05
abgelegt. Das ist – wie Sie bereits wissen – schlecht, da dort auch andere Dateien liegen, wie z. B. package.json
oder node_modules
.
Dies können Sie ändern, indem Sie eine Konfigurationsdatei vite.config.js
im Projektordner anlegen:
// https://vitejs.dev/config/
export default
{ root: 'src',
publicDir: '../public',
base: '',
build:
{ outDir: '../web',
minify: true,
}
}
Diese legt Folgendes fest:
- Der Root-Ordner des Projekts befindet sich im Unterordner
src
des Projektordners. Dort hinein kommen die ganzen HTML-/CSS-/JS-Dateien und Medien, die unter Kontrolle von Vite stehen sollen. - Der Ordner
public
, in dem alle Dateien enthalten sind, die von Vite nicht verändert werden, befindet sich weiterhin im Unterordnerpublic
des Projektordners. Vom Projektordnersrc
aus gesehen, liegt er außerhalb vonsrc
eine Ebene höher. Das heißt, er befindet sich in der Ordnerhierarchie auf derselben Ebene wiesrc
selbst. - Die Option
base
enthält einen String, der vor jeden Asset-Pfad (.css
,.js
,.jpg
...) eingefügt wird. Standardmäßig lautet der Wert'/'
. Das heißt, die zugehörigen Assetpfade sind absolut. Sie beginnen stets beim Top-Level-Verzeichnis der Web-App. Mit der Optionbase: ''
legt man fest, dass die Pfade relativ sind. Das hat den Vorteil, dass man die Web-App in einen Unterordner einer anderen Web-App legen kann. Beispielsweise liegen die Musterlösungen dieser Aufgabe in Underordnern des Glossars:index.html
,index.html (v03a)
etc. - Wenn Sie das Projekt mittels
npm run build
für den Produktivbetrieb erstellen lassen, wird das Ergebnis in den Ordnerweb
geschrieben. Dieser Ordner liegt ebenfalls auf derselben Ebene wiesrc
. - Durch
npm run build
wird komprimierter (minimized) Code erzeugt. Das gilt allerdings nicht für HTML-Dateien, sondern nur für CSS-, JavaScript-/TypeScript- und SVG-Dateien.
Sie sollten in der Datei package.json
im Skript build
auch noch die Option --emptyOutDir
ergänzen,
damit der Web-Ordner vor jedem Rebuild geleert wird. Ohne diese Option sammeln sich im Web-Ordner im Laufe der Zeit Dateileichen an.
"build": "vite build --emptyOutDir",
Restrukturierung des Projekts
Wenn man nun das Projekt mittels npm run dev
startet, wird man nichts sehen. Der Grund ist, dass der Browser keine Datei index.html
findet, da der Vite-Server nun den Inhalt des Ordners src
ausliefert. Diesen gibt es aber noch gar nicht.
Die Ordnerstruktur des Projekts muss an die Konfigurationsdatei angepasst werden.
Erstellen Sie folgende Ordnerstruktur:
src | css | img | js
Verschieben Sie anschließend die Web-Dateien in diese Ordner:
src | css - style.css | img - javascript.svg | js - counter.js - main.js - index.html
Das Ergebnis ist, dass Sie Fehlermeldungen erhalten, weil bestimmte Dateien nicht gefunden werden.
Das liegt daran, dass sich die Ordnerstruktur aus Sicht der Dateien im src
-Ordner geändert haben.
Die Pfade innerhalb der Dateien in diesem Ordner müssen daher angepasst werden.
Die Pfade zu Dateien im public
-Ordner bleiben gleich. Aus Sicht der Dateien im src
-Ordner
befinden sie sich in der Root des Web-Auftritts. Im public
-Ordner liegt in diesem Beispiel nur die Datei
vite.svg
. Deren Pfade ändern sich nicht, daher bleiben in den Dateien src/index.html
und src/js/main.js
die Zeilen
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
bzw.
<img src="/vite.svg" class="logo" alt="Vite logo" />
unverändert. Die anderen Pfade müssen dagegen eventuell angepasst werden:
// src/index.html
<script type="module" src="/main.js"></script>
// src/js/main.js
import './style.css'
import javascriptLogo from './javascript.svg'
import { setupCounter } from './counter.js'
Nehmen Sie geeignete Änderungen vor (sofern sie von VSC nicht automatisch durchgeführt wurden).
Modifizieren und testen Sie die App mit Hilfe von npm run dev
solange, bis sie fehlerfrei läuft.
Packen der Web-Anwendung (Build, Version 02)
Bislang zeigt sich der Vorteil von Vite noch nicht wirklich. Der einzige Vorteil ist, dass CSS-Dateien auch in JavaScript-Dateien importiert werden können. Das ist im HTML-Standard nicht vorgesehen.
Seine Stärke spielt Vite aus, wenn wir das Projekt packen. Das bedeutet, dass die Anzahl der Dateien reduziert wird und überflüssige Leerzeichen, Zeilenumbrüche, Kommentare etc. entfernt werden. Dadurch reduziert sich die Anzahl der Bytes, die zu einem Client (Browser) übertragen werden müssen, erheblich. Insbesondere für Smartphones mit einem geringen Datenvolumen profitieren davon.
Intelligente Frameworks wie Vue, Svelte oder React oder React gehen sogar noch einen Schritt weiter und laden nur die Teile einer Web-Seite (nicht Web-Site!) nach, die sich geändert haben. JavaScript-Bibliotheken werden so definiert, dass sie für eine ganze Web-Site nur einmal geladen werden müssen und für verschiedene Seiten wiederverwendet werden können. Hier spielen Web-Frameworks ihre Stärken aus. Sie stützen sich dabei auf Bundler wie Vite oder Webpack.
Führen Sie folgenden Befehl aus:
npm run build
Durch diesen Befehl wird die Web-App gepackt und im Ordner web
abgelegt.
Öffnen Sie die Datei web/index.html
mit Hilfe des Live-Server-Plugins und sehen Sie sich das Ergebnis an.
Schauen Sie sich auch die generierten Dateien im Ordner web
an.
Testen Sie die Web-App dann, indem Sie entweder web/index.html
mit dem Live Server von VSC starten
oder indem Sie npm run preview
eingeben.
Hello-World-App (Version 03)
Ersetzen Sie nun die Vite-Default-App durch die Hello-World-App aus dem 4. Teil des Tutoriums.
Wenn Sie die Produktivversion mittels npm run build
erstellen möchten, muss es eine Datei index.html
geben.
Defaultmäßig wird nur diese in den Ordner build
übernommen. Das heißt, wenn man beispielsweise die Musterlösung von von WK_HelloWorld04 in den (zuvor geleerten) Ordner src
kopiert,
funktioniert diese Anwendung zwar im Developermoduls (npm run dev
), aber nicht im Produktivmodus. Wenn man (für dieses Beispiel)
npm run build
ausführt, erhält man die Fehlermeldung
Could not resolve entry module "src/index.html".
Das Problem ist, dass es keine Datei index.html
gibt.
Die Lösung ist in diesem Fall ganz einfach. Nennen Sie eine der drei Dateien index0.html
, index1.html
oder index2.html
in index.html
um. Im Ordner web
wird dann durch npm run build
auch nur eine HTML-Datei namens index.html
erzeugt. Das ist für unsere Zwecke in Ordnung, da wir mit Hilfe von Vue eine Single-Page-Anwendung erstellen werden.
Die Inhalte einer derartigen Anwendung werden per JavaScript nachgeladen. Man benötigt also tatsächlich nur eine HTML-Datei.
Anmerkung
Sie können auch eine Anwendung mit diversen HTML-Dateien mit Hilfe von Vite bündeln und komprimieren. Dafür müssen Sie allerdings
eine so genannte Rollup-Konfiguration in die Datei vite.config.js
einfügen.
- https://support.glitch.com/t/only-index-html-is-generated-on-build/51574/6
- https://rollupjs.org/configuration-options/
- https://rollupjs.org/configuration-options/#input
Verbesserungen (Version 04)
head.css
inline und body.css
dynamisch laden
Zur Erinnerung:
- In
head.css
stehen möglichst wenig CSS-Anweisungen. Sie sollten ausreichen, um die aktuelle Seite “above the fold” („über dem Zeitungsknick“) fehlerfrei zu rendern. Das heißt, es sollte alles korrekt gerendert werden, was nach dem Laden im größtmöglichen Browserfenster sichtbar ist. - Der Inhalt der
head.css
sollte mittels des Style-Tags direkt in den Head-Bereich der HTML-Seite eingefügt werden. - Die restlichen CSS-Anweisungen werden in die Datei
body.css
eingetragen. - Dies Datei sollte asynchron, d. h. parallel zum Body-Element geladen werden.
Verwenden Sie im Style-Tag die Import-Anweisung, um die Datei css/head.css
einzubinden. Dadurch wird erreicht, dass der Inhalt dieser Datei beim Bündeln direkt in die HTML-Datei eingebunden wurde (inline) und der Browser diese Datei nicht zusätzlich zu laden braucht.
<style>
@import url("css/head.css");
</style>
Der Hack, der im Teil 4 zu asynchronen Laden von body.css
angewendet wurde, funktioniert leider nicht mehr, da Vite das Element folgendermaßen transformiert.
<link rel="stylesheet" href="data:text/css;base64,LyoNCiAqIEBhdXRob3IgICAgV29s...=="
media="none" onload="this.media='all'"
/>
Das heißt, der Inhalt der Datei body.css
wird Base64-enkodiert und direkt in das Link-Element eingefügt. Der ganze Inhalt der CSS-Datei ist jetzt Bestandteil der Datei index.html
und wird vor den Body-Inhalten geladen. Ziel des Hack war es ja gerade, dies zu vermeiden.
In Vite gibt es jedoch eine andere Möglichkeit, CSS-Dateien dynamisch zu laden. Man kann sie mittels JavaScript laden (vgl. [main.js
der Vite-App]).
Wenn man das Vite-Plugin cssInjectedByJsPlugin
verwendet, werden die CSS-Dateien von Vite nicht statisch in die HTML-Datei eingefügt, sondern in der JavaScript-Datei dynamisch zur Laufzeit im Browser geladen und erst im Browser in die HTML-Datei eingefügt. Das zugehörige NPM-Package müssen Sie zunächst installieren:
npm i -D vite-plugin-css-injected-by-js
Anschließend wird das Plugin in vite.config.js
konfiguriert.
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default
{ root: 'src',
publicDir: '../public',
base: '',
build:
{ outDir: '../web',
minify: true,
},
plugins:
[ cssInjectedByJsPlugin(),
]
}
Schreiben Sie die Hello-World-App entsprechend um.
HTML komprimieren
Wenn man sich die Dateien im Web-Ordner ansieht, bemerkt man, dass nur die JavaScript- und CSS-Dateien gebündelt und verkleinert werden. Die HTML wurde dagegen nicht komprimiert. Um dies zu erreichen, benötigt man ein weitere Vite-Plugin. Das zugehörige NPM-Package wird ebenfalls installiert:
npm i -D vite-plugin-html
Anschließend muss das Plugin wieder in vite.config.js
konfiguriert werden, in dem es zunächst importiert wird:
import { createHtmlPlugin } from "vite-plugin-html"
Anschließend wird der Initialisierungsbefehl in das Array plugins
eingefügt. Diesmal wird allerdings zusätzlich ein
Konfigurationsparameter übergeben, der die Komprimierung der HTML-Datei veranlasst:
createHtmlPlugin({ minify: true })
Der HTML-Minimizer komprimiert auch CSS-Anweisungen, die im HTML-Code enthalten sind. In unseren Fall ist das der Inhalt der Datei
head.css
, der wegen des @import
-Befehls von Vite direkt in die HTML-Datei eingefügt wird.
Lizenzkommentare entfernen
Ein Problem besteht noch. Die Lizenzkommentare werden in die komprimierten CSS- und JavaScript-Dateien eingefügt. Das kann gewünscht sein, kostet aber Platz. Das Problem kann man zumindest für JavaScript-Dateien beheben, indem man den Minimizer terser
verwendet. Dieser bietet zahlreiche Konfigurationsmöglichkeiten an (ist allerdings beim Komprimieren wesentlich langsamer als der Standard-Minimizer). Schreiben Sie in der Datei
vite.config.js
an Stelle von
minify: true,
folgende Konfigurationsanweisungen:
minify: 'terser',
terserOptions:
{ output: { comments: false } },
Für den CSS-Minimizer habe ich bislang keine entsprechenden Optionen gefunden. Schade. Aber das Problem lässt sich ganz einfach beheben, indem man in CSS-Dateien keine JSDoc-Kommentare verwendet (was ja durchaus auch sinnvoll ist, da CSS keinen JavaScript-Code enthält). Anstelle von
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2023
* @license MIT
*/
können Sie beispielsweise
/*
* author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* copyright 2016-2023
* license MIT
*/
schreiben.
Google PageSpeed Insights
Überprüfen Sie IHre eigenen Lösungen oder die Musterlösungen wieder mit Google PageSpeed Insights.
- Google PageSpeed Insights Version 03b: Ressourcen beseitigen, die das Rendering blockieren:
…assets/index-91faa27d.css
- Google PageSpeed Insights Version 04b: Es werden noch SEO-Probleme gemeldet. Das Dokument enthält keine Meta-Beschreibungen und die dynamisch eingelesenen CSS-Anweisungen können von Google nicht analysiert werden. Außerdem wird weiteres Optimierungspotential genannt (siehe nachfolgenden Abschnitt).
Weiteres Optimierungspotenzial
Google PageSpeed Insights ist mit Version 04b ist immer noch nicht ganz zufrieden.
Zum einen sollten die Anzahl der Dateien (zwei) und die Dateigrößen weiter reduziert werden, was aber schwierig ist.
Man könnte eine Datei budget.json
definieren, die Google mitteilt, welche Dateianzahl und welche Dateigrößen man
für akzeptabel hält. Dann erhält man erst ab diesen Werten eine Warnung.
Zum anderen teilt einen Google das größte Element in der HTML-Seite mit. Hier gibt es tatsächlich noch Optimierungspotenzial, gerade bei
Single-Page-Anwendungen. Eine Single-Page wird in der Regel auf einmal geladen, aber nur portionsweise angezeigt. Wichtig ist eigentlich nur, dass
der Inhalt „above the fold“ („über dem Zeitungsknick“) in der HTML-Seite enthalten ist. Das ist der Bereich, den der Benutzer nach dem Laden der Seite
ohne Scrollen sieht. Bei der Hello-World-Anwendung wäre das die Section mit der ID section_form
. Alle übrigen Bestandteile
der HTML-Seite könnten dynamisch nachgeladen werden, sobald sie benötigt werden. Genauso funktioniert Google Maps: Es werden nur die Kacheln der Erdoberfläche in der Auflösung geladen, die momentan benötigt werden. Um Verzögerungen, die durch das Nachladen entstehen, gering zu halten, werden
Randkacheln und Kacheln in benachbarter Auflösung schon mal im Voraus geladen, während der Benutzer die aktuellen Karte betrachtet. Es ist natürlich
nicht sichergestellt, dass die Kacheln tatsächlich irgendwann angezeigt werden müssen. Aber es ist wahrscheinlich. Und daher wird der potenziell
unnötige Datenverkehr in Kauf genommen. Hier kommt es auf die Abwägung zwischen User Experience (möglichst kurze Wartezeiten)
und Energie- und Kosteneffizienz (möglichst geringes Transfervolumen) an.
In den späteren Tutorien wird Vue zum Erstellen von Web-Anwendungen verwendet. Hier werden, da es sich um Single-Page-Anwendungen handelt, Seiteninhalte automatisch dynamisch nachgeladen. Das heißt, man kann die Forderung, Seiten klein zu halten, sehr einfach erfüllen.
Das Transfervolumen kann weiter reduziert werden, indem die Dateien vor dem Ausliefern vom Server mittels gzip weiter komprimiert werden. Der Client muss sie dann erst wieder entpacken, bevor er sie verarbeiten kann. Dies ist aber eine Server-Optimierung, die üblicherweise nicht mit Vite oder einen vergleichbaren Tool realisiert wird.
Fortsetzung des Tutoriums
Sie sollten nun Teil 6 des Tutoriums bearbeiten. In diesem Teil des Tutoriums wird ausgenutzt, dass von Vite SCSS, LESS etc. unterstützt wird. Damit kann man das Prinzip “Don't Repeat Yourself” (DRY) auch für CSS-Dateien umsetzen.
Quellen
- Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)