Ausführliche Erläuterung der ersten Bildschirmlademethode für die CDN-Optimierung-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-05-02 15:47:03

Original

2491 Leute haben es durchsucht

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>

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

Nach dem Login kopieren

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

// Vue.use(Router)

Nach dem Login kopieren

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!