Utiliser SSR dans Vue pour améliorer la vitesse de chargement du premier écran des applications-Voir.js-php.cn

Utiliser SSR dans Vue pour améliorer la vitesse de chargement du premier écran des applications

WBOY

Libérer： 2023-07-19 10:07:47

original

1636 Les gens l'ont consulté

Utilisez SSR dans Vue pour améliorer la vitesse de chargement du premier écran des applications

Avec le développement continu de la technologie front-end, l'optimisation des performances des applications frontales est également devenue la priorité des développeurs. Dans le développement front-end moderne, les applications monopages (SPA) sont devenues courantes, et avec la popularité de frameworks tels que Vue et React, de plus en plus de développeurs choisissent d'utiliser ces frameworks pour créer des applications. Cependant, les applications SPA doivent télécharger et analyser une grande quantité de code JavaScript lors du premier chargement, ce qui entraîne une vitesse de chargement lente du premier écran. Pour résoudre ce problème, nous pouvons utiliser le rendu côté serveur (SSR) pour améliorer la vitesse de chargement du premier écran de l'application.

Vue fournit une solution de rendu côté serveur officiellement prise en charge, qui nous permet de placer la logique de rendu des applications Vue côté serveur pour l'exécution et d'envoyer les résultats de rendu directement au navigateur, réduisant ainsi le temps nécessaire au navigateur. analyser JavaScript, améliorant ainsi l'efficacité de la vitesse de chargement du premier écran de l'application.

Ce qui suit est un exemple simple qui montre comment utiliser le rendu côté serveur dans Vue pour améliorer la vitesse de chargement du premier écran de l'application.

Tout d'abord, nous devons installer l'outil d'échafaudage vue-cli et créer un nouveau projet :

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

Copier après la connexion

Ensuite, nous devons installer certaines dépendances nécessaires dans le projet :

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

Copier après la connexion

Créez un fichier server.js et écrivez-y Server -côté logique, le code est le suivant :

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')
})

Copier après la connexion

Ensuite, ajoutez une commande dans package.json pour démarrer le serveur :

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

Copier après la connexion

Enfin, on peut exécuter la commande suivante pour démarrer le serveur :

npm run serve

Copier après la connexion

À ce stade, nous pouvons accéder à http://localhost:3000 pour afficher les résultats du rendu du serveur. Nous verrons que les résultats du rendu sont renvoyés directement au navigateur, et qu'il n'y a pas de problème de retard de chargement, ce qui améliore la vitesse de chargement du premier écran de l'application.

À travers les exemples ci-dessus, nous pouvons voir que l'utilisation de la technologie de rendu côté serveur de Vue peut améliorer considérablement la vitesse de chargement du premier écran de l'application. Cependant, l'introduction du rendu côté serveur apporte également une complexité supplémentaire, ce qui nous oblige à prêter attention à certains endroits particuliers au cours du processus de développement. Par exemple, nous ne pouvons pas utiliser directement des objets globaux dans le navigateur (tels qu'une fenêtre et un document) dans le rendu côté serveur. Nous devons plutôt utiliser des objets globaux spéciaux fournis par Vue. De plus, vous devez également prêter attention aux problèmes de compatibilité et de performances pendant le processus de développement.

Pour résumer, la technologie de rendu côté serveur de Vue est un outil puissant qui peut nous aider à améliorer la vitesse de chargement du premier écran de l'application. Cependant, certaines considérations particulières doivent être prises en compte lors de l'utilisation et une certaine complexité supplémentaire est introduite. Si notre application nécessite une vitesse de chargement élevée sur le premier écran, l'utilisation du rendu côté serveur est un bon choix.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!