单页面和多页面的优缺点

单页面

缺点：

首屏加载时间长；

不利于seo（搜索引擎优化）；

浏览器的前进后退的导航不可用；

页面的复杂度提高很多；

优点：

页面切换快；

服务器压力小；

页面切换时效果炫酷（可以加切换动画）；

为什么单页面首屏加载时间长？

首屏要加载很多需要的js文件，会阻碍页面渲染，导致白屏或加载缓慢

优化首屏加载时间长的问题

1 路由懒加载

这种优化，就是将每个组件的js代码独立出来，在使用到这个组件时，才向服务器请求文件，并且请求过一次后就会缓存下来，再次使用到这个组件时，就会使用缓存，不再发送请求

2 不生成map文件

map文件主要是帮助我们线上调试代码，通常很大，在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件了，这样项目体积会变少

3 cdn加载资源

通过在index.html 中直接引入第三方资源来缓解我们服务器的压力，其原理是将我们的压力分给了其他服务器站点。需要webpack的externals配置

4 按需引用模块

很多页面用到的模块全局引入，较少用的道德模块局部引入

5 首屏加loading图或骨架图

6 使用ssr

首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。

为什么单页面不利于seo？

在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。

因为单页面的情况下的页面中的很多内容都是根据匹配到的路由动态生成并展示出来的，而且很多页面内容是通过ajax异步获取的，网络抓取工具并不会等待异步请求完成后再行抓取页面内容,它们更擅长对静态资源的抓取和分析。

单页面seo解决办法

预渲染

预渲染指的是打包生成一些主要路由对应的静态html文件，这样有了更多的静态资源，网络爬虫可以抓取到更多的网站信息,提升网站的搜索排名。

// 配置PrerenderSPAPlugin
new PrerenderSPAPlugin({
    // 生成文件的路径，也可以与webpakc打包的一致。
    staticDir: path.join(__dirname, '../dist'),
    
    // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
    routes: ['/', '/product','/about','/contact','/join','/jzjh'],
   
    // 这个很重要，如果没有配置这段，也不会进行预编译
    renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
        renderAfterDocumentEvent: 'render-event'
    })
})

// 在main.js中增加
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

router.js 中设置mode: “history”

ssr（服务端渲染）

服务端渲染就是先向后端服务器请求数据，然后生成完整首屏html返回给浏览器， 服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬虫可以抓取到完整的页面信息，SSR另一个很大的作用是加速首屏渲染，因为无需等待所有的JavaScript都完成下载并执行，才显示服务端渲染的标记，所以用户会更快地看到完整渲染的页面。

服务端渲染出的页面有助于搜索引擎识别页面内容，有利于SEO, 所谓SEO，指的是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。现在的搜索引擎爬虫一般是全文分析的模式，分析内容涵盖了一个网站主要3个部分的内容:文本、多媒体(主要是图片)和外部链接，通过这些来判断网站的类型和主题。对于客户端渲染来说，搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来的页面。而服务端渲染的页面代码都可以在源代码中看到，这有助于搜索引擎识别。

缺点：不容易维护，如果不使用node中间层，前后端分工不明，不能进行良好的并行开发