探究SEO与VUE首屏渲染及其解决方案

4. 预编译prerender-spa-plugin插件

• Nuxt要用他的那套约束，也就是说你的项目要迁移到Nuxt去，解决 SEO 问题是不是只有 SSR 呢？其实预渲染也能做到
  
• 还有的，就是webpack的预编译，可以对首页先加载出来，然后他再慢慢去加载js文件，这样就不用等待首页加载
• 服务端渲染解决的问题，不仅只是把 HTML 页面给浏览器，更重要的是处理动态逻辑和 JS 代码后，将渲染后完整的 HTML 给浏览器，渲染的过程在服务端。
  
• 预渲染，是利用构建工具在 webpack 中生成静态的 HTML，直接给浏览器，渲染的过程在本地。
  
• 预渲染插件里面提到两种不能使用：大量路由、动态内容
  
• 接下来我们介绍下prerender-spa-plugin插件实现预编译
• 安装：

• cnpm install prerender-spa-plugin --save

• vue-cli3.0的写法
• 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({
                      // 生成文件的路径，也可以与webpakc打包的一致。
                      // 下面这句话非常重要！！！
                      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                      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'
                      })
                  }),
              ],
          };
      }
  }

• 在main.js中增加
  

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

• router.js 中设置mode: “history”
  
  注意：官方文档上 路由模式必须为 history 。如果不设置history模式，也能运行和生成文件，每个index.html文件的内容都会是一样的。所以必须使用 history模式
• 运行npm run build，看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个 目录里 的 index.html 用IDE打开，看文件内容里是否有该文件应该有的内容。有的话，就设置成功了
  
• 打包之后如下图：

• 
  

• 
  

• 突然发现原来我一直有使用Gzip压缩文件的，这就很好了

• vue-cli2.0的写法
• 修改 webpack 配置，比较简单就能完成配置
  

• const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderermodule.exports = {
      plugins: [
        //...   
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          outputDir: path.join(__dirname, 'prerendered'),
          indexPath: path.join(__dirname, 'dist', 'index.html'),
          routes: ['/', '/about', '/some/deep/nested/route'],
          postProcess(renderedRoute) {
            renderedRoute.route = renderedRoute.originalPath
            renderedRoute.html = renderedRoute.html.split(/>[\s]+</gmi).join('><')
            if (renderedRoute.route.endsWith('.html')) {
              renderedRoute.outputPath = path.join(__dirname, 'dist', renderedRoute.route)
            }
            return renderedRoute
          }, minify: {
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            decodeEntities: true, keepClosingSlash: true,
            sortAttributes: true
          },
          renderer: new Renderer({
            inject: { foo: 'bar' },
            maxConcurrentRoutes: 4
          })
        })
      ]
    }

• 简直不要太爽，速度变快了很多，基本上1s就可以显示首页页面，有兴趣的小伙伴赶紧使用在项目里面吧！！！

5. 两者的区别

• 服务端SSR渲染解决的问题，不仅只是把 HTML 页面给浏览器，更重要的是处理动态逻辑和 JS 代码后，将渲染后完整的 HTML 给浏览器，渲染的过程在服务端。
• 预渲染，是利用构建工具在 webpack 中生成静态的 HTML，直接给浏览器，渲染的过程在本地。将服务端编译HTML的时机提前到了构建时，因此降低了服务端的压力
• 共性：
  加载速度一样快；
  入侵性小；
• 不同：
  服务端渲染在服务器；适用于复杂、较大型、与服务端交互频繁的网站，如电商
  预渲染在客户端上；适用于简单的静态页面
• 很奇怪的一点是：打开f12，发现刷新很慢，关掉f12，刷新就很快，不明觉厉，知道的同学在评论区分享下！

最后总结

要想seo好，使用ssr服务端渲染，即服务端生成静态页面给客户端，交互的请结合Nuxt；或者不在服务端渲染，使用webpack的prerender-spa-plugin插件实现预编译，生成静态的 HTML，直接给浏览器，渲染的过程在本地。使用webpack的code splitting按需加载压缩优化首页渲染或者vue分片