So verwenden Sie die CDN-Optimierung in Vue

In diesem Artikel wird hauptsächlich die Methode zur Verwendung der CDN-Optimierung in Vue-Projekten vorgestellt. Jetzt werde ich sie mit Ihnen teilen und Ihnen eine Referenz geben.

Beim Schreiben unseres Projekts können Optimierungsprobleme nicht ignoriert werden, insbesondere hat die Optimierung des ersten Bildschirms höchste Priorität. Hier sind zwei Optimierungsmethoden – CDN und asynchrones Laden. Siehe asynchrones Laden // www.jb51.net/article /110661.htm

1. cdn

Was ist cdn selbst?

Seine Funktion ist: Wenn wir die Seite laden, müssen wir einige der Abhängigkeiten, die wir benötigen, in die aktuelle Sitzung laden und dann erneut starten. Wenn wir den ersten Bildschirm mit vielen Modulen haben, ist die Wartezeit länger. Der Browserspeicher kann bis zu vierzig Prozesse ausführen. Sie müssen warten, bis die vorherigen geladen sind, bevor wir den folgenden Code ausführen. Wenn wir CDN verwenden, um einige Ressourcen von Drittanbietern einzuführen, können wir den Druck auf unseren Server verringern um unseren Druck aufzuteilen. Geben Sie Punkte an andere Server. Das Folgende ist die spezifische Implementierung des Codes:

(1) Stellen Sie zunächst die von Bootstrap bereitgestellten Ressourcen vor. Sie können sich auf der offiziellen Website anmelden: http:/ /www.bootcdn.cn/
vue wird wie folgt in die äußerste Datei index.js eingeführt

<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>

Was dann im Projekt geändert werden muss, ist die Datei webpack.base.conf.js darunter Der Bulid-Ordner, wo geändert werden soll. Für

module.exports = {
 entry: {
  app: './src/main.js'
 },
 externals:{
  'BMap': 'BMap',
  'vue': 'Vue',
  'vue-router': 'VueRouter'
 },

müssen vue und vue-router für die globale Verwendung verfügbar gemacht werden. Die Kleinbuchstaben vue und vue-router sind hier die entsprechenden Namen, wenn wir Ressourcen einführen Der Doppelpunkt wird von uns selbst definiert. Natürlich können die beiden Namen identisch sein. Der nächste Schritt besteht darin, die ursprüngliche Einführungsmethode zu entfernen, in der auf die entsprechenden Ressourcen verwiesen wird Das heißt, wir haben sie ursprünglich mit Import eingeführt, z. B. main.js und Ändern Sie die index.js im Router-Ordner:

// import Vue from 'vue'

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

Achten Sie darauf, die index.js im Router-Ordner

zu ändern

export default new VueRouter({
 // modes: 'history',
 routes: [
  {
   path: '/',
   redirect: '/main/home'
  },

Hier ist zu beachten, dass die obige Änderung möglicherweise nicht erforderlich ist, hier nur Um das Wissen aufzuzeichnen, kommentieren Sie bitte nicht, wenn es Ihnen nicht gefällt

Das Obige ist was Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So bestimmen Sie NaN in JavaScript

So verwenden Sie jQuery, um einen auf die Maus reagierenden Transparenzverlaufsanimationseffekt zu implementieren

So implementieren Sie einen auf die Maus reagierenden Taobao-Animationseffekt in jQuery

Detaillierte Interpretation der Trennung und Kombination von Vue-Administrator und Backend (Flasche)

Erläutern Sie die Grundkonfiguration im Vue+Webpack im Detail

So erstellen Sie einen Mehrpersonen-Chatroom in der NodeJS+Express-Umgebung

So implementieren Sie die Front-End-Sternebewertungsfunktionskomponente mit vue2.0

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CDN-Optimierung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!