suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung der ersten Bildschirmlademethode für die CDN-Optimierung

Ausführliche Erläuterung der ersten Bildschirmlademethode für die CDN-Optimierung

php中世界最好的语言
php中世界最好的语言Original
2018-05-02 15:47:032589Durchsuche

Dieses Mal werde ich Ihnen die First-Screen-Loading-Methode der CDN-Optimierung ausführlich erläutern sehen.

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 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ü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 , bbb gibt den Namen an, den das Modul für externe Referenzen bereitstellt und der von der entsprechenden Bibliothek angepasst wird. Beispielsweise ist vue Vue, vue-router ist VueRouter.

3. Entfernen Sie den Originalverweis

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)
Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie vue-cli die Ladezeit des ersten Bildschirms verkürzen kann


vue reduziert die Anzahl der Server Anfragen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der ersten Bildschirmlademethode für die CDN-Optimierung. 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：Vuejs-Projektpaketierung und Optimierung des Ladens des ersten BildschirmsNächster Artikel：Vuejs-Projektpaketierung und Optimierung des Ladens des ersten Bildschirms

In Verbindung stehende Artikel

Mehr sehen