Verwendung von SSR in Vue zur Verbesserung der Ladegeschwindigkeit von Anwendungen auf dem ersten Bildschirm-View.js-php.cn

Verwendung von SSR in Vue zur Verbesserung der Ladegeschwindigkeit von Anwendungen auf dem ersten Bildschirm

WBOY

Freigeben： 2023-07-19 10:07:47

Original

1654 Leute haben es durchsucht

Verwenden Sie SSR in Vue, um die Ladegeschwindigkeit des ersten Bildschirms der Anwendung zu verbessern

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie ist auch die Leistungsoptimierung von Front-End-Anwendungen in den Fokus der Entwickler gerückt. In der modernen Front-End-Entwicklung sind Single-Page-Anwendungen (SPA) zum Mainstream geworden, und mit der Popularität von Frameworks wie Vue und React entscheiden sich immer mehr Entwickler dafür, diese Frameworks zum Erstellen von Anwendungen zu verwenden. Allerdings müssen SPA-Anwendungen beim ersten Laden eine große Menge JavaScript-Code herunterladen und analysieren, was zu einer langsamen Ladegeschwindigkeit des ersten Bildschirms führt. Um dieses Problem zu lösen, können wir serverseitiges Rendering (SSR) verwenden, um die Ladegeschwindigkeit des ersten Bildschirms der Anwendung zu verbessern.

Vue bietet eine offiziell unterstützte serverseitige Rendering-Lösung, die es uns ermöglicht, die Rendering-Logik von Vue-Anwendungen zur Ausführung auf die Serverseite zu stellen und die Rendering-Ergebnisse direkt an den Browser zu senden, wodurch die Zeit verkürzt wird, die der Browser benötigt Analysieren Sie JavaScript und verbessern Sie dadurch die Effizienz beim Laden des ersten Bildschirms der App.

Das Folgende ist ein einfaches Beispiel, das zeigt, wie serverseitiges Rendering in Vue verwendet wird, um die Ladegeschwindigkeit des ersten Bildschirms der Anwendung zu verbessern.

Zuerst müssen wir das vue-cli-Gerüsttool installieren und ein neues Projekt erstellen:

npm install -g @vue/cli
vue create my-app

Nach dem Login kopieren

Dann müssen wir einige notwendige Abhängigkeiten im Projekt installieren:

cd my-app
npm install vue-server-renderer express

Nach dem Login kopieren

Erstellen Sie eine server.js-Datei und schreiben Sie darin Server -Seitenlogik lautet der Code wie folgt:

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      message: 'Hello, Vue SSR!'
    },
    template: '<div>{{ message }}</div>'
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }

    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000')
})

Nach dem Login kopieren

Als nächstes fügen Sie einen Befehl in package.json hinzu, um den Server zu starten:

{
  "scripts": {
    "serve": "node server.js"
  }
}

Nach dem Login kopieren

Abschließend können wir den folgenden Befehl ausführen, um den Server zu starten:

npm run serve

Nach dem Login kopieren

An diesem Punkt Wir können auf http://localhost:3000 zugreifen, um die Server-Rendering-Ergebnisse anzuzeigen. Wir werden sehen, dass die Rendering-Ergebnisse direkt an den Browser zurückgegeben werden und es kein Problem mit verzögertem Laden gibt, was die Ladegeschwindigkeit des ersten Bildschirms der Anwendung verbessert.

Anhand der obigen Beispiele können wir sehen, dass die Verwendung der serverseitigen Rendering-Technologie von Vue die Ladegeschwindigkeit des ersten Bildschirms der Anwendung erheblich verbessern kann. Die Einführung des serverseitigen Renderings bringt jedoch auch eine gewisse zusätzliche Komplexität mit sich, sodass wir während des Entwicklungsprozesses auf einige besondere Stellen achten müssen. Beispielsweise können wir globale Objekte im Browser (z. B. Fenster und Dokumente) beim serverseitigen Rendern nicht direkt verwenden. Stattdessen müssen wir spezielle globale Objekte verwenden, die von Vue bereitgestellt werden. Darüber hinaus müssen Sie während des Entwicklungsprozesses auch auf Kompatibilitäts- und Leistungsprobleme achten.

Zusammenfassend lässt sich sagen, dass die serverseitige Rendering-Technologie von Vue ein leistungsstarkes Tool ist, das uns dabei helfen kann, die Ladegeschwindigkeit des ersten Bildschirms der Anwendung zu verbessern. Bei der Verwendung müssen jedoch einige besondere Überlegungen berücksichtigt werden, wodurch eine gewisse zusätzliche Komplexität entsteht. Wenn unsere Anwendung eine hohe Ladegeschwindigkeit des ersten Bildschirms erfordert, ist die Verwendung von serverseitigem Rendering eine gute Wahl.

Das obige ist der detaillierte Inhalt vonVerwendung von SSR in Vue zur Verbesserung der Ladegeschwindigkeit von Anwendungen auf dem ersten Bildschirm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!