Implementierung der Vue-Paketgrößenoptimierung (von 1,72 M auf 94 K)

1. Hintergrund

Ich habe vor Kurzem eine Website namens uidea erstellt, die unabhängigen Entwicklern bei der Erstellung von UI-Designs hilft. Zu dieser Zeit war ich nur für die Entwicklung verantwortlich. Nach der Bereitstellung stellte ich fest, dass die Zugriffsgeschwindigkeit besorgniserregend war. Immerhin handelte es sich um einen kleinen Wasserleitungsserver. Im Vergleich zur Erhöhung der Bandbreite muss ich noch sehen, ob der Code zuerst optimiert werden kann, was kostengünstiger ist. Dies ist die Paketgröße vor der Optimierung. Dieser Typ ist 1,72 M. Die Ladezeit der kleinen Wasserleitung beträgt direkt mehr als 3 Sekunden. Das kann ich nicht ertragen.

II. Ziele

Dies muss optimiert werden. Vor der Optimierung müssen wir das Ziel grob festlegen. Das Ziel muss anhand von Indikatoren gemessen werden, daher werden zwei Indikatoren festgelegt:

• Die Ladezeit der Seite sollte mindestens 1 Sekunde betragen. Je schneller, desto besser.
• Die Paketgröße wird auf 200k begrenzt

Warum diese beiden Ziele setzen? Zunächst einmal ist die Seitenladezeit das letzte zu lösende Problem. Aus vorläufiger Sicht gibt es zwei Faktoren, die die Seitenladezeit beeinflussen: Netzwerk und Paketgröße. Das Netzwerk hat vorübergehend Geldmangel und kann nicht aktualisiert werden, daher konzentriert sich die Hauptoptimierung auf die Paketgröße. Zunächst müssen wir definieren, was Paketgröße ist. Hier beziehe ich mich hauptsächlich auf die Eintragspaketgröße. Für Vue sind es app.js und app.css. Nachdem der Eintrag geladen ist, kann die Seite zumindest angezeigt werden.

Inwieweit sollte die Paketgröße optimiert werden?

Einerseits wird empfohlen, dass vue-cli-service 244 KB nicht überschreitet. Andererseits müssen wir einen Benchmark finden, um zu sehen, wie groß die Paketgröße ähnlicher Websites ist. Dann haben wir auch eine Referenz. Ich habe materialpalette gewählt. Die Paketgröße beträgt etwa 150 KB. Meine Funktion ist komplexer, also habe ich die 200 KB zwischen den beiden als Ziel genommen.

Warum müssen wir hier über Ziele sprechen? Denn das Ziel ist tatsächlich sehr wichtig. Wie das alte Sprichwort sagt: Streben Sie ein Ziel an. Ohne Ziel ist es leicht, auf halbem Weg während des Ausführungsprozesses aufzugeben oder nach nur einem halben Schritt stehen zu bleiben.

Nehmen wir zum Beispiel Dating. Wenn Ihr Ziel darin besteht, eine Freundin zu finden, werden Sie wahrscheinlich keine finden. Wenn Ihr Ziel jedoch darin besteht, ein bestimmtes Mädchen (wie Zhang San) als Ihre Freundin zu gewinnen, wird die Erfolgswahrscheinlichkeit erheblich steigen, da Sie sich gezielt auf dieses Mädchen vorbereiten können.

3. Lösung

Sobald das Ziel festgelegt ist, wird der Plan entschieden

Obwohl ich mich zum ersten Mal mit Weboptimierung beschäftige, habe ich bereits Erfahrung mit der Optimierung der Android-Paketgröße. Da die Prinzipien immer dieselben sind, habe ich mir beim ersten Mal die folgenden Strategien überlegt:

1. Code-Verschleierung
2. Ressourcen werden im CDN platziert. Da es einfach zu entwickeln ist, werden Ressourcen unter Assets platziert und direkt angefordert. Das ist auch eine große Sache.
3. Löschen Sie nutzlose Bibliotheken, führen Sie Bibliotheken mit ähnlichen Funktionen zusammen und verwenden Sie nur wenige Bibliotheken, um zu prüfen, ob Sie sie selbst implementieren können
4. GZIP-Komprimierung
5. Auch Drittanbieter-Bibliotheken werden auf CDN platziert

1 - 3 sind die ersten drei Optimierungslösungen, die mir in den Sinn kommen. Dann habe ich online nach den entsprechenden Optimierungsstrategien von Vue gesucht und die letzten beiden hinzugefügt. Es gibt auch einige andere Lösungen, wie z. B. das verzögerte Laden von Routen, aber da der Hauptinhalt dieser Website auf der Homepage konzentriert ist, wurde dies nicht berücksichtigt (obwohl es viele gute Dinge gibt, ist es am besten, sie an die örtlichen Gegebenheiten anzupassen).
Insgesamt wurden also 5 Optimierungsstrategien festgelegt, und jetzt beginnen wir

IV. Durchführung

1. Code-Verschleierung

Ich werde nicht viel über Code-Verschleierung sagen. Einerseits spart es Paketgröße und andererseits kann es die Schwierigkeit der Dekompilierung erhöhen. Ich habe im Internet nach einer Vue-Verschleierungskonfiguration gesucht (schließlich müssen wir auf den Schultern von Riesen stehen). Nachdem ich es ausprobiert habe, funktioniert es gut. Die Konfiguration ist wie folgt

const CompressionWebpackPlugin = erforderlich('compression-webpack-plugin');
modul.exporte = {
 configureWebpack: (config) => {
  // Importiere uglifyjs-webpack-plugin
  Lassen Sie UglifyPlugin = erfordern('uglifyjs-webpack-plugin');

  wenn (Prozess.Umgebung.NODE_ENV == 'Produktion') {
   // Komprimierung und Verschleierung config.mode = 'production'
   //Packe jedes Abhängigkeitspaket in eine separate JS-Datei let optimization = {
    Minimierer: [neues UglifyPlugin({
     hässlicheOptionen: {
      Warnungen: falsch,
      komprimieren: {
       drop_console: wahr,
       drop_debugger: falsch,
       pure_funcs: ['Konsole.log']
      }
     }
    })]
   }
   Objekt.assign(config, {
    Optimierung
   })
  } anders {
   // Ändern Sie die Konfiguration für die Entwicklungsumgebung config.mode = 'development'
}
  }
 }
}

2. Ressourcen auf CDN setzen

Auch dieser Schritt ist einfach durchzuführen. Alle Ressourcen werden auf Alibaba Cloud OSS platziert und dies kann in wenigen Minuten erledigt werden.

3. Löschen ungenutzter Bibliotheken

Dieser Schritt hat viel Zeit in Anspruch genommen, da ich beim Entwickeln einfach viele Bibliotheken auf GitHub gesucht und mit yarn add importiert habe. Nun muss ich sie wieder aufteilen.

Fügen Sie nach dem Paketbefehl --report hinzu, um den Status des Pakets anzuzeigen

Garnaufbau --Bericht 

Entfernen Sie zunächst ElementUi (ca. 158 KB nach der Gzip-Komprimierung). Während der Entwicklung wurden ElementUi und Vuetify gemischt. Tatsächlich reicht nur Vuetify aus. Nehmen Sie dann einige kleine Änderungen an der Benutzeroberfläche vor und fertig.

Dann gibt es lodash. Ich habe darin nur ein paar Methoden verwendet, aber die Gesamtgröße ist nicht klein, etwa 25 KB nach der Gzip-Komprimierung. Also habe ich nach dem Quellcode von lodash gesucht und wollte ein paar verwendete Methoden extrahieren, aber der lodash-Code war zu tief verschachtelt und referenziert, also wollte ich sie nicht extrahieren. Ich habe diese Bibliothek einfach gelöscht und ein paar reinere Implementierungen gefunden, um sie zu ersetzen. Die meiste Zeit habe ich damit verbracht, den Quellcode von lodash zu lesen.

Dann gibt es noch vuescroll. Als ich den benutzerdefinierten Scrollbar-Stil implementierte, war ich faul und habe diese Bibliothek direkt verwendet. Ich habe festgestellt, dass die Größe dieser Bibliothek immer noch nicht klein ist. Nach der GZIP-Komprimierung sind es fast 20 KB. Ich habe es einfach beendet und den Stil selbst geschrieben (dieser Vorfall zeigt uns, dass wir es in Zukunft auf andere Weise zurückzahlen werden, wenn wir jetzt faul sind 0_0)
Dies führte zum Ruin mehrerer großer Bibliotheken.

4. gzip-Komprimierung

Dies ist eine Lösung, die ich online gefunden habe. Fügen Sie einfach eine Konfiguration in vue.config.js hinzu und nehmen Sie dann auch die entsprechende Konfiguration in nginx vor.

// vue.config.js
modul.exporte = {
 configureWebpack: (config) => {
  wenn (Prozess.Umgebung.NODE_ENV == 'Produktion') {
   // ...
   // gzip
   config.plugins.push(neues KomprimierungsWebpackPlugin({
    Algorithmus: "gzip",
    Test: /\.js$|\.html$|\.json$|\.css/,
    Schwellenwert: 10240,
    minVerhältnis: 0,8
   }))
  }
  // ...
 }
}
// nginx aktiviert direkt die folgende Konfiguration gzip_static on;

Nach dem Verpacken wird eine GZ-Datei generiert, und Nginx verwendet automatisch die GZ-Datei.

5. Platzieren Sie die Drittanbieterbibliothek auf CDN

Hier beschäftigen wir uns hauptsächlich mit der Vuetify-Bibliothek. Immerhin ist sie nach dem Gzip fast 50 KB groß. Es wird schneller sein, sie auf CDN zu stellen. Entfernen Sie zunächst Vuetify aus der Verpackungskonfiguration.

modul.exporte = {
 // ...
 configureWebpack: (config) => {
  wenn (Prozess.Umgebung.NODE_ENV == 'Produktion') {
   // Bibliotheken von Drittanbietern sind nicht gepackt, verwenden Sie CDN
   config.externals = {
    vuetify: „Vuetify“
   }
  } anders {
   // Ändern Sie die Konfiguration für die Entwicklungsumgebung config.mode = 'development'
   config.externals = {
    vuetify: „Vuetify“
   }
  }
 }
}

Laden Sie dann manuell vuetify CSS und JS in index.html

<link href="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.css" rel="externes Nofollow" rel="stylesheet">
<script src="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.js"></script>

Es gibt hier tatsächlich bessere Möglichkeiten. Sie können es über Webpack-Parameter an index.html übergeben und über ejs importieren. Es ist jetzt relativ einfach, deshalb werde ich es hier nicht tun.

5. Wirkung

Durch die oben genannten Strategien wird die endgültige Paketgröße von 1,72 M auf 94 K optimiert.

VI. Nachverfolgung

Insgesamt ist der Optimierungseffekt deutlich erkennbar, dennoch gibt es Dinge, die nachträglich noch getan werden können:

• Verfeinerte Optimierung, es sollte möglich sein, Webpack für eine tiefere Anpassung zu kombinieren
• Integrieren Sie die Bibliotheken von Drittanbietern in das oben erwähnte CDN. Schließlich ist es zu verstreut, sie direkt in index.html einzufügen, was keine gute Projektstruktur darstellt und der nachfolgenden Entwicklung nicht förderlich ist.
• Es gibt noch viele Dinge, die getan werden können, um die nachfolgende Code-Entwicklung zu standardisieren, wie z. B. die Spezifikationen für Bibliotheksreferenzen von Drittanbietern, Spezifikationen für die Ressourceneinführung usw.
• Leistungstests vor jeder Bereitstellung, hauptsächlich um zu sehen, ob die Seitenladegeschwindigkeit dem Standard entspricht

Es gibt noch viele Dinge, die man tun kann. Manchmal ist das Erreichen eines Ziels nicht das Ende der Sache. Auch die Aufrechterhaltung des Ziels ist etwas, das berücksichtigt werden muss.

Damit ist dieser Artikel über die Implementierung der Vue-Paketgrößenoptimierung (von 1,72 M auf 94 K) abgeschlossen. Weitere relevante Inhalte zur Vue-Paketgrößenoptimierung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!