vue全家桶之预渲染

vue全家桶@预渲染

预渲染

最近的项目首屏加载时间长的令人发指，因此仔细研究了预渲染。服务端渲染（SSR）和预渲染（Prerender）技术都可以解决SEO问题和加载时间长问题。

渲染方式

客户端渲染：用户访问 url，请求 html 文件，前端根据路由动态渲染页面内容。关键链路较长，有一定的白屏时间；

服务端渲染：用户访问 url，服务端根据访问路径请求所需数据，拼接成 html 字符串，返回给前端。前端接收到 html 时已有部分内容；

预渲染：构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的 html）。构建出来的 html 文件已有部分内容

服务端渲染与预渲染共同点

针对单页应用，服务端渲染和预渲染共同解决的问题：

SEO：单页应用的网站内容是根据当前路径动态渲染的，html 文件中往往没有内容，网络爬虫不会等到页面脚本执行完再抓取；
弱网环境：当用户在一个弱环境中访问你的站点时，你会想要尽可能快的将内容呈现给他们。甚至是在 js 脚本被加载和解析前；
低版本浏览器：用户的浏览器可能不支持你使用的 js 特性，预渲染或服务端渲染能够让用户至少能够看到首屏的内容，而不是一个空白的网页。

预渲染能与服务端渲染一样提高 SEO 优化，但前者比后者需要更少的配置，实现成本低。弱网环境下，预渲染能更快地呈现页面内容，减少页面可见时间。

什么场景下不适合使用预渲染

个性化内容：对于路由是 /my-profile 的页面来说，预渲染就失效了。因为页面内容依据看它的人而显得不同；

经常变化的内容：如果你预渲染一个游戏排行榜，这个排行榜会随着新的玩家记录而更新，预渲染会让你的页面显示不正确直到脚本加载完成并替换成新的数据。这是一个不好的用户体验；

成千上万的路由：不建议预渲染非常多的路由，因为这会严重拖慢你的构建进程。

应用

vue2.0+cli3.0项目
使用预渲染需要的依赖少很多，页面也没有很多，最终选择了预渲染。由于路由跳转都是使用的原生app导航栏，跳转由和原生交互实现，所以未设置路由为history模式。

1.安装依赖
cnpm install prerender-spa-plugin --save

2.vue.config.js增加插件配置

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');

module.exports = {
  'assetsDir': "./",
  'publicPath': "./",
  configureWebpack: {
    plugins: [
      new HardSourceWebpackPlugin(),
      new PrerenderSPAPlugin({
        // 生成文件的路径，也可以与webpakc打包的一致。
        // 下面这句话非常重要！！！
        // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
        staticDir: path.join(__dirname, 'dist'),
        // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
        routes: ['/StoreService'],
        // 这个很重要，如果没有配置这段，也不会进行预编译
        renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
          renderAfterDocumentEvent: 'render-event'
        })
      }),
    ],
    externals: {
      "BMap": "BMap"
    }
  },
  devServer: {
    // open: process.platform === 'darwin',
    // host: 'localhost',
    port: 8080,
    // open: true, //配置自动启动浏览器
    proxy: {

      '/api/huiyuanka': {
        target:
          "http://***:6199/http-service-engine/callServiceByJson",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        },
      },
      '/api/youhuijuan': {
        target:
          "http://***:5188/http-service-engine/callServiceByJson/",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        },
      },
    }
  },
}

3.main.js

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

4.cnpm run build构建程序，检验dist目录下的文件夹index.html内是否有内容