LU16c - Bundling, Minify & Deploy [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== LU16c - Bundling, Minify & Deploy ======

Bevor eine Vue.js-App veröffentlicht werden kann, muss sie **gebundelt** werden. Dieser Schritt optimiert alle Dateien für den Produktionseinsatz und erstellt einen ''dist''-Ordner, der auf einem Server bereitgestellt werden kann.

===== npm run build =====

Der Befehl ''npm run build'' startet den Vite-Build-Prozess.

<WRAP center round box 80%>
<code bash>
npm run build
</code>
</WRAP>


{{:de:modul:m291:learningunits:lu16:theorie:screenshot_2026-06-28_at_23.17.53.png?direct&900| Terminal-Output nach npm run build }}\\
//Platzhalter: Screenshot Terminal mit Build-Output – Dateigrössen, Chunk-Namen, Dauer//


Nach dem Build liegt ein neuer Ordner ''dist/'' im Projekt:
{{:de:modul:m291:learningunits:lu16:theorie:scap_20260628231953_1.png?direct&600| Inhalt des dist-Ordners }}\\
//Screenshot VS Code Explorer mit dist-Ordner: index.html, assets/-Unterordner mit .js und .css Dateien//


Dieser ''dist/''-Ordner enthält alles, was für den Betrieb der App nötig ist – kein Node.js, kein Vite, keine Vue-Komponenten.


===== Minification =====

**Minification** bedeutet: überflüssige Zeichen aus dem Code entfernen, ohne die Funktion zu verändern.
<WRAP center round box 80%>
^ Vorher (Entwicklung) ^ Nachher (Production) ^
| Zeilenumbrüche, Einrückungen | Alles in einer Zeile |
| Lange Variablennamen | Kurze Namen (''a'', ''b'', ''fn'') |
| Kommentare | Entfernt |
</WRAP>

{{:de:modul:m291:learningunits:lu16:theorie:scap_20260628232427_1.png?direct&1100 | Vergleich: lesbarer Code vs. minifizierter Code }}\\
//Zwei Code-Blöcke nebeneinander – links normal, rechts minifiziert//

**Ziel:** Kleinere Dateigrösse → kürzere Ladezeit für die Nutzerin / den Nutzer.

<WRAP center round info 80%>
Vite minifiziert automatisch bei ''npm run build''. Sie müssen nichts zusätzlich konfigurieren.
</WRAP>

===== Chunking & Tree Shaking =====

Vite teilt den JavaScript-Code automatisch in **mehrere kleine Dateien (Chunks)** auf, anstatt alles in eine grosse Datei zu schreiben.

**Chunking:** Der Browser lädt nur den Code, den er gerade braucht – nicht alles auf einmal.

**Tree Shaking:** Code, der im Projekt importiert aber nie verwendet wird, wird automatisch aus dem Build entfernt.


===== Deploy: Mit Git (Vercel, Netlify, Render) =====

Die meisten modernen Hosting-Plattformen verbinden sich mit einem GitHub-Repository und deployen automatisch, sobald neuer Code gepusht wird.


{{:de:modul:m291:learningunits:lu16:theorie:screenshot_2026-06-28_at_23.26.39.png?direct&1100 | Deploy-Workflow mit Git: Code → GitHub → Hoster → Live }}\\
//Development → Code push zu GitHub → Vercel/Netlify/Render → Preview → Production (Live)//

<WRAP center round center 80%>
^ Anbieter ^ Kostenlos ^ Besonderheit ^
| [[https://vercel.com|Vercel]] | ✅ (Hobby-Plan) | Sehr schnell, optimiert für Vue/React/Next.js |
| [[https://netlify.com|Netlify]] | ✅ (Starter-Plan) | Netlify Drop für direktes Hochladen möglich |
| [[https://render.com|Render]] | ✅ (mit Einschränkungen) | Auch für Backend-Services geeignet |
</WRAP>
<WRAP center round box 80%>
**Voraussetzung:** Ein GitHub-Account und ein Repository mit dem Projektcode. Diese Plattformen eignen sich ideal für Teams, die mit Git arbeiten.
</WRAP>

===== Deploy: Ohne Git (Surge.sh & Netlify Drop) =====

Für den Unterricht – ohne Git-Kenntnisse – gibt es zwei einfachere Wege:

{{:de:modul:m291:learningunits:lu16:theorie:scap_20260628233044_1.png?direct&1100| Deploy ohne Git: npm run build → dist → surge.sh → Live-URL }}\\
//Vue.js mit npm run build und surge.sh deployen//

==== Option A: Surge.sh (Terminal-Weg) ====

<WRAP center round box 80%>
<code bash>
npm run build
cd dist
npx surge
</code>
</WRAP>

Surge fragt beim ersten Start nach E-Mail und Passwort (kostenlose Registrierung direkt im Terminal). Anschliessend wählen Sie eine Domain:

<WRAP center round box 80%>
<code bash>
domain: vorname-faq.surge.sh
</code>
</WRAP>


{{:de:modul:m291:learningunits:lu16:theorie:scap_20260628121309_1.png?direct&900| Terminal mit surge-Befehl und erfolgreicher Ausgabe inkl. URL }}\\
//Screenshot Terminal – surge-Befehl, Registrierung, gewählte Domain, grüne Erfolgsanzeige//

✅ Die App ist live unter ''https://vorname-faq.surge.sh''

==== Option B: Netlify Drop (Drag-and-Drop) ====

  - ''npm run build'' ausführen
  - [[https://app.netlify.com/drop|app.netlify.com/drop]] im Browser öffnen
  - Den ''dist/''-Ordner per Drag-and-Drop ins Browserfenster ziehen
  - Fertig – Netlify erstellt sofort eine öffentliche URL


<WRAP center round box 80%>
**Hinweis:** Ohne Konto ist die Netlify-Drop-URL nur ca. 1 Stunde aktiv. Mit kostenlosem Konto (keine Kreditkarte nötig) bleibt sie dauerhaft erreichbar.
</WRAP>

===== Vergleich: Deploy-Optionen =====
<WRAP center round box 80%>
^ ^ Surge.sh ^ Netlify Drop ^ Vercel / Netlify / Render ^
| **Git nötig?** | Nein | Nein | Ja |
| **Terminal nötig?** | Ja | Nein | Nein |
| **Aufwand** | Gering | Sehr gering | Mittel (Einrichtung) |
| **Geeignet für** | Unterricht, Demos | Unterricht, schnelle Tests | Echte Projekte |
| **Automatisches Re-Deploy** | Nein | Nein | Ja (bei Git-Push) |
| **Gratis** | ✅ | ✅ | ✅ (mit Limits) |
| **Eigene Domain** | Ja | Nein | Ja |
</WRAP>
===== Zusammenfassung: Der komplette Ablauf =====

<WRAP center round box 80%>
<code bash>
# 1. App für Production optimieren
npm run build

# 2. In den dist-Ordner wechseln
cd dist

# 3. Deployen mit Surge
npx surge
</code>
</WRAP>

Nach diesen drei Befehlen ist die Vue.js-App unter einer echten, öffentlichen URL erreichbar.