Einführung in die Startbildschirmoptimierung der Vue SPA-Einzelseitenanwendung

Dieser Artikel stellt hauptsächlich die erste Bildschirmoptimierungspraxis der Vue SPA-Einzelseitenanwendung vor. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

1. Codekomprimierung (gzip)

Wenn Sie einen Nginx-Server verwenden, ändern Sie bitte die Konfigurationsdatei (andere Webserver sind ähnlich): sudo nano /etc/nginx/nginx.conf

In den Gzip-Einstellungen hinzufügen:

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

• gzip

• Hier können Sie das Gzip-Modul ein- oder ausschalten use on Gibt an, dass

• gzip_min_length

• beginnt. Legen Sie die Mindestanzahl an Bytes von Seiten fest, die für die Komprimierung zulässig sind. Der Standardwert ist 0, wodurch die Seite unabhängig von ihrer Größe komprimiert wird.

• gzip_buffers

• Stellen Sie das System so ein, dass es mehrere Cache-Einheiten zum Speichern des GZIP-Komprimierungsergebnisdatenstroms erhält. 4 16k bedeutet, dass Speicher in Einheiten von 16k und das Vierfache der ursprünglichen Datengröße in Einheiten von 16k beantragt wird

• gzip_comp_level

• Komprimierungsverhältnis: Das minimale Komprimierungsverhältnis von 1 ist das schnellste und das Komprimierungsverhältnis von 9 ist das größte, aber langsamste Verarbeitungsverhältnis (die Übertragung ist schnell, verbraucht aber mehr CPU)

• gzip_types

• Passen Sie den MIME-Typ für die Komprimierung an, (ob angegeben oder nicht), der Typ „text/html“ wird immer komprimiert

Ich mache diese Konfiguration, eine Datei, die auf der Homepage heruntergeladen werden muss, wird von 716 KB auf 246 KB komprimiert. Optimierungsgrad 66 %.

Wenn Sie gzip auf der Serverseite nicht aktivieren, können Sie auch die Komprimierung des Front-End- und Back-End-Codes aktivieren

Wenn Ihr Back-End dies verwendet das Express.js-Framework zur Bereitstellung von Webdiensten. Anschließend können Sie Komprimierungs-Middleware für die GZIP-Komprimierung verwenden.

var compression = require('compression');
var express = require('express');
var app = express();
app.use(compression());

Wenn Ihr Frontend-Projekt mit vue-cli generiert wird, wurde die Codekomprimierung in der Webpack-Konfigurationsdatei (Produktionsumgebung) aktiviert.

2. Externe Dateien bei Bedarf importieren || Keine Notwendigkeit für externe Dateien, erfinden Sie das Rad neu

Wenn Sie Element im Projekt verwenden, importieren Sie auf Anfrage:

Babel-Plugin-Komponente zuerst installieren:

npm install babel-plugin-component -D

Es ermöglicht uns, nur die erforderlichen Komponenten einzuführen, um die Größe des Projekts zu reduzieren.

PS: Wenn Es wird ein Fehler gemeldet:

Fehler: Fehler nach der Installation, bitte entfernen Sie node_modules, bevor Sie es erneut versuchen

Das ist die Schuld von cnpm. Der Grund ist unbekannt. Die Lösung besteht darin, npm zur Installation dieses Moduls zu verwenden. (Ich habe versucht, die Datei „node_modules“ zu entfernen, aber der Fehler blieb bestehen)

Wenn Sie eine Ajax-bezogene Bibliothek wie vue-resource/axios verwenden

Entfernen Sie sie und Machen Sie es selbst. Implementieren Sie eine Ajax-Bibliothek.

Zum Beispiel beinhaltet mein Projekt nur get,post, daher ist vue-resource/axios für mich sehr unnötig.

Also habe ich eine Bibliothek gekapselt (unterstützt Promise, unterstützt IE nicht) und verwende sie als Plug-in in Vue:

/* xhr.js */
class XHR {
 get(url) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
   xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
     if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
      if (xhr.responseText) {
       resolve(JSON.parse(xhr.responseText));
      } else {
       resolve(xhr.responseText);
      }
     } else {
      reject(`XHR unsuccessful:${xhr.status}`);
     }
    }
   };
   xhr.open(&#39;get&#39;, url, true);
   xhr.setRequestHeader(&#39;content-type&#39;, &#39;application/json&#39;);
   xhr.send(null);
  });
 }

 post(url, data) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
   xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
     if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
      resolve(JSON.parse(xhr.responseText));
     } else {
      reject(`XHR unsuccessful:${xhr.status}`);
     }
    }
   };
   xhr.open(&#39;post&#39;, url, true);
   xhr.setRequestHeader(&#39;content-type&#39;, &#39;application/json&#39;);
   xhr.send(JSON.stringify(data));
  });
 }
}

/* Vue插件要求提供install方法：https://cn.vuejs.org/v2/guide/plugins.html */
XHR.install = (Vue) => {
 Vue.prototype.$get = new XHR().get;
 Vue.prototype.$post = new XHR().post;
};

export default XHR;

Diese Methode kann die Dateigröße im Allgemeinen um Dutzende KB reduzieren . Beispielsweise ist vue-resource 35 KB groß und mein xhr.js ist nur 1,9 KB groß.

3． Code-Splitting/Code-Splitting

Wie der Name schon sagt, bedeutet es, den Code in Blöcke aufzuteilen und diese bei Bedarf zu laden. Auf diese Weise besteht keine Notwendigkeit, Blöcke zu laden, die auf dem ersten Bildschirm nicht benötigt werden.

kann für große Projekte nützlicher sein, da die für die Homepage in meinem Projekt erforderlichen Dateien im Wesentlichen dieselben sind wie die für andere Seiten erforderlichen Dateien, sodass für mein Projekt keine Codeblockierung erforderlich ist.

4. Verzögertes Laden von Routing-Komponenten

Beim Packen und Erstellen einer Anwendung wird das Javascript-Paket sehr groß, was sich auf das Laden der Seite auswirkt. Wenn wir die verschiedenen Routen entsprechenden Komponenten in verschiedene Codeblöcke aufteilen und dann die entsprechenden Komponenten laden können, wenn auf die Route zugegriffen wird, ist dies effizienter.

Kombinieren Sie die asynchronen Komponenten von Vue und die Codeaufteilungsfunktion von Webpack Einfaches Lazy Loading von Routing-Komponenten implementieren.

Was wir tun müssen, ist, die der Route entsprechende Komponente als asynchrone Komponente zu definieren:

const Foo = resolve => {
 /* require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
 （代码分块）*/
 require.ensure(['./Foo.vue'], () => {
 resolve(require('./Foo.vue'))
 })
}
/* 另一种写法 */
const Foo = resolve => require(['./Foo.vue'], resolve);

Es besteht keine Notwendigkeit, irgendeine Routing-Konfiguration zu ändern. Verwenden Sie Foo wie zuvor:

const router = new VueRouter({
 routes: [
 { path: '/foo', component: Foo }
 ]
})

4. Webpack2 Tree-Shaking

Tree-shaking wird verwendet, um nicht verwendeten Code zu entfernen.

Im Allgemeinen wird das Baumschütteln nicht bei kleinen persönlichen Projekten verwendet. Weil Sie keinen unbenutzten Code schreiben. Große Projekte könnten versuchen, es zu nutzen.

5. Reduzieren Sie unnötige Daten in XHR.

In meinem Projekt benötigt die Homepage beispielsweise nur den Blog-Titel, die ID und die Tags. Zeit und Inhalt werden nicht mehr benötigt und der Inhalt ist normalerweise sehr groß (im Allgemeinen etwa 10 KB pro Artikel).

6. SSR (Server Side Render/Server Side Rendering)

Das ist etwas schwierig. Aber die Wirkung scheint recht gut zu sein. Ich habe zuvor einen kurzen Blick auf die Vue-Dokumentation geworfen und geplant, dies zu tun, falls ich sie in Zukunft benötige.

7. Auf andere Dinge wie das verzögerte Laden von Bildern werde ich nicht näher eingehen, aber sie sind gesunder Menschenverstand, den Frontend-Entwickler haben sollten.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie den Übergang von Vue, um den gleitenden Übergang abzuschließen

Verwendung von $refs in Vue

So installieren Sie Mint-UI im Vue-Projekt

Das obige ist der detaillierte Inhalt vonEinführung in die Startbildschirmoptimierung der Vue SPA-Einzelseitenanwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!