Vue SPA-Lösung zur Optimierung des ersten Bildschirms

Vorwort

Wenn ein reguläres Vue-Projekt gepackt und aufgerufen wird, gibt es ein HTML zurück, das nur Div enthält, und andere Inhaltsblöcke werden dynamisch von JS generiert.

Es gibt zwei große Probleme:

• Nicht gut für SEO
• Die Seite wird auf dem ersten Bildschirm langsam geladen und das Benutzererlebnis ist nicht gut
  

Dieser Artikel ist eine von mir auf der Grundlage von Projekterfahrungen zusammengefasste Lösung. Wenn es Mängel gibt, weisen Sie bitte darauf hin ~

Optimierung

SSR

SSR (Server-Side Rendering) ist serverseitiges Rendering, das Vue-Komponenten serverseitig in zusammengesetzte HTML-Strings rendert und diese dann direkt an den Browser sendet. Schließlich müssen diese statischen Tags auf dem Client in eine vollständig interaktive Anwendung eingemischt werden.
Nach dem erneuten Bereitstellen des Build-Projekts mit SSR:

Sie können sehen, dass der zurückgegebene Inhalt bereits den HTML-Codeblock des ersten Bildschirminhalts enthält, perfekt!~.~

Speedy Portal: Eine kleine Demo basierend auf vue-cli4.0+Typescript+SSR

Import auf Anfrage

Verwenden Sie das ES6-Modul für den On-Demand-Import

1. Importieren Sie Komponenten bei Bedarf in Routing-Dateien

# router.index.ts
Exportfunktion createRouter() {
 returniere neuen Router({
 Modus: "Verlauf",
 Routen: [
  {
  Weg: '/',
  Name: "Home",
  Komponente: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),
  },
  {
  Pfad: '/about',
  Name: 'Über',
  Komponente: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  },
 ],
 });
}

2. Statische Bibliotheken importieren Module bei Bedarf, nicht alle

Beispielsweise möchte ich in der Element-UI-Bibliothek nur die Schaltflächenkomponente verwenden:

importieren {
 Taste
} von „element-ui“;

Anfrageoptimierung

1. CSS- und JS-Platzierungsreihenfolge

Die CSS-Datei wird in den Header und die JS-Datei vor den Textkörper eingefügt, aber Vue hat das bereits für uns erledigt ~

2. Verwenden Sie Schriftsymbole und Sprite-Bilder als Symbolressourcen

Wir wissen, dass HTTP drei Handshakes benötigt, um eine Verbindung herzustellen. Zu viele Anfragen beeinträchtigen die Ladegeschwindigkeit.

Wir sollten versuchen, unnötige statische Ressourcen wie Symbole auf der Seite zu reduzieren, wie im folgenden Bild von der offiziellen Website von Tencent gezeigt:

Direktes Importieren eines fertigen Bildes und Festlegen der Bildposition entsprechend der Hintergrundposition

CDN verwenden

Statische Ressourcen werden auf das CDN hochgeladen, um die Zugriffsgeschwindigkeit zu verbessern

Ohne CDN:

Verwendung von CDN:

Es ist ersichtlich, dass statische Dateien nach der Verwendung von CDN durch GZIP komprimiert werden und die Download-Geschwindigkeit erheblich verbessert wird.

Eintragsblockoptimierung

Durch das Aufteilen der Eintrags-Chunk-Dateien und das Trennen einiger statischer Bibliotheken können Sie die Paketierung beschleunigen und das Laden optimieren.

Wie unten gezeigt, werden einige statische Bibliotheken getrennt: vuejs, axios, vuex usw. Sie können sehen, dass der Browser mehrere Download-Threads zum Herunterladen öffnet. Wenn diese statischen Bibliotheken nicht getrennt werden, ist der Eintragsblock sehr groß und die Ladegeschwindigkeit kann man sich vorstellen ~.~

Trennen Sie eine Element-UI-Bibliothek. Wir müssen uns nicht um die Entwicklungsumgebung kümmern. Wir trennen sie nur in der Produktionsumgebung. Wir müssen die Bibliothek nur in der Vue-Verpackungskonfiguration entfernen:

# vue.config.js
konfigurierenWebpack: {
 Äußerlichkeiten:
 process.env.NODE_ENV === 'Produktion'
  ? {
  'element-ui': 'element-ui',
  }
  : undefiniert,
},

# index.html statische Ressourcen manuell importieren <script src="/js/element-ui/element-ui.2.11.1.js"></script>

Oben sind die Details des Vue SPA-Optimierungsplans für den ersten Bildschirm aufgeführt. Weitere Informationen zur Vue SPA-Optimierung für den ersten Bildschirm finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!