Metaverse Experience: webpack code splitting

Bei unserem Open-Source-Projekt spielt die Web-Performance eine große Rolle. Die ständige Optimierung von unserem Code ist eine ständige Herausforderung. Zurzeit richten wir eine Metaverse Experiences ein. Ziel ist es, dass Shopbetreiber einen immersiven Showroom bei unserem MyOOS Projekt erhalten.

Inhaltsangabe

Was ist ein immersiver Showroom für Shopbetreiber?

Ein immersiver Showroom für Shopbetreiber ist ein Raum, in dem Produkte oder Dienstleistungen in einem ansprechenden und interaktiven Kontext präsentiert werden. Ein immersiver Showroom bietet den Besuchern ein Erlebnis, das alle Sinne anspricht und sie in die Welt der Marke oder des Unternehmens eintauchen lässt. Dabei werden verschiedene Technologien wie Virtual Reality, Augmented Reality, Projektionen, Audio, Video, Licht und interaktive Elemente eingesetzt, um eine Geschichte oder eine Szene zu erzählen, die mit den Produkten oder Dienstleistungen verbunden ist.

Ein immersiver Showroom hat mehrere Vorteile für Shopbetreiber, wie zum Beispiel:

Erhöhte Kundenbindung: Kunden, die ein einzigartiges Erlebnis haben, sind eher geneigt, positive Erinnerungen an die Marke oder das Unternehmen zu haben und sind eher bereit, wiederzukommen oder Empfehlungen auszusprechen.
Erhöhte Kaufbereitschaft: Durch die Integration von Technologie und die Schaffung einer ansprechenden Atmosphäre können Kunden dazu angeregt werden, mehr Zeit im Showroom zu verbringen und mehr Produkte zu kaufen.
Möglichkeit zur Datenerfassung: Durch die Integration von Technologie in einen immersiven Showroom können wertvolle Daten über die Kunden gesammelt werden, wie zum Beispiel ihre Präferenzen und Interessen, die zur Verbesserung der Marketingstrategien und Produkte genutzt werden können.

Um einen immersiven Showroom zu erstellen, müssen Shopbetreiber einige Schritte befolgen, wie zum Beispiel:

Konzeptentwicklung: Überlegen Sie sich ein Konzept für Ihren immersiven Showroom, das auf Ihre Marke, Ihre Produkte und Ihre Zielgruppe zugeschnitten ist. Überlegen Sie sich, welche Technologien und Elemente Sie einbeziehen wollen, um eine einzigartige und ansprechende Atmosphäre zu schaffen.
Storytelling und Inszenierung: Erzählen Sie eine Geschichte oder inszenieren Sie eine Szene, die Ihre Produkte oder Dienstleistungen in den Mittelpunkt stellt. Verwenden Sie dramaturgische Elemente wie einen Introfilm, einen Rundumblick oder eine Detailaufnahme Ihrer Produkte oder Dienstleistungen, Echtzeit-Einblicke in Big Data oder Künstliche Intelligenz, Porträts faszinierender Persönlichkeiten oder interaktive Beteiligungen der Besucher.
Technische Umsetzung: Wählen Sie die passenden Technologien für Ihren immersiven Showroom aus und stellen Sie sicher, dass sie reibungslos funktionieren. Verwenden Sie Virtual Reality, Augmented Reality, Projektionen, Audio, Video, Licht und interaktive Elemente, um eine immersive Umgebung zu schaffen. Achten Sie auch auf die Einrichtung und Dekoration des Showrooms, um die Atmosphäre zu verstärken.

Für weitere Informationen über immersive Showrooms für Shopbetreiber kannst du einige Webseiten ansehen:

Bei unserem MyOOS Projekt setzen wir den Showroom als Web XR Erlebnis um.

Was ist WebXR?

WebXR ist ein Web-Standard, der es ermöglicht, immersive Erfahrungen wie Virtual Reality (VR) und Augmented Reality (AR) im Browser zu erstellen und zu erleben. WebXR basiert auf der WebXR Device API, die eine Schnittstelle für die Interaktion mit XR-Geräten wie Headsets, Controllern und Sensoren bereitstellt. WebXR ermöglicht es Web-Entwicklern, plattformübergreifende und zugängliche XR-Anwendungen zu erstellen, die das Web als offene und universelle Plattform nutzen.

Einige der Vorteile von WebXR sind:

Es erfordert keine Installation oder Aktualisierung von Anwendungen, da sie direkt im Browser ausgeführt werden können.
Es unterstützt verschiedene Arten von XR-Geräten, von mobilen Geräten bis hin zu dedizierten Headsets.
Es ermöglicht die Integration von Web-Inhalten und -Funktionen in XR-Erfahrungen, wie zum Beispiel Links, Formulare, Videos oder soziale Medien.
Es fördert die Innovation und Kreativität, indem es Web-Entwicklern Zugang zu einer Vielzahl von XR-Frameworks, Bibliotheken und Werkzeugen bietet.

Um WebXR in deiner Anwendung zu verwenden, musst du einige Schritte befolgen, wie zum Beispiel:

Erkenne die Verfügbarkeit von XR-Geräten und -Funktionen mit der navigator.xr.requestSession()-Methode.
Erstelle eine XR-Szene mit einem WebGL-Renderer wie Three.js oder Babylon.js.
Render die XR-Szene auf einem HTMLCanvasElement mit der xrSession.updateRenderState()-Methode.
Verarbeite die Eingaben von XR-Geräten wie Controllern oder Gesten mit der xrSession.inputSources-Eigenschaft.
Reagiere auf Änderungen des XR-Zustands wie Sitzungsstart oder -ende mit der xrSession.addEventListener()-Methode.

Was ist Webpack?

Unsere Metaverse Experience verwendet ind er Entwicklungsumgebung umfangreiche JavaScript Frameworks. Webpack ist ein Modulbündler für JavaScript-Anwendungen, der es ermöglicht, mehrere Dateien und Abhängigkeiten in eine oder mehrere optimierte Dateien zu kombinieren. Webpack kann auch andere Aufgaben wie das Laden, Transformieren und Minimieren von Ressourcen wie Bildern, CSS und HTML erledigen. Webpack wird häufig in Kombination mit Frameworks wie React, Angular oder Vue.js verwendet, um moderne Webanwendungen zu erstellen.

Einige der Vorteile von Webpack sind:

Es verbessert die Web-Performance, indem es die Anzahl der HTTP-Anfragen reduziert, den Code komprimiert und das Caching optimiert.
Es ermöglicht die Verwendung von neuesten JavaScript-Features wie ES6, TypeScript oder JSX, indem es sie mit Babel oder TypeScript in kompatiblen Code umwandelt.
Es unterstützt Code-Splitting, das es ermöglicht, eine große Anwendung in mehrere kleinere Dateien aufzuteilen, die nur dann geladen werden, wenn sie benötigt werden.
Es bietet eine hohe Flexibilität und Anpassbarkeit, indem es verschiedene Plugins, Loader und Konfigurationsoptionen anbietet.

Um Webpack in Deiner Anwendung zu verwenden, musst du einige Schritte befolgen, wie zum Beispiel:

Installiere Webpack und seine Abhängigkeiten mit npm oder yarn.
Erstelle eine webpack.config.js-Datei, in der du die Einstellungen für deine Anwendung festlegst.
Definiere einen oder mehrere Einstiegspunkte für deine Anwendung und die Ausgabedateien, die Webpack erzeugen soll.
Füge die gewünschten Loader und Plugins hinzu, um Ihre Ressourcen zu laden und zu transformieren.
Führe den Befehl webpack aus, um deine Anwendung zu bündeln.

Webpack Code Splitting

Unser Open-Source-Projekt hatte für den immersiven Showroom eine große JavaScript-Datei, die die empfohlene Größenbeschränkung überschritt. Dies kann die Web-Performance beeinträchtigen. Um dieses Problem zu lösen, kannst du die Code-Splitting-Funktion von webpack verwenden, um deine JavaScript-Anwendung in mehrere kleinere Dateien aufzuteilen, die vom Browser separat heruntergeladen werden können.

Eine Möglichkeit, Code-Splitting zu implementieren, ist die Verwendung der dynamischen import()-Syntax in deinen Komponenten, so dass webpack automatisch die importierte Komponente als eine separate Datei ausgibt. Zum Beispiel kannst du folgenden Code in deine index.js-Datei schreiben:

import React from 'react';
import ReactDOM from 'react-dom';

// Lazy load the App component
const App = React.lazy(() => import('./App'));

ReactDOM.render(
  <React.Suspense fallback={<div>Loading...</div>}>
    <App />
  </React.Suspense>,
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';

// Lazy load the App component
const App = React.lazy(() => import('./App'));

ReactDOM.render(
  <React.Suspense fallback={<div>Loading...</div>}>
    <App />
  </React.Suspense>,
  document.getElementById('root')
);

Dieser Code wird die App-Komponente nur dann laden, wenn sie benötigt wird, anstatt sie in der main.js-Datei zu bündeln. Sie können auch andere Komponenten auf diese Weise lazy-loaden, um Ihre Anwendung weiter zu optimieren.

Eine andere Möglichkeit, Code-Splitting zu implementieren, ist die Verwendung des SplitChunksPlugin von webpack, das Duplikate vermeidet und gemeinsam genutzte Module in separate Dateien extrahiert. Um dieses Plugin zu verwenden, mussten wir es in unser webpack.config.js-Datei konfigurieren. Zum Beispiel kannst folgenden Code hinzufügen:

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all', // Split all chunks
      minSize: 20000, // Minimum size of chunk to be generated
      maxSize: 0, // No maximum size limit
      minChunks: 1, // Minimum number of chunks that must share a module
      maxAsyncRequests: 30, // Maximum number of parallel requests
      maxInitialRequests: 30, // Maximum number of initial requests
      automaticNameDelimiter: '~', // Delimiter for generated names
      enforceSizeThreshold: 50000, // Threshold for enforcing chunk size
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
//...

Dieser Code wird alle Module aus dem node_modules-Ordner in eine separate Datei namens vendors~main.js auslagern und alle anderen gemeinsam genutzten Module in eine Datei namens main~[name].js auslagern. Du kannst diese Einstellungen an deine Anforderungen anpassen.

Was ist Code-Splitting in webpack?

Code-Splitting ist eine Technik, die von webpack unterstützt wird, um eine große JavaScript-Anwendung in mehrere kleinere Dateien aufzuteilen, die als Chunks bezeichnet werden. Diese Chunks können dann vom Browser separat heruntergeladen werden, wenn sie benötigt werden, anstatt die gesamte Anwendung auf einmal zu laden. Dies kann die Web-Performance verbessern, indem es die Ladezeit reduziert, den Speicherverbrauch verringert und das Caching optimiert.

Es gibt verschiedene Möglichkeiten, Code-Splitting in webpack zu implementieren, je nachdem, wie du Deine Anwendung strukturieren und organisieren möchtest. Einige der häufigsten Methoden sind:

Entry Points: Du kannst mehrere Einstiegspunkte für deine Anwendung definieren und webpack wird für jeden Einstiegspunkt einen separaten Chunk erzeugen. Dies ist die einfachste Methode, aber sie kann zu Duplikaten führen, wenn mehrere Einstiegspunkte gemeinsame Module verwenden.
Dynamic Imports: Du kannst die import()-Syntax verwenden, um Module dynamisch zu importieren, wenn sie benötigt werden. Dies ermöglicht es dir, Code-Splitting an bestimmten Stellen deiner Anwendung zu aktivieren und webpack wird automatisch die importierten Module als separate Chunks ausgeben.
SplitChunksPlugin: Du kannst dieses Plugin verwenden, um Duplikate zu vermeiden und gemeinsam genutzte Module in separate Chunks zu extrahieren. Dieses Plugin analysiert deine Module und ihre Abhängigkeiten und gruppiert sie nach bestimmten Kriterien, die du konfigurieren kannst.
RuntimeChunk: Du kannst dieses Plugin verwenden, um den webpack-Bootstrap-Code in einen separaten Chunk auszulagern. Dieser Code ist für das Laden und Ausführen Ihrer Chunks verantwortlich und kann wiederverwendet werden, wenn Sie mehrere Einstiegspunkte haben.

Um mehr über Code-Splitting in webpack zu erfahren, kannst du die offizielle Dokumentation besuchen oder einige Tutorials online suchen .

TerserPlugin von webpack

Wir verwenden das TerserPlugin von webpack, um unsere JavaScript-Dateien zu minimieren und zu komprimieren. Dieses Plugin entfernt unnötigen Code, Leerzeichen und Kommentare aus unseren Dateien und reduziert so ihre Größe. Um dieses Plugin zu verwenden, haben wir es in unsere plugins-Konfiguration hinzugefügt. Zum Beispiel kannst du folgenden Code verwerden

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new TerserPlugin({
      terserOptions: {
        // Use the default options for terser
      },
    }),
  ],
};

Wie kann ich Code-Splitting in meiner Anwendung implementieren?

Nach dem Code-Splitting haben wir alle JavaScript-Dateien, die von webpack erzeugt wurden, in unsere Ihre HTML-Seite eingebunden. Wir können dies tun, indem wir mehrere <script>-Tags verwenden, die jeweils auf eine andere Datei verweisen. Zum Beispiel konnten wir folgenden Code schreiben:

<script src="static/js/runtime-main.js"></script>
<script src="static/js/572.js"></script>
<script src="static/js/734.js"></script>
<!-- And so on for the other files -->
<script src="main.js"></script>

Dies wird alle JavaScript-Dateien in der Reihenfolge laden, in der sie angegeben sind. Du solltest jedoch beachten, dass dies die Ladezeit und den Speicherverbrauch Deiner Seite erhöhen kann, da du viele Dateien anfordern musst.

Wie geht es weiter?

Beim nächsten MyOOS Release werden wir hoffentlich den ersten immersiven Showroom Entwurf ausprobieren.