vue性能优化之预渲染prerender-spa-plugin+vue-meta-info解决seo问题

news2024/12/27 13:31:12

单页面应用中，web项目只有一个页面，前端根据路由不同进行组件之间的对应切换，动态的渲染页面内容。这就是客户端渲染，具有减少服务器端压力、响应速度快等优点。但是单页应用在优化用户体验的同时，也给我们带来了一些对SEO不友好，首屏时间过长等问题。因此，预渲染（Prerender）技术应运而生。纯前端就能完成

prerender-spa-plugin 预渲染

1.安装

npm install prerender-spa-plugin --save

2.vue-config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    staticDir: path.join(__dirname,'dist'),
                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: ['/', '/product','/about'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

3.main.js

mounted () {
    document.dispatchEvent(new Event('render-event'))
  }

new Vue({
  router,
  store,
  render: h => h(App),
  // 这是关键
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

4.router.js 中设置mode: “history”

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ],
  // 这是关键
  mode: 'history'
})

5.打包

npm run build

6.查看打包之后的文件目录
在这里插入图片描述
可见根据路由生成了不同的文件夹，格式为 xxx/index.html

7.访问网站，查看网页源码
在这里插入图片描述如果能看到网页源代码中有实际的节点，代表预渲染成功

vue-meta-info 设置页面title、关键词和描述

seo管理 vue-meta-info 动态设置meta和title的相关知识
1.安装

npm i -S vue-meta-info

2.main.js里面引入vue-meta-info

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

这样在组件页面中就可以使用了。

假设你要给users.vue添加title，meta标签
users/index.vue

<template>
...
</template>
  
<script>
export default {
  metaInfo: {
    title: '我是users头', // set a title
    meta: [{             // set meta
      name: 'keyWords',
      content: '我是users关键字'
    },
    {
      name: 'description',
      content: '我是users描述'
    }],
    link: [{ // set link
      rel: 'asstes',
      href: 'https://assets-cdn.github.com/'
    }]
  }
}
</script>

这样再结合prerender-spa-plugin，打包之后，在dist文件夹找到users文件夹下的index.html
打开你会发现就有title和meta的关键字和描述标签了
在这里插入图片描述

如果要在组件内动态使用 metaInfo ：

注意：动态设置为：Metainfo() { return { } } 形式，静态设置为：Metainfo: { title: ‘我是users头’ }

export default {
 metaInfo () {
   return {
     title: this.pageName
   }
},
  
data () {
 return {
  pageName: 'loading'
 }
},
  
mounted () {
  setTimeout(() => {
   this.pageName = 'async'
 }, 2000)
 }
}