Heim > Artikel > Web-Frontend > CDN optimiert die Ladegeschwindigkeit des ersten Bildschirms

CDN optimiert die Ladegeschwindigkeit des ersten Bildschirms

php中世界最好的语言Original: 2018-04-20 14:59:301714Durchsuche

Dieses Mal bringe ich Ihnen CDN, um die Ladegeschwindigkeit des ersten Bildschirms zu optimieren. Das Folgende ist ein praktischer Fall Schauen Sie mal rein.

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ü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

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:

Vue.use(XXX) entfernen, wie zum Beispiel:

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

// Vue.use(Router)

Test

npm neu starten Führen Sie build aus. 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 verwenden Sie den Cache in Vue

Detaillierte Schritte zum Übermitteln von Daten an den Server mithilfe von JSON

Zusammenfassung der Wissenspunkte zur Verbesserung von Vue.js

Das obige ist der detaillierte Inhalt vonCDN optimiert die Ladegeschwindigkeit des ersten Bildschirms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php json css bootstrap vue.js html npm webpack 线程 JS 异步

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：Erste Optimierung des Bildschirmladens nach Abschluss der vuejs-ProjektverpackungNächster Artikel：Erste Optimierung des Bildschirmladens nach Abschluss der vuejs-Projektverpackung

In Verbindung stehende Artikel

Mehr sehen