Dieses Mal zeige ich Ihnen, wie Sie CDN zur Optimierung der Projektladegeschwindigkeit verwenden und welche Vorsichtsmaßnahmen für die Verwendung von CDN zur Optimierung der Projektladegeschwindigkeit gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Vorwort
Als Website-Anwendung ist die Ladegeschwindigkeit sehr wichtig. Bei der Ladegeschwindigkeit handelt es sich zum einen um die angemessene Anordnung des Programms, z. B. das Laden von Komponenten bei Bedarf, und zum anderen um das asynchrone Laden von JS, CSS und anderen Ressourcen.
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 seller.js ziemlich groß, was sich auf das anfängliche Öffnungserlebnis auswirkt.
Die Lösung besteht darin, die referenzierten externen JS- und CSS-Dateien zu trennen und sie nicht in „vendor.js“ zu kompilieren. Stattdessen werden sie in Form von Ressourcen referenziert, sodass der Browser mehrere Threads zum asynchronen Kompilieren von „vendor“ verwenden kann .js. js, externe js usw. werden geladen, um den Zweck der Beschleunigung des ersten Öffnens zu erreichen.
Für externe Bibliotheksdateien können Sie CDN-Ressourcen oder andere Serverressourcen verwenden.
Nehmen Sie im Folgenden 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 Externals 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 für den Namen der zu importierenden Ressource und bbb für das Modul steht bereitgestellt für Der Name der externen Referenz wird von der entsprechenden Bibliothek angepasst. Beispielsweise ist vue Vue und vue-router ist VueRouter.
3. Entfernen Sie den Originalverweis
Entfernen Sie den Import, wie zum Beispiel:
// import Vue from 'vue' // import Router from 'vue-router'
Vue.use(XXX) entfernen, wie zum Beispiel:
// Vue.use(Router)
Test
Re-npm run build, Sie werden sehen, dass der Anbieter die Größe von .js verringert 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:
React teilt Seitencode und lädt bei Bedarf
Was sind die Vorsichtsmaßnahmen für die Verwendung von Dom in Angular2?
Das obige ist der detaillierte Inhalt vonSo nutzen Sie CDN, um die Ladegeschwindigkeit von Projekten zu optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
