Ein Beispiel zur Optimierung eines Projekts nach Abschluss des Vue-Projekts

1. Geben Sie unterschiedliche Verpackungseinstiegspunkte für den Entwicklungsmodus und den Releasemodus an

Das von Vue UI erstellte Projekt verbirgt die Webpack-Konfiguration. Sie können eine Konfigurationsdatei vue.config.js im Stammverzeichnis src erstellen. Exportieren Sie das Konfigurationsobjekt in die Konfigurationsdatei.

2. Standardmäßig teilen sich der Entwicklungsmodus und der Release-Modus des Vue-Projekts eine gepackte Einstiegsdatei (src/main.js). Sie können configureWebpack oder chainWebpack verwenden, um die Webpack-Verpackungskonfiguration zu definieren

Ändern Sie die Datei main.js in main-dev.js. Kopieren Sie main.js und ändern Sie es in main-prod.js

2. Laden Sie externe CDN-Ressourcen über Externals

Standardmäßig werden über die Importsyntax importierte Abhängigkeitspakete von Drittanbietern letztendlich gepackt und in derselben Datei zusammengeführt. Dies führt dazu, dass eine einzelne Datei nach erfolgreicher Verpackung zu groß ist (das von uns importierte CSS-Stylesheet wird ebenfalls in derselben Datei gepackt, was zu einer zu großen Datei führt).

Um die oben genannten Probleme zu lösen, können Sie externe CDN-Ressourcen über den externen Knoten von Webpack konfigurieren und laden. In externen Dateien deklarierte Abhängigkeitspakete von Drittanbietern werden nicht gepackt und in die endgültige Datei integriert.

① Konfigurieren Sie den externen Knoten von Webpack und konfigurieren Sie ihn in der Release-Phase

In Externals deklarierte Abhängigkeitspakete von Drittanbietern werden nicht gepackt. Bei Verwendung der Abhängigkeitspakete sucht das Projekt im globalen Fenster nach den entsprechenden Objekten. Daher müssen Sie JS- und CSS-Ressourcen vom CDN in die Datei index.html einführen, damit sie global gefunden werden können

Sie müssen dem Header der Datei public/index.html die folgende CDN-Ressourcenreferenz hinzufügen:

Spezifischer Betriebsablauf:
① Kommentieren Sie in main-prod.js die von nprogress und quill referenzierten CSS-Dateien aus. ② Laden Sie im Kopfbereich von index.html die JS- und CSS-Stile von nprogress und quill über CDN. ③ Laden Sie im Kopfbereich von index.html das verbleibende abhängige JS über CDN.

Sie finden die entsprechende Open-Source-Bibliothek über staticfile CDN

Dateigröße vor der Verwendung von CDN:

Dateigröße nach Verwendung von CDN:

3. Optimieren Sie die ElementUI-Verpackung über CDN

Obwohl wir während der Entwicklungsphase das Laden von Element-UI-Komponenten bei Bedarf aktiviert haben, um die Paketgröße so weit wie möglich zu reduzieren, belegen die bei Bedarf geladenen Komponenten immer noch große Dateien. An diesem Punkt können wir die Komponenten in Element-UI auch über CDN laden, wodurch die Größe der gepackten Datei weiter reduziert werden kann.

Der konkrete Betriebsablauf ist wie folgt:
① Kommentieren Sie in main-prod.js den Code für die Element-UI aus, der bei Bedarf geladen werden soll. ② Laden Sie im Kopfbereich von index.html die JS- und CSS-Stile der Element-UI über CDN

Fertige Dateigröße:

4. Anpassung des Homepage-Inhalts

① Der Inhalt der Homepage kann in verschiedenen Verpackungsumgebungen unterschiedlich sein. Wir können es über Plug-Ins anpassen. Die Plug-In-Konfiguration ist wie folgt:

 // Über plugin('html'): Suche das HTML-Plugin. Über tap(): können Sie die festen Konfigurationselemente in diesem Plug-In ändern. // Über args: können Sie einige relevante Parameter des aktuellen Plug-Ins abrufen.
  // Fügen Sie ein benutzerdefiniertes Attribut isprod in args[0] hinzu. In der Entwicklungsphase wird es auf true gesetzt, in der Release-Phase auf false.

② Auf der Homepage public/index.html können Sie basierend auf dem Wert von isProd entscheiden, wie die Seitenstruktur gerendert werden soll.

5. Verwenden Sie Lazy Loading von Routen

Beim Verpacken und Erstellen eines Projekts werden alle den Routen entsprechenden Komponenten in eine Datei gepackt, wodurch die Datei zu groß wird und das Laden der Seite beeinträchtigt wird. Es wäre effizienter, wenn wir die den verschiedenen Routen entsprechenden Komponenten in verschiedene Codeblöcke aufteilen und dann beim Zugriff auf die Route die entsprechenden Komponenten laden könnten.

Damit ist dieser Artikel über die Optimierung eines Vue-Projekts nach dessen Abschluss abgeschlossen. Weitere Inhalte zur Optimierung von Vue-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!