Zusammenfassung der Vue-Projektoptimierungsmethoden

Dieses Mal werde ich Ihnen eine Zusammenfassung der Vue-Projektoptimierungsmethoden geben. Was sind die Vorsichtsmaßnahmen für die Vue-Projektoptimierung?

Bildoptimierung

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

1. Online-Generierung, wie Zhitu, Youpaiyun

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

3. Canvas-Generierung

2. Reduzieren Sie Bildanfragen und verwenden Sie Sprites

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

2. Code Generation: gulp.spritesmith oder sass Compass

SeiteLeistungsoptimierung

Verzögertes Laden von Bildern oder Komponenten

Verwenden Sie die Vue-Lazyload-Komponente oder eine andere Komponente.

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

Lazy Loading von Bildern: v-lazy oder verwenden Sie v-lazy-container, um eine Bildgruppe zu enthalten

// 引入一张图片 
<img  src="/static/imghwm/default1.png" data-src="//domain.com/img1.jpg" class="lazy" alt="Zusammenfassung der Vue-Projektoptimierungsmethoden" > 
// 引入一组图片
<p>
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img1.jpg" class="lazy" alt="Zusammenfassung der Vue-Projektoptimierungsmethoden" >
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img2.jpg" class="lazy" alt="Zusammenfassung der Vue-Projektoptimierungsmethoden" >
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img3.jpg" class="lazy" alt="Zusammenfassung der Vue-Projektoptimierungsmethoden" > 
</p>

Komponenten-Lazy Loading

Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img  class="mini-cover lazy" src="/static/imghwm/default1.png" data-src="img.src" alt="Zusammenfassung der Vue-Projektoptimierungsmethoden" >
</lazy-component>

Bild vorab laden

Bilder schnell anzeigen

Verwendungsszenario: Wenn in einer bestimmten Komponente zum Anzeigen von Bildern ständig durch die Bilder auf der nächsten Seite geblättert wird, führt das Abrufen von Daten vom Server und das anschließende Anzeigen der Bilder dazu, dass die Bilder langsam geladen werden In diesem Fall können Sie beim Anzeigen neuer Daten zunächst das Bild vorab laden und es an der entsprechenden Position ausfüllen

Lazy Loading durch ein Drei-Parteien-Plug-in (Laden bei Bedarf)

JS-Dateien werden im Allgemeinen synchron geladen, und wenn sie auf der Seite platziert werden, wird das Laden der Haupt-JS-Dateien 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 Inhalt der Seite nicht festgelegt ist, können Sie andere Komponenten so einstellen, dass sie auf dem ersten Bildschirm angezeigt werden, wenn die Daten einer bestimmten Komponente geladen werden, und um das Problem überlappender Komponenten beim asynchronen Laden zu verringern. zeigen.

• 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:

Zusammenfassung der drei Möglichkeiten zum dynamischen Laden von JS-Dateien

Zusammenfassung der domänenübergreifenden Methoden, mit denen JS Post-Anfragen unterstützt

Das obige ist der detaillierte Inhalt vonZusammenfassung der Vue-Projektoptimierungsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!