Umfassende Optimierungsstrategie für Vue-Projekte

Dieses Mal werde ich Ihnen eine umfassende Optimierungsstrategie für das Vue-Projekt vorstellen. Was sind die Vorkehrungen für die umfassende 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 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], resolve), 支持性好
() => system.import(URL) , webpack2官网上已经声明将逐渐废除, 不推荐使用
() => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用

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:

So verwenden Sie Vue zum Registrieren von Komponenten

So verwenden Sie das dreischichtige verschachtelte Vue-Routing

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