Heim > Artikel > Web-Frontend > Wie Vue CDN nutzt, um das Laden des ersten Bildschirms zu optimieren
Wie Vue CDN nutzt, um das Laden des ersten Bildschirms zu optimieren
- php中世界最好的语言Original
- 2018-04-11 13:49:163450Durchsuche
Dieses Mal zeige ich Ihnen, wie Vue CDN verwendet, um das Laden des ersten Bildschirms zu optimieren. Was sind die Vorsichtsmaßnahmen für Vue, um das Laden des ersten Bildschirms zu optimieren? Hier sind praktische Fälle .
Im Vue-Projekt werden alle in das Projekt eingeführten JS- und CSS-Dateien während der Kompilierung in Vendor.js gepackt. Der Browser kann erst nach dem Laden der Datei mit der Anzeige des ersten Bildschirms beginnen. Wenn viele Bibliotheken eingeführt werden, ist die Größe der Datei „vendor.js“ ziemlich groß, was sich auf das anfängliche Öffnungserlebnis auswirkt. Die Lösung besteht darin, die externen JS- und CSS-Dateien, die Externe Bibliotheksdateien können CDN-Ressourcen oder andere Serverressourcen nutzen. Nehmen Sie als Nächstes die Einführung von Vue, Vuex und Vue-Router als Beispiel, um den Verarbeitungsablauf zu veranschaulichen.1. Ressourceneinführung
Fügen Sie in index.html CDN-Ressourcen hinzu, z. B.bootstrap:
<body> <p id="app"></p> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </body>
2. Konfiguration hinzufügen
Fügen Sie in der Datei bulid/webpack.base.conf.js externe Module hinzu und importieren Sie die referenzierten externen Module wie folgt:module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex'
}
Hinweis:
Das Format ist „aaa“ : „bbb“, wobei aaa den Namen der zu importierenden Ressource darstellt und bbb den vom Modul für externe Referenzen bereitgestellten Namen darstellt, der von der entsprechenden Bibliothek angepasst wird. Beispielsweise ist vue Vue, vue-router ist VueRouter.3. Originalverweise entfernen
Entfernen Sie den Import, z. B.:// import Vue from 'vue' // import Router from 'vue-router'Entfernen Sie Vue.use(XXX), wie zum Beispiel:
// Vue.use(Router)
Testen
Re-npm run build, Sie werden sehen, dass die Größe von Vendor.js abgenommen hat. Über das Netzwerktool im Entwicklermodus können Sie sehen, dass Dateien wie vue.js, vuex.js, Vendor.js usw. jeweils von einem Thread geladen werden. Und durch die Verwendung von CDN ist die Ladegeschwindigkeit schneller als auf Ihrem eigenen Server. 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 packen Sie Vue-Projekte nach Umgebung
Eine Zusammenfassung mehrerer Punkte, die Sie kennen müssen, um sich zu verbessern Vue.js
Detaillierte Erläuterung der automatisierten mobilen Build-Rem-Methode von Webpack
Das obige ist der detaillierte Inhalt vonWie Vue CDN nutzt, um das Laden des ersten Bildschirms zu optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!