suchen

Heim >Web-Frontend >js-Tutorial >Wie Vue CDN nutzt, um die Geschwindigkeit beim Laden des ersten Bildschirms zu optimieren

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

php中世界最好的语言
php中世界最好的语言Original
2018-04-08 15:57:352625Durchsuche

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>

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

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'

// Vue.use(Router)

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Welche Probleme können nach dem Packen des vuejs-Projekts auftreten?Nächster Artikel：Welche Probleme können nach dem Packen des vuejs-Projekts auftreten?

In Verbindung stehende Artikel

Mehr sehen