So nutzen Sie CDN, um die Ladegeschwindigkeit von Projekten zu optimieren-js-Tutorial-php.cn

So nutzen Sie CDN, um die Ladegeschwindigkeit von Projekten zu optimieren

php中世界最好的语言

Freigeben： 2018-06-12 10:46:58

Original

2409 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie CDN zur Optimierung der Projektladegeschwindigkeit verwenden und welche Vorsichtsmaßnahmen für die Verwendung von CDN zur Optimierung der Projektladegeschwindigkeit gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 referenzierten externen JS- und CSS-Dateien zu trennen und sie nicht in „vendor.js“ zu kompilieren. Stattdessen werden sie in Form von Ressourcen referenziert, sodass der Browser mehrere Threads zum asynchronen Kompilieren von „vendor“ verwenden kann .js. js, externe js usw. werden geladen, um den Zweck der Beschleunigung des ersten Öffnens zu erreichen.

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 Externals 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 für den Namen der zu importierenden Ressource und bbb für das Modul steht bereitgestellt für Der Name der externen Referenz 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:

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

Nach dem Login kopieren

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

// Vue.use(Router)

Nach dem Login kopieren

Test

Re-npm run build, Sie werden sehen, dass der Anbieter die Größe von .js verringert 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:

React teilt Seitencode und lädt bei Bedarf

Was sind die Vorsichtsmaßnahmen für die Verwendung von Dom in Angular2?

Das obige ist der detaillierte Inhalt vonSo nutzen Sie CDN, um die Ladegeschwindigkeit von Projekten zu optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!