Comment faire du RSS avec Uniapp

UniApp est un framework de développement d'applications multiplateforme basé sur le framework Vue.js, permettant aux développeurs de créer simultanément des applications iOS, Android, H5 et des mini-programmes. Par conséquent, dans les scénarios nécessitant des performances élevées, vous devrez peut-être utiliser SSR (Server-Side Rendering) pour résoudre les problèmes de performances de rendu. Cet article explique comment implémenter SSR dans UniApp.

Qu’est-ce que la RSS ?
SSR termine le premier rendu de la page côté serveur, renvoyant le contenu HTML statique au navigateur, permettant au navigateur de voir qu'il y a du HTML disponible, puis restitue la page. L’avantage du SSR est qu’il peut accélérer le premier chargement et améliorer l’expérience utilisateur.

La méthode de mise en œuvre SSR d'UniApp ?
La méthode d'implémentation SSR d'UniApp est basée sur la méthode d'implémentation SSR de Vue.js, qui nécessite l'utilisation de certains plug-ins SSR dans l'écosystème Vue.js.
Deux plug-ins Vue.js sont présentés ci-dessous :

1. Vue-router : utilisé pour la gestion du routage et l'association des requêtes aux composants correspondants.
2. Vue-server-renderer : utilisé pour restituer la chaîne HTML de l'application dans l'environnement Node.js, générant des fichiers HTML pour représenter l'état actuel de l'application.

La méthode d'implémentation spécifique est la suivante :

1. Installer Vue-router et Vue-server-renderer :

   npm install vue-router vue-server-renderer --save

2. Créer le fichier d'entrée SSR :
   Créer le fichier Entry-ssr.js sous src avec le contenu suivant :

   import createApp from './main'
   
   export default context => {
     return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    const { url } = context
    const fullPath = router.resolve(url).route.fullPath
   
    if (fullPath !== url) {
      return reject({ url: fullPath })
    }
   
    // 设置 server router 的位置
    router.push(url)
   
    // 等待 router 将组件渲染完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
   
      Promise.all(
        matchedComponents.map(Component => {
          if (Component.asyncData) {
            return Component.asyncData({
              store,
              route: router.currentRoute
            })
          }
        })
      )
        .then(() => {
          context.state = store.state
          resolve(app)
        })
        .catch(reject)
    }, reject)
     })
   }

3. Créer un serveur SSR :
   Créez le fichier server.js dans le répertoire racine avec le contenu suivant :

   const Koa = require('koa')
   const path = require('path')
   const fs = require('fs')
   const koaStatic = require('koa-static')
   const { createBundleRenderer } = require('vue-server-renderer')
   const serverBundle = require('./dist/vue-ssr-server-bundle.json')
   const clientManifest = require('./dist/vue-ssr-client-manifest.json')
   const template = fs.readFileSync(path.join(__dirname, './index.ssr.html'), 'utf-8')
   
   const app = new Koa()
   const renderer = createBundleRenderer(serverBundle, {
     runInNewContext: false,
     template,
     clientManifest
   })
   
   // 静态资源
   app.use(koaStatic(path.join(__dirname, './dist')))
   
   app.use(async (ctx, next) => {
     const context = { url: ctx.url }
   
     const html = await renderer.renderToString(context)
    .catch(err => {
      if (err.code === 404) {
        ctx.status = 404
        ctx.body = '404 Page Not Found'
      } else {
        ctx.status = 500
        ctx.body = '500 Internal Server Error'
        console.error(`${ctx.url}\n${err.stack}`)
      }
    })
   
     ctx.body = html
   })
   
   const port = process.env.PORT || 9090
   
   app.listen(port, () => {
     console.log(`server started at localhost:${port}`)
   })

4. Modifiez la configuration de build :
   Dans le fichier vue.config.js, ajoutez ce qui suit code :

   module.exports = {
     productionSourceMap: false,
     css: {
    extract: {
      ignoreOrder: true
    }
     },
     configureWebpack: config => {
    if (process.env.UNI_SSR) {
      config.output.libraryTarget = 'commonjs2'
      config.externals = [
        /^uni-app/,
        /^@dcloudio/,
        {
          vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue'
          }
        }
      ]
      config.plugins.push(new VueSSRServerPlugin())
    }
     }
   }

5. Modifiez le fichier Package.json dans le répertoire racine :
   Ajoutez le code suivant sous "scripts" :

   "ssr-build": "cross-env UNI_SSR=1 vue-cli-service build --mode production --target server --dest dist && vue-cli-service build --mode production --target client --dest dist",
   "ssr-start": "cross-env NODE_ENV=production node server.js"

   Exécutez npm run ssr-build pour créer l'application SSR, puis exécutez npm run ssr-start pour démarrer l'application.

À ce stade, UniApp SS a été exécuté avec succès.

Résumé
Étant donné que la structure d'UniApp est très similaire à celle de Vue.js, lors de l'implémentation de SSR, le SSR d'UniApp peut être complété selon la méthode d'implémentation SSR de Vue.js. Grâce à une série d'étapes, l'application dans UniApp peut prendre en charge le. Rendu côté serveur, permettant ainsi d'obtenir une vitesse de chargement des pages plus rapide et d'améliorer l'expérience utilisateur.

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!