Wie Vue CDN nutzt, um das Laden des ersten Bildschirms zu optimieren-js-Tutorial-php.cn

Wie Vue CDN nutzt, um das Laden des ersten Bildschirms zu optimieren

php中世界最好的语言

Freigeben： 2018-04-11 13:49:16

Original

3537 Leute haben es durchsucht

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

auf verweisen, zu trennen und sie nicht in „vendor.js“ zu kompilieren. Stattdessen werden sie in Form von Ressourcen referenziert, sodass der Browser mehrere Threads asynchron verwenden kann Kompilieren Sie asynchron Vendor.js, externe js usw., um den Zweck der Beschleunigung des ersten Öffnens zu erreichen.

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>

Nach dem Login kopieren

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'
 }

Nach dem Login kopieren

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'

Nach dem Login kopieren

Entfernen Sie Vue.use(XXX), wie zum Beispiel:

// Vue.use(Router)

Nach dem Login kopieren

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!