Vuejs-Projektpaketierung und Optimierung des Ladens des ersten Bildschirms

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verpackung von Vuejs-Projekten und die Optimierung des ersten Bildschirmladens vorstellen.

1: Verwendung von CDN-Ressourcen

Wenn wir packen, werden wir packen.

json, depEnde EncesPlugins werden in Objekte gepackt Wir können einige davon mit cdn laden. Wenn wir beispielsweise nicht vue, axios, vuex und vue-router in unser Projekt packen möchten, Wir müssen Folgendes mögen:

1: Öffnen Sie webpack.base.conf.js

module.exports = {
   externals: {
    ‘vue‘: ‘Vue‘,
    ‘axios‘: ‘axios‘,
    ‘vuex‘: ‘Vuex‘,
    ‘vue-router‘: ‘VueRouter‘
 }
}

2: Öffnen Sie router/index.js. Melden Sie die folgenden zwei Zeilen ab

//import Vue from ‘vue‘
//Vue.use(Router)

3: Wenn Sie vuex verwenden, melden Sie sich von Vue.use (Vuex) in vuex/index.js (anders benannt) ab

Vue.use(Vuex)

Probleme, die nach dem Verpacken auftreten können

1: Von Keep-Alive umgebene Elemente können nicht angezeigt werden

Ursache: Noch unbekannt.

Lösung: Keine Notwendigkeit, am Leben zu bleiben

Empfohlene Lektüre: Das Vue-Projekt verwendet CDN, um das Problem beim Laden des ersten Bildschirms zu optimieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben in diesem Artikel, mehr Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vue reduziert die Anzahl der Serveranfragen

Wie kann vue-cli die Anzahl der Serveranfragen verkürzen? Ladezeit des ersten Bildschirms

Das obige ist der detaillierte Inhalt vonVuejs-Projektpaketierung und Optimierung des Ladens des ersten Bildschirms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!