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

Wie Vue CDN nutzt, um die Geschwindigkeit beim Laden des ersten Bildschirms zu optimieren

php中世界最好的语言

Freigeben： 2018-04-08 15:57:35

Original

2516 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Vue CDN verwendet, um die Ladegeschwindigkeit des ersten Bildschirms zu optimieren. Was sind die Vorsichtsmaßnahmen für Vue, um die Ladegeschwindigkeit des ersten Bildschirms zu optimieren? Ein praktischer Fall, werfen wir einen Blick darauf.

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 „vendor.js“ ziemlich groß, was sich auf das anfängliche Öffnungserlebnis auswirkt.

Die Lösung besteht darin, die externen JS- und CSS-Dateien, auf die

verweist, zu trennen und sie nicht in „vendor.js“ zu kompilieren. Stattdessen werden sie in Form von Ressourcen referenziert, sodass der Browser Kann mehrere A-Threads verwenden, um asynchron Vendor.js, externe js usw. zu laden, um das anfängliche Öffnen zu beschleunigen. 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ührungFü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 In der Datei bulid/webpack.base.conf.js externe Module hinzufügen und die referenzierten externen Module importieren. 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 „eingeführt“ bedeutet Name der Ressource, bbb stellt den Namen dar, der vom Modul für externe Referenzen bereitgestellt wird, und 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:

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

// import Vue from 'vue'
// import Router from 'vue-router'

Nach dem Login kopieren

// Vue.use(Router)

Nach dem Login kopieren

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Der Fall in diesem Artikel und mehr. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So übermitteln Sie Daten im JSON-Format an den Server

Wie man Vue für Anfänger lernt

Wie man mit wiederholter Bindung umgeht, wenn JS dynamisch geladen wird

Das obige ist der detaillierte Inhalt vonWie Vue CDN nutzt, um die Geschwindigkeit beim Laden des ersten Bildschirms zu optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!