vue2.x-Konfiguration von vue.config.js zur Projektoptimierung

vue.config.js ist eine optionale Konfigurationsdatei. Wenn diese Datei im Stammverzeichnis des Projekts vorhanden ist (auf derselben Ebene wie package.json), wird sie automatisch von @vue/cli-service geladen. Sie können das Vue-Feld auch in package.json verwenden, beachten Sie jedoch, dass Sie bei dieser Methode das JSON-Format strikt einhalten müssen.

Vorwort

Auch in tatsächlichen Projekten muss häufig optimiert werden. Insbesondere bei mittleren und großen Projekten ist es wichtig, die Paketgröße zu reduzieren und die Ladezeit des ersten Bildschirms zu erhöhen. Dies ist auch eine häufig gestellte Frage in Interviews. In diesem Artikel werde ich die Auswirkungen vor und nach der Konfiguration von vue.config.js und der Projektoptimierung vorstellen.
Es eignet sich hauptsächlich für die Vue-Frontend-Optimierung. Durch CDN, Route Lazy Loading, Bildkomprimierung und GIZP-Komprimierung kann die Paketgröße des auf dem Server bereitgestellten Frontend-Projekts reduziert werden, da die Paketgröße die Geschwindigkeit des ersten Öffnens des Projekts direkt beeinflusst und die Frontend-Dateigröße kleiner ist, was auch bedeutet, dass die CSS-Datei und die JS-Datei ebenfalls kleiner sind, die Downloadgeschwindigkeit schneller ist und auch die Ladegeschwindigkeit der Webseite schneller wird, wodurch letztendlich das Ziel der Optimierung des Frontend-Projekts erreicht wird.

vue.config.js-Konfigurationsoptionen

Die Datei sollte ein Objekt mit Optionen exportieren

Konfigurationsoptionen

Hier sind einige häufig verwendete Konfigurationen:

• Seiten: Konfigurieren Sie die Eintragsdateiadresse der Anwendung
• outputDir: Das Verzeichnis der generierten Build-Dateien für die Produktionsumgebung
• configureWebpack: einfache Verpackungskonfiguration. Da das Gerüst über integriertes Webpack verfügt, können Sie die Verpackungsparameter hier personalisieren, ohne den Verpackungsbefehl zu ändern. Es kann sich um ein Objekt oder eine Pfeilfunktion handeln. Hinweis: Wenn diese beiden Formulare gleichzeitig vorhanden sind, überschreibt das letztere das erstere, sodass Sie nur das angezeigte verwenden können.
• chainWebpack: Die Webpack-Konfiguration für Kettenoperationen ist eine Funktion
• devServer: Proxy-Konfiguration, Service-Port-Einstellungen, wenn nicht festgelegt, ist der Standardport: 8080

Detaillierte Konfigurationsanweisungen finden Sie auf der offiziellen Website.

Verpackungsoptimierung zur Reduzierung der Verpackungsgröße

Normale Verpackungen haben Standardkonfigurationen und die Verpackung kann ohne Änderungen erfolgreich sein, das Paket wird jedoch größer sein.

Verwenden Sie das mit dem Vue-Scaffolding gelieferte Analysetool, um die Situation vor der Optimierung zu betrachten, und geben Sie in die Befehlszeile ein:

Vue-Benutzeroberfläche

Dies ist die Paketanalyse des Front-End-Teils meines eigenen Projekts

Bild- und Videokomprimierung

Sie können sehen, dass es drei Bild- und Videodateien gibt, die optimiert werden können. Unter ihnen wird MP4 vorübergehend ignoriert, da es schwierig ist, es zu komprimieren, um die Auflösung beizubehalten.
Komprimieren Sie die Bilder auf der Online-Bildkomprimierungswebsite. Die Komprimierungsrate ist nicht schlecht

Sie können Abhängigkeiten auch verwenden, um beim Kompilieren erneut zu komprimieren: image-webpack-loader

...
chainWebpack: Konfiguration => {
    // Bild config.module komprimieren
    .rule('Bilder')
    .verwenden('image-webpack-loader')
    .loader('Bild-Webpack-Loader')
    .Optionen({
      //{ bypassOnDebug: true }
      mozjpeg: { progressive: true, quality: 65 }, // JPEG-Bilder komprimieren
      optipng: { enabled: false }, // PNG-Bilder komprimieren
      pngquant: { Qualität: [0,65, 0,9], Geschwindigkeit: 4 }, // PNG-Bilder komprimieren
      gifsicle: { interlaced: false } // GIF-Bilder komprimieren
      // webp: { Qualität: 75 } // SVG-Bilder komprimieren
    })
    .Ende()
}
...

JS-Code-Komprimierung

Codekomprimierung erfordert Abhängigkeit: uglifyjs-webpack-plugin

cnpm i -D muglifyjs-webpack-plugin

Da beim Verpacken Leerzeichen verarbeitet werden, besteht der Zweck der Verwendung dieses Plugins darin, Konsolen und Kommentare in der Produktionsumgebung zu löschen.
Hinweis: Da die Verwendung dieses Plugins die Kompilierungszeit verlängert, wird empfohlen, es in einer Produktionsumgebung zu verwenden.

...
konfigurierenWebpack: {
...
	process.env.NODE_ENV === 'Produktion'
      ?neues UglifyJsPlugin({
          hässlicheOptionen: {
            Ausgabe: {
              // Kommentare löschen comments: false
            },
            komprimieren: {
              drop_console: wahr,
              drop_console: true //Konsolenanweisungen löschen // pure_funcs: ['console.log'] //Benutzerdefinierte Entfernungsfunktion}
          },
          Quellkarte: false
        })
      : () => {} ...
}
,,,

CDN-Beschleunigung

Bei der normalen Webpack-Verpackung wird eine Datei chunk-vendors.js generiert, ein Paket, das alle Module bündelt, die nicht seine eigenen sind, sondern von anderen Parteien stammen. Sie werden als Drittanbietermodule oder Anbietermodule bezeichnet. Das heißt, alle Module aus dem Verzeichnis project/node_modules. Wenn also immer mehr abhängige Module hinzugefügt werden und die Module größer werden, wird chunk-vendors.js immer größer.

Wenn die von uns selbst erstellte Website auf dem Server veröffentlicht werden muss, damit andere sie verwenden können, wie können wir Ihren Benutzern dann den Zugriff auf Ihre Website beschleunigen?
Es gibt zwei Möglichkeiten:

• Machen Sie Ihre Dokumente so klein oder so wenige wie möglich und die Gesamtübertragungsgeschwindigkeit wird erhöht.
• Bewahren Sie Ihre Dokumente möglichst nah am Endbenutzer auf, sodass der gesamte Übertragungsweg erheblich verkürzt wird.

Öffentliche Cloud-Anbieter verfügen über unzählige Rechenzentren und Server auf der ganzen Welt. Einfach ausgedrückt bedeuten CDN-Dienste, dass diese Anbieter die Dokumente auf Ihrem Server auf ihre Server in anderen Regionen verteilen.
Jede Region kann als Knoten bezeichnet werden. Wenn ein Benutzer Ihre Website besucht, wird bei der vom Browser gesendeten Anfrage der Knoten priorisiert, der dem Kunden am nächsten ist, um Daten abzurufen. Dadurch kann der Kunde schneller auf die Website zugreifen.
Der vollständige Name von CDN lautet Content Delivery Network. CDN ist ein intelligentes virtuelles Netzwerk, das auf dem bestehenden Netzwerk aufbaut. Es basiert auf Edge-Servern, die an verschiedenen Orten eingesetzt werden, und verwendet Lastausgleich, Inhaltsverteilung, Planung und andere Funktionsmodule der zentralen Plattform, um es Benutzern zu ermöglichen, die erforderlichen Inhalte in der Nähe abzurufen, Netzwerküberlastungen zu reduzieren und die Reaktionsgeschwindigkeit und Trefferquote des Benutzerzugriffs zu verbessern. Zu den Schlüsseltechnologien von CDN gehören hauptsächlich Technologien zur Speicherung und Verteilung von Inhalten – aus Referenzen.

Einführung in CDN

Importieren Sie die Adresse der von CDN bereitgestellten Drittanbieterbibliothek. Hier verweise ich auf mehrere wichtige und große Abhängigkeiten: vue vuex elemenet-ui vue-router echarts axios

<!-- public/index.html -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.5.1/vuex.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css" rel="externes nofollow" >
 <script src="https://cdn.bootcss.com/element-ui/2.13.2/index.js"></script>
 <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
 <script src="https://cdn.bootcss.com/echarts/5.0.2/echarts.min.js"></script>

Importierte Bibliotheken hinzufügen

Fügen Sie die abhängigen Bibliotheken hinzu, auf die vom CDN in vue.config.js verwiesen werden muss

...
konfigurierenWebpack: {
...
	Äußerlichkeiten: {
	  //Geben Sie das Format der zu mountenden Drittanbieterbibliothek an: Name der Drittanbieterbibliothek: ‚Alias ​​der Bibliothek im Projekt‘
	  // Beachten Sie, dass der Element-UI-Alias ​​nur ELEMENT verwenden kann, andernfalls wird „undefined“ angezeigt. vue: „Vue“,
      vuex: "Vuex",
      'vue-router': 'VueRouter',
      axios: 'axios',
      echarts: 'echarts',
      'element-ui': 'ELEMENT'
	}, 
...
}
...

Kommentieren Sie die Stellen, an denen im Projekt Abhängigkeiten verwendet werden

Tipp: Wenn das Projekt groß ist und viele Stellen kommentiert werden müssen, empfehle ich, zuerst die Datei package.json der aus dem CDN importierten Bibliothek zu löschen und dann das Projekt auszuführen. Es wird auf jeden Fall darauf hingewiesen, dass das Modul fehlt, und es wird dort kommentiert, wo es angezeigt wird, sodass es nichts auslässt.

Mögliche Fehler

Der Alias ​​von element-ui kann nur auf „ELEMENT“ gesetzt werden. Beim Import auf Anfrage verwenden Sie ELEMENT.Message...error(...). Ich habe versucht, es zu ändern, aber es wird gemeldet, dass xxx nicht definiert ist.

Vergleich großer Dateispeicherorte

Vergleichen Sie die Verteilung großer Dateien vor und nach CDN

Vor der CDN-Beschleunigung:

Nach CDN-Beschleunigung:

Die Dateigröße ist viel kleiner und es gibt grundsätzlich keine größeren Abhängigkeiten.

Ergebnisse

Im Vergleich dazu sind die Vorher- und Nachher-Effekte sehr offensichtlich

Optimierung der Ladezeit des ersten Bildschirms

Der obige Vorgang optimiert tatsächlich die Ladezeit des ersten Bildschirms, die Ladezeit des ersten Bildschirms kann jedoch noch weiter optimiert werden.

Wenn nur die oben genannte Verpackungsoptimierung durchgeführt wird, wird die erste Bildschirmzeit verglichen:
Die Ladezeit betrug vor der Optimierung 1,92 Sekunden und nach der Optimierung 1,26 Sekunden. Die geladenen Ressourcen wurden ebenfalls stark reduziert. Kurz gesagt, die Verbesserung ist offensichtlich.

Durch die Nutzung eines CDN sind die Anforderungen gestiegen.

Routing-Lazy-Loading-Optimierung

Definition

Lazy Loading bedeutet einfach, dass das Laden von Routen verzögert wird oder Routen bei Bedarf geladen werden, d. h., sie werden geladen, wenn sie benötigt werden, und nicht, wenn sie nicht benötigt werden. Dies kann die Ladegeschwindigkeit der Projektwebseite beschleunigen.

Gängige Implementierungsmethoden

1. Die asynchrone Vue-Komponente realisiert das verzögerte Laden von Routen

component:resolve=>(['Adresse der zu ladenden Route', resolve])

2. Von es vorgeschlagener Import (empfohlen)

// In den folgenden beiden Codezeilen wird webpackChunkName nicht angegeben und jede Komponente wird in eine js-Datei gepackt.
const Index = () => import('@/components/index')
const Über = () => import('@/components/about') */
// Die folgenden 3 Codezeilen geben denselben webpackChunkName an und werden kombiniert und in einer JS-Datei gepackt. Komponenten in Gruppen aufteilen const Home = () => import(/* webpackChunkName: 'visualization' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'Visualisierung' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'Visualisierung' */ '@/components/about')

Am Beispiel der Verpackung meines Projekts: Ohne Angabe von webpackChunkName enthält der gepackte js-Ordner 17 Dateien

Nachdem zwei Seitenrouten als derselbe WebpackChunkName angegeben wurden, gibt es nur 16 entpackte Ordner

Der Grund dafür ist, dass derselbe webpackChunkName kombiniert und in eine JS-Datei gepackt wird

Optimierung der GZIP-Komprimierung

Vereinfacht ausgedrückt komprimiert gzip Dateien nach dem Verpacken, um sie kleiner und schneller übertragbar zu machen. Der Effekt ist, dass beim Anklicken einer URL der entsprechende Inhalt schnell angezeigt wird. Allerdings unterstützt nicht jeder Browser gzip. Wenn Sie wissen möchten, ob der Client gzip unterstützt, gibt es im Anforderungsheader ein Accept-Encoding, das die Unterstützung für Komprimierung anzeigt. Der HTTP-Anforderungsheader des Clients deklariert die vom Browser unterstützte Komprimierungsmethode, und der Server konfiguriert die zu aktivierende Komprimierung, den komprimierten Dateityp und die Komprimierungsmethode. Wenn der Client eine Anfrage an den Server stellt, analysiert der Server den Anfrageheader. Wenn der Client die GZIP-Komprimierung unterstützt, wird die angeforderte Ressource komprimiert und als Antwort an den Client zurückgegeben. Der Browser analysiert sie auf seine eigene Weise. Im HTTP-Antwortheader sehen wir content-encoding:gzip, was bedeutet, dass der Server die GZIP-Komprimierung verwendet.

Aktivieren Sie GZIP auf dem Frontend

Hierfür wird ein Plugin benötigt: compression-webpack-plugin

npm installiere Komprimierungs-Webpack-Plugin

Legen Sie es in vue.config.js fest.

konfigurierenWebpack: {
...
neues KompressionsPlugin({
   Dateiname: '[Pfad].gz[Abfrage]',
   Algorithmus: "gzip",
   Test: /\.js$|\.html$|\.css/,
   Schwellenwert: 10240, // Es werden nur Ressourcen verarbeitet, die größer als dieser Wert sind 10240
   minRatio: 0.8, // Es werden nur Ressourcen mit einer niedrigeren Komprimierungsrate als dieser Wert verarbeitet // Lösche die Originaldatei // Wenn du sie in einer Entwicklungsumgebung verwenden möchtest, setze sie auf false, sonst öffnet sich die Seite nach der Bearbeitung nicht // Wenn du sie in einer Produktionsumgebung verwenden möchtest, setze sie auf true, damit die gepackte Größe kleiner ist deleteOriginalAssets: false 
}),
...
}
,,,
// gzip-Komprimierung

Aktivieren Sie die GZIP-Komprimierung in nginx auf dem Server

Überprüfen Sie, ob die GZIP-Komprimierung erfolgreich aktiviert wurde

Verweise

Dokumentation zur Vue-Projektoptimierung
vue.config.js Verpackungsoptimierung Front-End-Leistungsoptimierung gzip

Dies ist das Ende dieses Artikels über vue2.x von der Konfiguration von vue.config.js bis zur Projektoptimierung. Weitere relevante Inhalte zur Vue-Projektoptimierung 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!