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

单页面应用中，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&#