Detaillierte Erläuterung der Schritte zur Optimierung des Vue-Projekts

Dieses Mal erkläre ich Ihnen detailliert die Schritte zur Optimierung des Vue-Projekts. Was sind die Vorsichtsmaßnahmen für die Optimierung des Vue-Projekts?

BilderOptimierung

1. Bildgrößenoptimierung, einige Bilder verwenden WebP (WebP-Kompatibilität muss berücksichtigt werden)

1. Online-Generierung wie Zhitu, Youpaiyun

2. gulp-Generierung, gulp-webp oder gulp-imageisux

3. Canvas-Generierung

2. Reduzieren Sie Bildanfragen, verwenden Sie Sprite-Bilder

1. , um online zu generieren: Sprites Generator, Tencent's GOPNG, Spriteme

2. Codegenerierung: gulp.spritesmith oder sass Compass

SeiteLeistungsoptimierung

Lazy Loading von Bildern oder Komponenten

Verwenden Sie die Vue-Lazyload-Komponente oder einige andere Komponenten

Vue-Lazyload-Adresse: https://www.npmjs.com/package/vue - lazyload

Bild-Lazy-Loading: v-lazy oder verwenden Sie v-lazy-container, um eine Bildgruppe aufzunehmen

// 引入一张图片 
<img v-lazy="//domain.com/img1.jpg"> 
// 引入一组图片
<p v-lazy-container="{ selector: &#39;img&#39;, error: &#39;xxx.jpg&#39;, loading: &#39;xxx.jpg&#39; }">
 <img src="//domain.com/img1.jpg">
 <img src="//domain.com/img2.jpg">
 <img src="//domain.com/img3.jpg"> 
</p>

Komponenten-Lazy-Loading

Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

Bild-Vorladung

Bilder schnell anzeigen

Verwendungsszenario: In einer Komponente zum Anzeigen von Bildern werden beim ständigen Durchsuchen der Bilder auf der nächsten Seite Daten vom Server abgerufen und die Bilder dann angezeigt Bei langsamem Laden können Sie das Bild vorab laden, wenn neue Daten angezeigt werden. Nachdem das Bild geladen wurde, füllen Sie das Bild an der entsprechenden Position

Lazy Loading mit drei Parteien ( Laden bei Bedarf)

JS-Dateien werden im Allgemeinen synchron geladen, und wenn sie auf der Seite platziert werden, wird das Laden der Haupt-JS-Datei blockiert.

Verwendungsszenarien: Wenn einige Projekte Dateien wie JQuery einführen müssen, blockiert die Einführung dieser Dateien in die Komponente das Rendern der Seite bis zu einem gewissen Grad, sodass sie durch bestimmte Ereignisse dynamisch geladen wird (klicken Sie auf oder Popup-Fenster) JS-Dateien wie jquery können die Hauptseite schnell anzeigen.

Asynchrones Laden von Seiten, wie man Überlappungen von Komponenten verhindert

Wenn mehrere Vue-Komponenten geladen werden und die Komponenten über serverseitige Daten gerendert werden, überlappen sich mehrere Komponenten zunächst und trennen sich dann

Drei Optionen

• Wenn der auf der Seite angezeigte Abschnitt fest ist und die Höhe des Inhalts nicht einfach zu ändern ist, kann dies der Fall sein Im Voraus außerhalb der Komponente festlegen. Eine feste Höhe, die wie das Hinzufügen von Inhalt zu einem Frame angezeigt wird. Wenn der Seiteninhalt nicht fixiert ist, können Sie andere Komponenten so einstellen, dass sie beim Laden der Daten einer bestimmten Komponente auf dem ersten Bildschirm angezeigt und über v-show angezeigt werden, um das Problem überlappender Komponenten beim asynchronen Laden zu verringern.

• Wenn die Seite als Ganzes fixiert ist, können Sie der Seite ein Skelett hinzufügen, um zu verhindern, dass die Seite flackert. Informationen zur spezifischen Implementierung finden Sie unter http://www.jb51.net/article/130505.htm

• Serverseitige Rendering-Seite Für einige Seiten mit festen Daten und wenigen Änderungen. Sie können erwägen, durch serverseitiges Rendern die Seite in kurzer Zeit anzuzeigen und so eine bessere Benutzererfahrung zu erzielen.

Reduzieren Sie die Größe importierter externer Dateien

Wenn das Projekt einige ElementUI-Inhalte einführt, konfigurieren Sie die .babelrc-Datei durch die Einführung von babel-plugin- Komponente, so dass Teilkomponenten eingeführt werden können, um die Größe der Komponente zu reduzieren.

Verzögertes Laden von Routen

Bei Verwendung von Vue-Router packt Webpack jedoch alle Komponenten in eine JS-Datei, was dazu führt, dass die Datei sehr groß wird wirkt sich auf das Laden der Homepage aus. Der beste Weg besteht darin, andere Routen in verschiedene JS-Dateien zu packen und dann beim Routenwechsel die entsprechenden JS-Dateien zu laden.

resolve => require([URL], discover), gute Unterstützung

() => system.import(URL), verfügbar auf der offiziellen Website von webpack2 Die Anweisung wird nach und nach abgeschafft. Es wird nicht empfohlen,

=> import(URL) zu verwenden. Sie gehört zur Kategorie es7 und muss mit der Babel-Syntax verwendet werden -Dynamic-Import-Plugin

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

React-Navigation-Anwendungsfallanalyse

React-Navigation-Anwendungsfallanalyse

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Optimierung des Vue-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!